如果位置固定，則更改背景顏色

Question

我有這個簡單的導航功能，可以在向下滾動時隱藏固定的標題。 當您向上滾動時，它將重新出現以便於導航。 效果很好！ 但是，我需要對其進行一些更改，並且不確定如何完成此操作。

當位置固定在頁面的絕對頂部時，我需要頁眉透明。 然后將位置向下滾動，然后向上滾動一點。 我需要背景為藍色，直到達到絕對頂部，然后再次更改為透明。

http://codepen.io/anon/pen/VYPGyg

這是有問題的jQuery：

var didScroll;
            var lastScrollTop = 0;
            var delta = 5;
            var navbarHeight = $('header').outerHeight();

        $(window).scroll(function(event){
            didScroll = true;
        });

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

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

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

            // If they scrolled down and are past the navbar, add class .nav-up.
            // This is necessary so you never see what is "behind" the navbar.
            if (st > lastScrollTop && st > navbarHeight){
                // Scroll Down
                $('header').removeClass('nav-down').addClass('nav-up');
            } else {
                // Scroll Up
                if(st + $(window).height() < $(document).height()) {
                    $('header').removeClass('nav-up').addClass('nav-down');
                }
            }

            lastScrollTop = st;
        }

任何幫助將是巨大的！

Answer 1

我將使用您的nav-down和nav-up類，因為無論如何它們都會被添加。 使用CSS處理樣式時，（通常）可以更好地將關注點分離到軟件的各個方面。 CSS通常應處理表示形式，除非功能有限或編程不足（輸入javascript）。

例如，上您的.nav-down類並調整透明度：

更新的代碼筆：

http://codepen.io/anon/pen/YPNOLM

為您的函數添加了一些邏輯：

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

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

            // If they scrolled down and are past the navbar, add class .nav-up.
            // This is necessary so you never see what is "behind" the navbar.
            if (st > lastScrollTop && st > navbarHeight){
                // Scroll Down
                $('header').removeClass('nav-down').addClass('nav-up');
            } else {
                // Scroll Up
                if(st + $(window).height() < $(document).height()) {
                    $('header').removeClass('nav-up').addClass('nav-down');
                }
              // the 100 can be whatever height you think it should be at
                if($(window).scrollTop() > 100) {
                  $('header').addClass('notTop')
                } else {
                 $('header').removeClass('notTop')                     
                }
            }

            lastScrollTop = st;
        }

還有一個不透明度屬性：

header.nav-down {
  position: fixed;
  width: 100%;
  top: 0;
  transition: top 0.2s ease-in-out;
  z-index: 1;
  background: #fff;
  padding: 25px 0px 0px 0px;
  opacity: 0.8
}

和：

header.nav-down.notTop {
  background-color: blue
}