检测与设置为100％高度身体scrollTop距离

我有一个网页需要高度设置，因为页面上的滚动元素。但我也需要检测scrollTop()的距离，以添加一些CSS导航栏。看来，设置身体的高度（这是CSS下面的画布，因为我使用slidebars.js）到100％不允许我检测scrollTop是否已达到阈值。检测与设置为100％高度身体scrollTop距离

这是我无法工作的js。

$(window).scroll(function() { 
    if($(window).scrollTop() > 175) { 
    $('.navbar').css("box-shadow", '0 10px 12px rgba(0,0,0,.175)'); 
    } else { 
    $('.navbar').css("box-shadow", ''); 
    } 
});

CSS

[canvas=container] { 
    width: 100%; 
    height: calc(100% - 100px); 
    margin-top: 100px; 
    overflow-y: auto; 
    overflow-x:hidden; 
    position: relative; 
    background-color: white; /* Basic background color, overwrite this in your own css. */ 
    -webkit-overflow-scrolling: touch; /* Enables momentum scrolling on iOS devices, may be removed by setting to 'auto' in your own CSS. */ 
}

它只是如果我有高度的身体（Canvas）的设置，但我需要设置高度对身体不火那么有没有允许任何解决办法我设定身高还可以让我检测到距离为scrollTop()？谢谢你的帮助。

来源

2017-10-19 Rockwell Rice

如果这与你的[上一个问题]（https://stackoverflow.com/questions/45378248/setting-html-height-to-100-eliminates-scrolling）有关，那么你应该试图检测滚动的元素的scrollTop，而不是窗口。否则，请包含代码（包括相关的CSS），以便我们能够真实地再现您遇到的问题;因为现在还不清楚这里发生了什么。 –

与该问题无关 –

我添加了css，并且设置了高度，没有检测到卷动，没有检测到卷动。 –

scrollTop需要测量实际上滚动的元素，在这种情况下不是窗口。

$("[canvas='container']").scroll(function() { 
    if ($(this).scrollTop() > 175) { 
    $('.navbar').css("box-shadow", '0 10px 12px rgba(0,0,0,.175)'); 
    } else { 
    $('.navbar').css("box-shadow", ''); 
    } 
});

（我不能完全肯定选择是有道理的，我不知道为什么一个元素将有一个“画布”属性...我只是用什么在你的CSS那里去。使用无论选择器是否返回滚动元素）

来源

2017-10-19 17:21:31

检测与设置为100％高度身体scrollTop距离

回答

相关问题