javascript - 滚动到顶部时更改导航背景颜色 JQUERY

Question

我是 JQuery 的新手，我正在尝试构建一个导航，该导航在向下滚动时隐藏，在向上滚动时以黑色背景重新出现。

到目前为止我已经做到了这一点，但现在我希望在滚动回页面顶部时导航的背景颜色从黑色变回透明。

这是我的进度 - http://dwaynecrawford.com/testblog/

我想实现与此导航相同的效果 - http://www.undsgn.com/uncode/when-you-are-alone/

这是我的代码:

/*      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>

Answer 1

试试这个:

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

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

 });
});