Question

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

我想在用户滚动时使用粘性主导航栏。

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

这是代码。将标题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/

Answer 2

试试这个......

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

$（document）.scrollTop（）是用于获取窗口当前滚动位置的函数，基于您可以更改CSS类。

Answer 3

$(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>

Answer 4

<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/

当用户滚动

4 个答案: