javascript - 如果距离页面顶部超过 130 像素，CSS 会显示阴影

Question

如何仅使用 CSS 来实现下一个 javascript 函数？ 如果距离页面顶部超过 130 像素，我需要显示框阴影。

$(window).scroll(function() {
    if ($(this).scrollTop() <= 130) {
        $('.shadow').css({
                'box-shadow': 'none',
                '-moz-box-shadow' : 'none',
                '-webkit-box-shadow' : 'none' });
    }
    else {
        $('.shadow').css({
                'box-shadow': '0px 10px 10px #d0d0d0',
                '-moz-box-shadow' : '0px 10px 10px #d0d0d0',
                '-webkit-box-shadow' : '0px 10px 10px #d0d0d0' });
    }    
});

我真的只需要在 CSS 中为我​​的工作申请做这件事。非常感谢!

Answer 1

  window.onscroll = function() {scrollFunction()};

    function scrollFunction() {
      if (document.body.scrollTop > 130  || document.documentElement.scrollTop > 130 ) {
        document.getElementById("myBtnd").classList.add("showbox");
      } else {
        document.getElementById("myBtnd").classList.remove("showbox");
      }
    }

CSS

.showbox{

 box-shadow: 5px 10px 8px 10px #888888;
}