防止网站滚动的Jquery功能

Jquery function preventing website to scroll all the way down

本文关键字：Jquery 功能 滚动 网站      更新时间：2023-09-26

我在我的网站上有一个固定的标题，在页面滚动上收缩，使用这个函数:

 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'); 
}

问题是，现在的网站不能滚动到移动设备上。有人能帮我修一下吗?

与其用JavaScript，不如试试用CSS。

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

你应该张贴你的代码或URL。我不知道从你提供的代码中删除"收缩"类背后的逻辑是什么，似乎你没有将该类添加到标题中，但你正在删除它。

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

抱歉…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;
    }
}

相关文章：