我的网站上有一个固定的导航栏,一旦它到达页面上的某个点,我就会尝试将其绑定(bind)到该导航栏上。我之前在三个网站上成功完成过三次,但我终其一生都无法让它在这个网站上运行。该函数包装在一个准备就绪的窗口中,所以我知道该页面已完全加载 - 完全难住了两天......代码如下:
jQuery:
function startchange() {
$('#ajax-frame').imagesLoaded().done(function(instance) {
var scroll_start = 0;
var startchange = $('.startchange');
var offset = startchange.offset();
if (startchange.length) {
$(document).on( 'scroll', function() {
scroll_start = $(this).scrollTop();
if (scroll_start > offset.top) {
$('nav').addClass('active');
console.log("startchange working");
} else {
$('nav').removeClass('active');
};
});
}
});
};
CSS:
body,
html {
height: 100% !important;
width: 100%;
margin: 0;
padding: 0;
overflow-x: hidden;
}
感谢您对这个令人沮丧的问题的任何见解。
最佳答案
解决此问题的一种快速方法是从您的 css 中删除:overflow-x: hidden;
。演示:https://jsfiddle.net/mrlew/ce8me3qk/
但这是正在发生的事情:您正在将 body
和 html
设置为 100% 高度,其中一个与另一个重叠(html
标签也是 block 元素)。您将两者都设置为 height: 100%,实际上您滚动的是 body
,而不是 window/document
。
证明:在将 overflow
设置为 scroll
时查看两个滚动条:https://jsfiddle.net/mrlew/ce8me3qk/8/请注意,您正在滚动内部。因此,如果您将 $("document").on('scroll', function() {
更改为 $("body").on('scroll', function() {
,它也会起作用。
或者,不要将 html
height
设置为 100%
。
关于javascript - jquery文档滚动不触发,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41968199/