如果位置固定，则更改背景颜色

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
}