仅当用户向下滚动时,才在固定的#topbar上显示阴影

Question

我的网站上有一个#top栏.它始终在顶部可见,并随着用户滚动而与用户一起旅行.它工作正常.现在我想显示#top返回栏上的阴影只有当滚动条位置是> 0.如果用户登顶,则必须消失.

#top {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 80px;
    z-index: 9999;
}
#top.shadow {
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
}

解决方案(基于戈德温的回答)

$(window).scroll(function(){
    if($(window).scrollTop() > 0) {
        $('#top').addClass('shadow');
    } else {
        $('#top').removeClass('shadow');
    }
});

...但我认为这不是最好的方式 - 似乎在旧电脑/浏览器上表现不佳.有任何想法吗？

Answer 1

这是使用jQuery 的解决方案:

$(document).ready(function(){
  $(window).scroll(function(){
    var y = $(window).scrollTop();
    if( y > 0 ){
      $("#top-shadow").show();
    } else {
      $("#top-shadow").hide();
    }
  });
})?