媒体查询无法更改样式

最新推荐文章于 2021-08-04 06:59:01 发布

RareHeng Lee

最新推荐文章于 2021-08-04 06:59:01 发布

阅读量552

点赞数 2

文章标签： javascript css

本文链接：https://blog.csdn.net/weixin_39031806/article/details/105418778

版权

需求如下：
为了实现一个状态在下拉到一定位置的时候，就要固定位置。使用js修改状状态栏的定位。

$(document).ready(function() {
    $(document).scroll(function() {     
        var scroH = $(document).scrollTop(); //滚动高度
        var viewH = $(window).height(); //可见高度 
        var contentH = $(document).height(); //内容高度
        if (scroH > 72) {
            $(".introduce-wrap").css("position", "fixed")
        }
        if (scroH <=  72) { 
            $(".introduce-wrap").css("position", "absolute")
        }
    });
})

在这里插入图片描述

出现问题：
因为是响应式的，在切换成手机显示的时候，使用媒体查询，本来低于768px的时候是relative。但是却没有效果。

@media screen and (max-width: 767px) {
	.introduce-wrap {
	        position: relative;
	        top: 0;
	        right: 0;
	        width: auto;
	        margin: 0 0.32rem;
	        background: none;
	        border: none;
	 }
 }

在这里插入图片描述

原因：
使用js修改过的定位值，无法再使用媒体查询换过来，也需要在js里面根据当前视口大小，来变更定位值。
解决：
在js文件新增修改定位的代码。

$(document).ready(function() {
    $(document).scroll(function() {     
        var scroH = $(document).scrollTop(); //滚动高度
        var viewH = $(window).height(); //可见高度 
        var viewW = $(window).width(); //可见宽度 
        var contentH = $(document).height(); //内容高度
        if (scroH > 72) { 
            $(".introduce-wrap").css("position", "fixed")
        }
        if (scroH <=  72) { 
            $(".introduce-wrap").css("position", "absolute")
        }
         //css媒体查询样式的优先级低于js修改的。
       if (viewW <= 767) {
          $(".introduce-wrap").css("position", "relative")
       } 
    });
})