如何解决同一页面上的机车滚动的jQuery Window滚动问题
我正在使用插件Locomotive Scroll开发网站,以创建流畅的滚动体验。该插件工作正常。但是,我想要一个固定的标题(顶部菜单),当开始滚动页面时具有典型的降低高度效果。
这是机车滚动的JS代码:
document.documentElement.classList.add('is-loaded');
document.documentElement.classList.remove('is-loading');
setTimeout(() => {
document.documentElement.classList.add('is-ready');
},300)
setTimeout(() => {
const scroll = new LocomotiveScroll({
el: document.querySelector('[data-scroll-container]'),smooth: true,smoothMobile: true,getSpeed: true,getDirection: true,useKeyboard: true
});
},1000);
$(window).scroll(function() {
if ($(this).scrollTop() > 1){
$('.site_header').removeClass('is--large').addClass('is--small');
}
else{
$('.site_header').removeClass('is--small').addClass('is--large');
}
});
任何帮助将不胜感激,谢谢!
解决方法
我在Github插件页面上找到了已解决问题的答案。
scroll.on('scroll',(position) => {
if ((position.scroll.y) > 50) {
document.querySelector('.site_header').classList.remove('is--large');
document.querySelector('.site_header').classList.add('is--small');
} else {
document.querySelector('.site_header').classList.remove('is--small');
document.querySelector('.site_header').classList.add('is--large');
}
});
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。