Question

由于页面上的滚动元素，我有一个需要设置高度的网页。但我还需要检测scrollTop()距离以将一些css添加到导航栏。似乎将body的高度（下面的css中的画布，因为我使用的是slidebars.js）设置为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. */
}

如果我在身体（画布）上设置了高度，它根本不会触发，但我需要在身体上设置高度，所以是否有任何解决方法允许我设置身高但也允许我检测距离scrollTop()？谢谢你的帮助。

Answer 1

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中找到什么。使用任何选择器返回滚动元素。）

检测scrollTop距离，将body设置为100％高度

1 个答案: