当用户滚动时使一个导航栏保持粘性答案

【问题标题】：making one navbar Sticky when user scrolls当用户滚动时使一个导航栏保持粘性
【发布时间】：2016-10-17 09:52:09
【问题描述】：

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

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

我真正想做的是使导航栏类似于我最喜欢的游戏网站标题，这里是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>

【问题讨论】：

标签： html css navbar nav sticky

【解决方案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() 是用来获取窗口当前滚动位置的函数，在此基础上你可以改变CSS类。

【讨论】：

【解决方案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/

【讨论】：

【解决方案3】：

这里是代码。将标题 div 固定到顶部，滚动时顶部减去顶部菜单高度。

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/

【讨论】：

谢谢一帮兄弟，完美运行。但我还有一个问题。我试图让它类似于这个playoverwatch.com/en-us 标题，当你向下滚动页面时，你可以看到第二个导航栏扩展到 100%。我试图编辑 javascript 添加 'if (scroll >= 100) { $(".ipsLayout_container").css('max-width', '100%'); }' 它工作，但只有一次，所以当你向下滚动它工作，但当滚动回到顶部时，第二个导航栏仍然扩展到 100%，因为我是 JavaScript 的新手，我不知道如何使它工作。有什么想法吗？
我已经在 jsfiddle 更新了 - jsfiddle.net/dhananjaymane11/wvykLqxb/2 希望对你有帮助。
非常感谢您的帮助，完美运行：P

【解决方案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>

【讨论】：

感谢您的帮助:)