制作导航条

Question

'''测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试'''

<div class="header">
    <div class="header"></div>
    <div class="nav">
    </div>
</div>

body {
    margin: 0px;
}

Answer 1

$(document).ready(function() {
  
  $(window).scroll(function () {
      //if you hard code, then use console
      //.log to determine when you want the 
      //nav bar to stick.  
      console.log($(window).scrollTop())
    if ($(window).scrollTop() > 280) {
      $('#nav_bar').addClass('navbar-fixed');
    }
    if ($(window).scrollTop() < 281) {
      $('#nav_bar').removeClass('navbar-fixed');
    }
  });
});

html, body {
	height: 4000px;
}

.navbar-fixed {
    top: 0;
    z-index: 100;
  position: fixed;
    width: 100%;
}

#body_div {
	top: 0;
	position: relative;
    height: 200px;
    background-color: green;
}

#banner {
	width: 100%;
	height: 273px;
    background-color: gray;
	overflow: hidden;
}

#nav_bar {
	border: 0;
	background-color: #202020;
	border-radius: 0px;
	margin-bottom: 0;
    height: 30px;
}

.nav_links {
    margin: 0;
}

.nav_links li {
	display: inline-block;
    margin-top: 4px;
}
.nav_links li a {
	padding: 0 15.5px;
	color: #3498db;
	text-decoration: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="banner">
     <h2>put what you want here</h2>
     <p>just adjust javascript size to match this window</p>
  </div>

  <nav id='nav_bar'>
    <ul class='nav_links'>
      <li><a href="url">Nav Bar</a></li>
      <li><a href="url">Sign In</a></li>
      <li><a href="url">Blog</a></li>
      <li><a href="url">About</a></li>
    </ul>
  </nav>
<div id='body_div'>
    <p style='margin: 0; padding-top: 50px;'>and more stuff to continue scrolling here</p>
</div>

Answer 2

要使页眉变粘，首先必须指定位置：固定；在CSS头。然后，您可以调整宽度和高度等。我强烈建议您遵循本文。 How to create a sticky website header

Answer 3

只需调用此代码，然后将其调用到您的中殿酒吧即可获得导航栏

Answer 4

添加到您的.nav css块中

Answer 5

我希望这可以帮助某人。通过js确定导航偏移，然后将粘性位置css应用于导航：

Answer 6

只需使用z-index CSS属性，如喜欢的最高答案中所述，导航栏将停留在顶部。

Answer 7

CSS：

Answer 8

给headerscss位置固定。

Answer 9

您只能通过创建菜单两次来使用CSS来实现。这不是理想的选择，但是一旦您将菜单置于最顶层，就可以为菜单提供不同的设计，并且除了CSS之外，您将一无所有。这是DIV的示例（当然，您可以根据需要将其更改为NAV）：

Answer 10

/* Add css in your style */


.sticky-header {
    position: fixed;
    width: 100%;
    left: 0;
    top: 0;
    z-index: 100;
    border-top: 0;
    transition: 0.3s;
}


/* and use this javascript code: */

$(document).ready(function() {

  $(window).scroll(function () {
    if ($(window).scrollTop() > ) {
      $('.headercss').addClass('sticky-header');
    } else{
      $('.headercss').removeClass('sticky-header');
    }
  });
});

Answer 11

我建议使用Bootstrap。 http://getbootstrap.com/。这种方法非常简单，重量轻。