我正在创建一个1页的网站,我想在用户向下滚动时删除一个类,并在用户向上滚动时添加该类.
我已经做到了这一点,但它不正确,当用户从顶部向下滚动50px然后该类被移除并且当用户从顶部向上滚动50px时添加它.
我想要它,以便它们几乎可以在页面的底部,如果向上滚动类,如果它们向下滚动,那么它被删除
这是我到目前为止的查询
jQuery(document).ready(function($) { $(".test").addClass("mobile"); $(window).scroll(function(){ var scroll = $(window).scrollTop(); if (scroll >= 50) { $(".test").removeClass("mobile"); } else if (scroll <= 50) { $(".test").addClass("mobile"); } }); });
解决方法
因此,这声明了一个全局变量lastScroll来跟踪最后一个已知的滚动位置.用户滚动后,它会将滚动位置与上一个已知滚动位置进行比较,并根据该位置添加或删除您的类.我还删除了< =和> =因为如果滚动位置没有改变(不知何故),我不希望它做任何事情.
var lastScroll = 0; jQuery(document).ready(function($) { $(".test").addClass("mobile"); $(window).scroll(function(){ var scroll = $(window).scrollTop(); if (scroll > lastScroll) { $(".test").removeClass("mobile"); } else if (scroll < lastScroll) { $(".test").addClass("mobile"); } lastScroll = scroll; }); });
var lastScroll = 0; jQuery(document).ready(function($) { $(".test").addClass("mobile"); $(window).scroll(function(){ setTimeout(function() { //give them a second to finish scrolling before doing a check var scroll = $(window).scrollTop(); if (scroll > lastScroll + 30) { $(".test").removeClass("mobile"); } else if (scroll < lastScroll - 30) { $(".test").addClass("mobile"); } lastScroll = scroll; },1000); }); });
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。