Question

我有这个简单的导航，用于在向下滚动时隐藏固定的标题。当您向上滚动时，它将重新出现以便于导航。它很棒！但是，我需要它改变一点，不知道如何实现这一点。

当位置固定在页面的绝对顶部时，我需要标题是透明的。然后向下滚动该位置然后向上滚动一点。我需要背景为蓝色，直到达到绝对顶部然后再次变为透明。

这是有问题的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类并调整透明度：

更新了codepen：

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
}

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

1 个答案: