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

Question

我的网站上有一个#top 栏。它始终在顶部可见，并随着用户滚动而移动。它工作正常。现在，如果滚动条位置为 > 0，我想在 #top bar only 上显示阴影。如果用户转到顶部，它必须消失。

#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);
}

解决方案(基于 Godwin 的回答)

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

...但我认为这不是最好的方法——在旧计算机/浏览器上的性能似乎很低。有什么想法吗？

Answer 1

这是 a solution使用 jQuery:

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