Question

我的网站上有一个固定的标题，使用此功能缩小页面滚动：

 jQuery(document).ready(function($) {
    $(window).scroll(function () {
        if ($(window).scrollTop() > 350) { 
            $('header').addClass('shrink');
        }
        else{
            $('header').removeClass('shrink');
        }
     });
 });

在移动设备上查看网站时，我想删除固定的标头，将其保留为常规标头，这就是我所做的：

if ($(window).width() < 769) { 
    $('header').removeClass('shrink'); 
}

问题是现在网站不会在移动设备上一直滚动。有人可以帮我解决这个问题吗？

Answer 1

而不是在JavaScript中执行它为什么不尝试CSS。

@media screen and (max-width: 769px) {
    .shrink {
       /* write your rules here.*/
    }
}

您应该发布您的代码或网址。我不知道从你提供的代码中删除“shrink”类背后的逻辑是什么，似乎你没有将该类添加到标题中，但是你要删除它。

我认为您的最佳解决方案是移除移动设备的位置CSS规则。

Answer 2

抱歉... stackoverflow不允许在评论中进行格式化。

试试这个......

  .shrink { 
    position:fixed; 
    clear:both!important; 
    width:100%; 
    height:50px!important; 
    max-height:50px!important; 
    min-height:50px!important; 
    z-index:999999999; 
    transition: all 0.5s ease-in-out; 
    -moz-transition: all 0.5s ease-in-out; 
    -webkit-transition: all 0.5s ease-in-out; 
    -o-transition: all 0.5s ease-in-out; 
}

@media screen and (max-width: 769px) {
    .shrink {
       position: static;
    }
}

Jquery函数阻止网站一直向下滚动

2 个答案: