当用户滚动时使一个导航栏变粘

Question

我有两个导航栏。假设用户导航栏位于顶部，主导航栏位于用户导航栏下方。

我想在用户滚动时有一个粘性主导航栏。

我真正想做的是使导航栏类似于我最喜欢的游戏网站 header，此处 https://playoverwatch.com/en-us/ 看到滚动时第一个导航栏如何很好地消失而第二个导航栏粘在顶部了吗？我真的很想拥有类似或完全像这样的东西。

#ipsLayout_header header {
    margin-bottom: 15px;
    background-color: rgba(2,25,72,.3);
}
.ipsLayout_container {
    max-width: 1340px;
    padding: 0 15px;
}
.ipsNavBar_primary {
    background: #304d66;
}

<div id="ipsLayout_header">
    <header>
        <div class="ipsLayout_container"><!-- my first navbar -->
            <ul id="elUserNav">
                <li id="cCreate">
    links
                </li>
            </ul>
        </div>
    </header>   
    <nav class="ipsLayout_container"><!-- my second navbar -->
        <div class="ipsNavBar_primary">
            <ul class="ipsResponsive_block">
                <li id="elNavSecondary_34">
                links
                </li> 
            </ul>
        </div>
    </nav>
</div>

Answer 1

试试这个...

$(document).ready(function(){
 $(window).scroll(function(){
   if ($(document).scrollTop()>$('nav').offset().top)
     $('nav').addClass('onTop');
    else 
     $('nav').removeClass('onTop');
  })
})

  #ipsLayout_header{
    width:100%;
    height:800px;
    background:#feacbe;
    padding:0px;
    margin:0px;
  }
  #ipsLayout_header header {
        margin-bottom: 15px;
        height: 44px;
        background-color: rgba(2,25,72,.3);
    }
    .ipsLayout_container {
        max-width: 1340px;
        padding: 0 15px;
    }
    .ipsNavBar_primary {
      width:100%;
      height:40px;
      background: #304d66;
    }
    .onTop{
      position:fixed;
      z-index:9999;
      width:92%;
      top:0;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div id="ipsLayout_header">

 <header>
  <div class="ipsLayout_container"><!-- my first navbar -->
         <ul id="elUserNav">
       <li id="cCreate">
    links
       </li>
         </ul>
     </div>
 </header>
 
 <nav class="ipsLayout_container"><!-- my second navbar -->
  <div class="ipsNavBar_primary">
   <ul class="ipsResponsive_block">
          <li id="elNavSecondary_34">
    links
          </li> 
   </ul>
  </div>
 </nav>

</div>

$(document).scrollTop() 是用来获取window当前滚动位置的函数，基于此可以改变CSS类。

Answer 2

<h2>First header</h2>
<header><h1>Sticky Header</h1></header>
<img src="large-image.jpg" width="782" height="2000" alt="Big Image" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script type="text/javascript">
    $(window).scroll(function() {
if ($(this).scrollTop() > 1){  
    $('header').addClass("sticky");
  }
  else{
    $('header').removeClass("sticky");
  }
});
</script>
<style type="text/css">

    header{
  width: 100%;
  text-align: center;
  font-size: 72px;
  line-height: 108px;
  height: 108px;
  background: #335C7D;
  color: #fff;
  font-family: 'PT Sans', sans-serif;
}

.sticky {
    position: fixed;
    top: 0;
}
</style>

https://jsfiddle.net/mv0h6r1t/

Answer 3

这是代码。使 header div 固定在顶部并在滚动时使顶部减去 upper-menu 高度。

css -

#ipsLayout_header{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  display: block;
  z-index: 10;
  background: #fff;
  -webkit-transition: .3s all 0s ease;
  -moz-transition: .3s all 0s ease;
  transition: .3s all 0s ease;
}

js-

$(window).scroll(function () {
  var scroll = $(window).scrollTop();
  var headerHeight = $('header').outerHeight();
  if (scroll >= 100) {
    $("#ipsLayout_header").css('top', -headerHeight);
  }
  else {
    $("#ipsLayout_header").css('top', '0');
  }
});

JSFiddle -https://jsfiddle.net/dhananjaymane11/wvykLqxb/1/

Answer 4

$(function() {
  var win = $(window);
  var header = $('#ipsLayout_header');
  var height = $('header').outerHeight(true);
  
  win.on('load scroll', function() {
    if(win.scrollTop() > height) {
      header.addClass('sticky');
      header.css({
        marginTop: -height
      });
    } else {
      header.removeClass('sticky');
      header.css({
        marginTop: 0
      });
    }
  });
});

body {
  margin: 0;
}

#ipsLayout_header {
  transition: margin 0.25s ease;
  overflow: hidden;
  position: fixed;
  z-index: 100;
  right: 0;
  left: 0;
  top: 0;
}
#ipsLayout_header header {
  background-color: rgba(2,25,72,.3);
  transform: translateY(0);
  margin-bottom: 15px;
}
.ipsLayout_container {
  position: relative;
  max-width: 1340px;
  padding: 0 15px;
}
.ipsNavBar_primary {
  background: #304d66;
}
.page-content {
  height: 1000px;
}
.ipsResponsive_block,
#elUserNav {margin: 0;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="ipsLayout_header">

  <header>
    <div class="ipsLayout_container"><!-- my first navbar -->
      <ul id="elUserNav">
        <li id="cCreate">
          links
        </li>
      </ul>
    </div>
  </header>

  <nav class="ipsLayout_container"><!-- my second navbar -->
    <div class="ipsNavBar_primary">
      <ul class="ipsResponsive_block">
        <li id="elNavSecondary_34">
          links
        </li> 
      </ul>
    </div>
  </nav>

</div>
<div class="page-content">
  
</div>

当用户滚动时使一个导航栏变粘

making one navbar Sticky when user scrolls

html

css

navbar

nav

sticky