Change background color if position fixed

Question

I have this simple navigation that was built to hide a fixed header when scrolling down. When you scroll up it will reappear for easy navigation. It works great! However, I need it changed up a bit and not sure how to accomplish this.

When the position is fixed at the absolute top of the page I need the header to be transparent. When the position is then scrolled down and then scrolled up a little. I need the background to be blue until it reaches the absolute top then again change to transparent.

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

here is the jQuery in question:

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;
        }

Any help would be great!

Answer 1

I would use your nav-down and nav-up classes, since they're getting added anyways. When you use CSS to handle styling, you're (usually) better separating concerns amongst various aspects of your software. CSS should usually handle presentation, except where it's functionality is limited or not programmatic enough (enter javascript).

For example, take your .nav-down class and adjust the transparency:

Updated codepen:

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

Added some logic to your function:

 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;
        }

And an opacity property:

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
}

And:

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