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

Changing navigation background color when scrolling to top JQUERY

本文关键字：导航 背景 颜色 顶部 JQUERY 滚动      更新时间：2023-09-26

我是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>

试试这个：

$(document).ready(function () {
  $(window).scroll(function () {
  if($(window).scrollTop() > 1) {
    // your code
  }
 });
});

你的想法不对。每次实际滚动时都会触发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()的更多信息：检查文档

编辑到您的js：在$(window).scrollTop() == 0时添加类nav-top，否则删除该类。

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;
}
相关文章：