Html 制作一个导航栏棒
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28452235/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Make a nav bar stick
提问by Yash Thakur
Make a nav bar stick Make a nav bar stick Make a nav bar stick Make a nav bar stick Make a nav bar stick Make a nav bar stick Make a nav bar stick Make a nav bar stick Make a nav bar stick Make a nav bar stick Make a nav bar stick Make a nav bar stick
制作导航栏杆 制作导航栏杆 制作导航栏杆 制作导航栏杆 制作导航栏杆 制作导航栏杆 制作导航栏杆 制作导航栏杆 制作导航栏杆 制作导航栏杆制作导航栏棒 制作导航栏棒
/* HEADER */
/* 标题 */
<div class="headercss">
<div class="headerlogo">
</div>
</div>
/* BODY */
body {
margin: 0px;
height: 2000px;
}
.headercss {
width: auto;
height: 320px;
position: relative;
}
.headerlogo {
width: auto;
height: 250px;
position: relative;
}
.nav {
width: auto;
height: 70px;
position: relative;
overflow: hidden;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
float:left;
width:100%;
overflow: hidden;
}
li {
float: left;
width:25%;
min-width: 243px;
overflow: hidden;
}
a:link, a:visited {
display: block;
height: 68px;
min-width: 243px;
overflow: hidden;
}
a:hover, a:active {
}
回答by Yash Thakur
$(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>回答by TheLovelySausage
add to your .nav css block the
添加到您的 .nav css 块
position: fixed
and it will work
它会起作用
回答by Amar Pratap
I hope this can help someone. Determine the nav offset through js and then apply sticky position css to nav:
我希望这可以帮助某人。通过js确定nav offset，然后将sticky position css应用到nav：
But first, we will define the styles in the stylesheet, like so.
但首先，我们将在样式表中定义样式，就像这样。
.sticky {
position: fixed;
width: 100%;
left: 0;
top: 0;
z-index: 100;
border-top: 0;
}
Then, we will apply that class to the navigation conditionally with jQuery.
然后，我们将使用 jQuery 有条件地将该类应用于导航。
$(document).ready(function() {
var stickyNavTop = $('.nav').offset().top;
var stickyNav = function(){
var scrollTop = $(window).scrollTop();
if (scrollTop > stickyNavTop) {
$('.nav').addClass('sticky');
} else {
$('.nav').removeClass('sticky');
}
};
stickyNav();
$(window).scroll(function() {
stickyNav();
});
});
回答by Amar Pratap
Just use z-indexCSS property as described in the highest liked answer and the nav bar will stick to the top.
只需z-index按照最喜欢的答案中的描述使用CSS 属性，导航栏就会固定在顶部。
Example:
示例：
<div class="navigation">
<nav>
<ul>
<li>Home</li>
<li>Contact</li>
</ul>
</nav>
.navigation {
/* fixed keyword is fine too */
position: sticky;
top: 0;
z-index: 100;
/* z-index works pretty much like a layer:
the higher the z-index value, the greater
it will allow the navigation tag to stay on top
of other tags */
}
回答by Ilia Rostovtsev
CSS:
CSS：
.headercss {
width: 100%;
height: 320px;
background-color: #000000;
position: fixed;
}
Attribute position: fixedwill keep it stuck, while other content will be scrollable. Don't forget to set width:100%to make it fill fully to the right.
属性position: fixed将使其卡住，而其他内容将是可滚动的。不要忘记设置width:100%使其完全填充到右侧。
回答by Psygnosis
Give headercss position fixed.
给 headercss 位置固定。
.headercss {
width: 100%;
height: 320px;
background-color: #000000;
position: fixed;
top:0
}
Then give the content container a 320px padding-top, so it doesn't get behind the header.
然后给内容容器一个 320px 的 padding-top，这样它就不会落在标题后面。
回答by Ange Loron
You can do it with CSS only by creating your menu twice. It's not ideal but it gives you the opportunity have a different design for the menu once it's on top and you'll have nothing else than CSS, no jquery. Here is an example with DIV (you can of course change it to NAV if you prefer):
您只能通过创建两次菜单来使用 CSS 来实现。这并不理想，但它让您有机会在菜单位于顶部时对其进行不同的设计，并且除了 CSS 和 jquery 之外别无他物。这是 DIV 的示例（如果您愿意，当然可以将其更改为 NAV）：
<div id="hiddenmenu">
THIS IS MY HIDDEN MENU
</div>
<div id="header">
Here is my header with a lot of text and my main menu
</div>
<div id="body">
MY BODY
</div>
And then have the following CSS:
然后有以下CSS：
#hiddenmenu {
position: fixed;
top: 0;
z-index:1;
}
#header {
top: 0;
position:absolute;
z-index:2;
}
#body {
padding-top: 80px;
position:absolute;
z-index: auto;
}
Here is a fiddle for you to see: https://jsfiddle.net/brghtk4z/1/
这是一个给你看的小提琴：https: //jsfiddle.net/brghtk4z/1/
回答by Sanjay Jadon
/* 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');
}
});
});
回答by Swinkaran
I would recommend to use Bootstrap. http://getbootstrap.com/. This approach is very straight-forward and light weight.
我建议使用 Bootstrap。http://getbootstrap.com/。这种方法非常直接且重量轻。
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-fixed-top">
<li><a href="#home"> <br>BLINK</a></li>
<li><a href="#news"><br>ADVERTISING WITH BLINK</a></li>
<li><a href="#contact"><br>EDUCATING WITH BLINK</a></li>
<li><a href="#about"><br>ABOUT US</a></li>
</ul>
</div>
</div>
</div>
You need to include the Bootstrap into your project, which will include the necessary scripts and styles. Then just call the class 'navbar-fixed-top'. This will do the trick. See above example
您需要将 Bootstrap 包含到您的项目中，这将包含必要的脚本和样式。然后只需调用类'navbar-fixed-top'。这将解决问题。见上面的例子
回答by Zahid Iqbal
To make header sticky, first you have to give position: fixed; for header in css. Then you can adjust width and height etc. I would highly recommand to follow this article. How to create a sticky website header
要使标题具有粘性，首先您必须给出 position: fixed; 用于 css 中的标题。然后你可以调整宽度和高度等。我强烈建议你关注这篇文章。如何创建粘性网站标题
Here is code as well to work around on header to make it sticky.
这里还有代码可以解决标题以使其具有粘性。
header {
position: fixed;
right: 0;
left: 0;
z-index: 999;
}
This code above will go inside your styles.css file.
上面的这段代码将放在你的styles.css 文件中。
