Changing navigation background color when scrolling to top JQUERY

Question

I'm fairly new to JQuery and I am trying to build a navigation that hides when scrolling down and reappears with a black background when scrolling up.

I have achieved this so far, but now I want the background color of my navigation to change from black back to transparent when scrolling back to the very top of the page.

Here is my progress - http://dwaynecrawford.com/testblog/

I want to achieve an effect identical to this navigation - http://www.undsgn.com/uncode/when-you-are-alone/

Here is my code:

/*      Hide Navbar */
// Hide Header on on scroll down
var didScroll;
var lastScrollTop = 1;
var delta = 5;
var navbarHeight = $('nav').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
    $('nav').removeClass('nav-down').addClass('nav-up');
  } else {
    // Scroll Up
    if (st + $(window).height() < $(document).height()) {
      $('nav').removeClass('nav-up').addClass('nav-down, nav-blk');
    }
  }

  lastScrollTop = st;
}

body{
  background-color: #ababab;
}
nav {
  width: 100%;
  margin: 0 auto;
  /*text-align: center;
    display: inline;*/
  display: table;
  vertical-align: middle;
  text-align: center;
  position: fixed;
  height: auto;
  opacity: 1.8;
  word-spacing: 20px;
  /*border-bottom: #5c5c5c solid 1px;*/
  height: 5vh;
}
nav a {
  text-decoration: none;
  color: #fff;
}
nav a:hover {
  color: #9f9f9f;
  font-weight: 700;
}
nav a:visited {
  color: #fff;
}
.nav {
  position: fixed;
  top: 0px;
  color: #fff;
  padding-top: 15px;
  padding-bottom: 0px;
  text-transform: uppercase;
  font-size: .75em;
  transition: top 0.2s ease-in-out;
  z-index: 1;
}
.nav-up {
  top: -10vh;
}
.nav-blk {
  background-color: #000;
  opacity: .7;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="nav hideme nav-down">

  <article class="navlogo">Navigation</article>
  <article class="navigation">
    <ul>
      <li><a href="#head">Home</a>
      </li>
      <li><a href="#about">About</a>
      </li>
      <li><a href="#work">Work</a>
      </li>
      <li><a href="#team">Blog</a>
      </li>
      <li><a href="#contact">Contact</a>
      </li>
    </ul>

  </article>

</nav>

score 0 · Answer 1 · answered Dec 10 '15 at 16:08

0

Try this:

$(document).ready(function () {
  $(window).scroll(function () {

  if($(window).scrollTop() > 1) {
    // your code
  }

 });
});

answered Dec 10 '15 at 16:08

Raza Ali Poonja

1,086
8
16

score 0 · Answer 2 · answered Dec 10 '15 at 16:08

You're thinking it the wrong way. scroll event is fired each time you actually scroll. There is no point to add a function that runs every 250ms (i.e. no need of setInterval) to check if you scrolled.

Just replace your whole js by:

$(window).scroll(function() {
    var currentScroll = $(document).scrollTop(); // the current scrollTop position
    var navbarHeight = $('nav').outerHeight();

    if (currentScroll > navbarHeight) {
        $('nav').removeClass('nav-down').addClass('nav-up');
    } else {
        $('nav').removeClass('nav-up').addClass('nav-down nav-blk');
    }
});

More info about scrollTop(): check the doc

score -1 · Answer 3 · answered Dec 10 '15 at 16:25

-1

Edit to your js: add class nav-top when $(window).scrollTop() == 0, else remove the class.

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


  if(st == 0){
     $('nav:not(:nav-top)').addClass("nav-top");
  }
  else{
     $('nav').removeClass("nav-top");
  }

  // 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
    $('nav').removeClass('nav-down').addClass('nav-up');
  } else {
    // Scroll Up
    if (st + $(window).height() < $(document).height()) {
      $('nav').removeClass('nav-up').addClass('nav-down, nav-blk');
    }
  }

  lastScrollTop = st;
}

Then add the class to your css (make sure it is declared after nav-blk):

.nav-top{
  background-color: transparent;
  opacity: 1;
}

answered Dec 10 '15 at 16:25

AVAVT

7,058
2
21
44

Keep running a function in background to check if you scrolled when you already listen to the `scroll` event is definitly not a good practice. – pistou Dec 10 '15 at 16:30
Well, it actually *is* a good practice. http://benalman.com/code/projects/jquery-throttle-debounce/examples/throttle/ please see for yourself at the lower part about scroll events. – AVAVT Dec 10 '15 at 16:59
It counts the number of executed times when you actually scroll. But it doesn't count when you *idle* on page. On *idle* `.scroll()` won't be fired since the callback function from `setInterval` will be fired every 250ms, no matter what. – pistou Dec 10 '15 at 17:08
While his solution is not the best, it's a good attempt to mitigate the massive lag on IE and several mobile browsers because of 1ms event firing. Even this rather rough version is massively better than accessing DOM every single time the browser fire a scroll event. – AVAVT Dec 10 '15 at 17:13
Well then OP should check [this solution](http://stackoverflow.com/questions/9144560/jquery-scroll-detect-when-user-stops-scrolling). Nevertheless, OP should get rid of `didScroll` way of thinking, since we *already know when* we scrolled (from that `scroll` event). – pistou Dec 10 '15 at 17:16
Look, this is a place for question and answer, not to show off knowledge. Your "answer" clearly shows that you don't even care what the OP's asking. You're just commenting on a part that you think not optimized. Your latest comment show you didn't even spend the time to read the merit of event throtting. If you don't plan to help just get out and let people do actual productive work in peace. – AVAVT Dec 10 '15 at 17:50

Changing navigation background color when scrolling to top JQUERY

3 Answers3