Question

我想知道你是否可以在这里帮助我！我在JS和CSS中使用粘性标头。我想要的是，当标题位于页面顶部时，它应该是灰色的 - ＆gt;在向下滚动它只是disapier - ＆gt;它再次出现在向上滚动但黑色 - ＆gt;当它到达页面顶部时，它再次变成灰色...我无法通过自己制作它所以我在这里要求一点帮助...这是整个代码：到目前为止，我可以做到头顶灰色 - ＆gt;向下滚动 - 显示＆gt;再次出现在黑色上向上滚动 - ＆gt;但是当滚动到达页面顶部时，可能会使其变为灰色。

// Hide Header on on scroll down
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;
   }
}, 20);

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 < $(document).height()) {
        $('header').removeClass('nav-up').addClass('nav-down-b');
    }
}

if (st > lastScrollTop){
    // Scroll Down
    $('header').removeClass('nav-down-b').addClass('nav-up');
}

lastScrollTop = st;
}

它适用于4个css类：

    header {
position: fixed;
top: 0;
transition: top 0.2s ease-in-out;
width: 100%;
height: 55px;
background-color: #eee;
z-index: 3;
margin-bottom: 42px;
}

.nav-up {
top: -55px;
}
.nav-down {
top:0px; background-color: #eee;
}
.nav-down-b {
top:0px; background-color: #1c1a1b;
}

HTML：

    <header class="nav-down clearfix"> 

  <div class="container">
      <div class="pull-left logo-neg"><img src="/images/PW-emblem-neg.png"></div>
    <ul id="user-menu" class="pull-right">
      <li><a href="/customer-service"><img src="/images/Icon_Nav_Magnify.svg" alt="glass"></a></li>
      <li><a href="/customer-service"><img src="/images/Icon_Nav_Cart.svg" alt="cart"> </a></li>
      <li><a href="/customer-service"><img src="/images/Icon_Nav_Info.svg" alt="info"> </a></li>
      <li><a href="/customer-service"><img src="/images/Icon_Nav_Heart.svg" alt="favorits"> </a></li>
    </ul>
  </div>
</header>

先谢谢大家!!

Answer 1

尝试此代码可能对您有所帮助

＆＃13;

    $(function () {

    // grab the initial top offset of the navigation
    var sticky_navigation_offset_top = $('#sticky_navigation').offset().top;

    // our function that decides weather the navigation bar should have "fixed" css position or not.
    var sticky_navigation = function () {
        var scroll_top = $(window).scrollTop(); // our current vertical position from the top

        // if we've scrolled more than the navigation, change its position to fixed to stick to top, otherwise change it back to relative
        if (scroll_top > sticky_navigation_offset_top) {
            $('#sticky_navigation').css({ 'position': 'fixed', 'top': 0, 'left': 0, 'z-index': 10000000, 'background': 'black', 'color':'white', 'width':'100%' });
        } 
      
      
      else {
            $('#sticky_navigation').css({ 'position': 'relative', 'background':'gray', 'width':'100%' });
        }
    };

    // run our function on load
    sticky_navigation();

    // and run it again every time you scroll
    $(window).scroll(function () {
        sticky_navigation();
    });

    // NOT required:
    // for this demo disable all links that point to "#"
    $('a[href="#"]').click(function (event) {
        event.preventDefault();
    });

    });

＆＃13;

#demo_top_wrapper
{
  height:600px;
  }
#sticky_navigation
{
  background:gray;
  height:80px;
  }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="demo_top_wrapper">
        <div id="sticky_navigation_wrapper">
            <div id="sticky_navigation">
              this is sticky header
              </div>
          </div>
    </div>

＆＃13;

Answer 2

对于需要像我想要的效果的每个人，id修复它...这是javascript代码正常工作：

// Hide Header on on scroll down
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;
}
}, 20);

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 < $(document).height()) {
        $('header').removeClass('nav-up').addClass('nav-down-b');
    }
}

if (st < delta){
    // Scroll Down
    $('header').removeClass('nav-down-b').addClass('nav-down');
}


lastScrollTop = st;
}

使用上面写的html和css。 :)希望你发现它有用！

顶部粘贴头改变颜色

2 个答案: