javascript - 滚动时添加不透明度类，但返回顶部时删除

Question

我有一个粘性标题，向下滚动时会消失，向上滚动时会重新出现。 这是代码

// Hide Header on on scroll down
var didScroll;
var lastScrollTop = 0;
var delta = 5;
var navbarHeight = $('#main-header').outerHeight();

$(window).scroll(function(event){
    didScroll = true;
    if (scroll >= 500) {
        $("#main-header").addClass("nav-shadow");
    } else {
        $("#main-header").removeClass("nav-shadow");
    }
});

setInterval(function() {
    if (didScroll) {
        hasScrolled();
        didScroll = false;
    }
}, 250);

function hasScrolled() {
    var st = $(this).scrollTop();

    // Make scroll more than delta
    if(Math.abs(lastScrollTop - st) <= delta)
        return;

    // If scrolled down and past the navbar, add class .nav-up.
    if (st > lastScrollTop && st > navbarHeight){
        // Scroll Down
        $('#main-header').removeClass('nav-down').addClass('nav-up');
          $('#main-header').removeClass('nav-shadow');
    } else {
        // Scroll Up
        if(st + $(window).height() < $(document).height()) {
            $('#main-header').removeClass('nav-up').addClass('nav-down');
              $('#main-header').addClass('nav-shadow');
        }
    }

    lastScrollTop = st;
}

#main-header {
  height:120px;
  position:fixed;
  top:0;
  width:100%;
  transition: top 0.2s ease-in-out;
  background: red;
  z-index: 50000;
}
body {
  color: $grey-color;
  padding-top: 120px;
  }
.nav-up {
  top: -120px !important;
}
.nav-shadow {
    -moz-box-shadow: 5px 5px 5px rgba(0,0,0,0.3);
    -webkit-box-shadow: 5px 5px 5px rgba(0,0,0,0.3);
    box-shadow: 2px 2px 2px rgba(0,0,0,0.1);
}
#page-content {
  height: 200vh;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="nav-down" id="main-header">
  <p>header</p>
</div>
<div id="page-content"></div>

我还为滚动上的框阴影添加了一个类。但是，一旦页眉返回到页面的最顶部，我就需要删除框阴影类。有人知道如何实现吗？

Answer 1

将 if (scroll >= 500) 更改为 if ($(window).scrollTop() >= 500)。而且你不需要设置间隔只需调用你的函数 onscroll

// Hide Header on on scroll down
var didScroll;
var lastScrollTop = 0;
var delta = 5;
var navbarHeight = $('#main-header').outerHeight();

$(window).scroll(function(event){
    didScroll = true;
    if ($(window).scrollTop() >= 500) {
        $("#main-header").addClass("nav-shadow");
    } else {
        $("#main-header").removeClass("nav-shadow");
    }
     hasScrolled();
});
/*
setInterval(function() {
    if (didScroll) {
        hasScrolled();
        didScroll = false;
    }
}, 250);
*/
function hasScrolled() {
    var st = $(this).scrollTop();

    // Make scroll more than delta
    if(Math.abs(lastScrollTop - st) <= delta)
        return;

    // If scrolled down and past the navbar, add class .nav-up.
    if (st > lastScrollTop && st > navbarHeight){
        // Scroll Down
        $('#main-header').removeClass('nav-down').addClass('nav-up');
          $('#main-header').removeClass('nav-shadow');
    } else {
        // Scroll Up
        if(st + $(window).height() < $(document).height()) {
            $('#main-header').removeClass('nav-up').addClass('nav-down');
              $('#main-header').addClass('nav-shadow');
        }
    }

    lastScrollTop = st;
}

#main-header {
  height:120px;
  position:fixed;
  top:0;
  width:100%;
  transition: top 0.2s ease-in-out;
  background: red;
  z-index: 50000;
}
body {
  color: $grey-color;
  padding-top: 120px;
  }
.nav-up {
  top: -120px !important;
}
.nav-shadow {
    -moz-box-shadow: 5px 5px 5px rgba(0,0,0,0.3);
    -webkit-box-shadow: 5px 5px 5px rgba(0,0,0,0.3);
    box-shadow: 2px 2px 2px rgba(0,0,0,0.1);
}
#page-content {
  height: 200vh;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="nav-down" id="main-header">
  <p>header</p>
</div>
<div id="page-content"></div>