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
  }

 });
});

Answer 2

你认为这是错误的方式。每次实际滚动时都会触发scroll事件。没有必要添加一个每250毫秒运行一次的函数（即不需要setInterval）来检查你是否滚动。

只需用以下内容替换你的整个js：

$(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');
    }
});

有关scrollTop()的更多信息：check the doc

Answer 3

编辑你的js：nav-top时添加课程$(window).scrollTop() == 0，否则删除课程。

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

然后将类添加到您的css（确保它在nav-blk之后声明）：

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

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

3 个答案: