用css滚动时，将导航条粘到顶部
我试图让我的导航栏与页面一起移动，但如果用户向下滚动，则坚持顶部。 任何人都可以提供任何例子或如何？ 非常感激。 （我用任何其他语言都毫无希望）。 我尝试使用CSS粘，但它没有工作。
<div class="headercss"> <div class="headerlogo"></div> <div class="nav"> <ul> <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> /* www..com Blinx Service Created by Pierre Chedraoui (c) Copyright 2015 */ /* BODY */ body { margin: 0px; background-color: #000000; height: 2000px; } /* 1. HEADER */ .headercss { width: auto; height: 320px; background-color: #000000; position: relative; } .headerlogo { width: auto; height: 250px; background-color: #272727; position: relative; } .nav { width: auto; height: 70px; background-color: #272727; 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; font-size: 12px; color: #FFFFFF; border-right: 1px solid #000000; border-top: 1px solid #000000; background-color: #272727; text-align: center; text-decoration: none; font-family: 'Raleway', Arial; letter-spacing: 2pt; line-height: 200%; overflow: hidden; } a:hover, a:active { background-color: #242424; }
$(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>
添加到您的.nav css块
position: fixed
它会工作
我希望这可以帮助别人。 通过js确定导航偏移量，然后将粘性位置CSS应用于导航：
但首先，我们将在样式表中定义样式，就像这样。
.sticky { position: fixed; width: 100%; left: 0; top: 0; z-index: 100; border-top: 0; }
然后，我们将使用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(); }); });
CSS：
.headercss { width: 100%; height: 320px; background-color: #000000; position: fixed; }
属性position: fixed将保持卡住，而其他内容将滚动。 不要忘记设置width:100% ，使其完全填充到右侧。
例
给headercss的位置固定。
.headercss { width: 100%; height: 320px; background-color: #000000; position: fixed; top:0 }
然后给内容容器一个320px的填充顶部，所以它不会在标题后面。
你只能通过创build菜单两次来完成。 这不是理想的，但它给了你一个菜单上的菜单不同的devise的机会，你将没有别的比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>
然后有以下的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; }
这里是你看到的小提琴： https ： //jsfiddle.net/brghtk4z/1/
只需使用z-index CSS属性，如最高的喜欢回答中所述，导航栏将保持顶部。
例如 ：
<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 */ }
/* 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'); } }); });
我会build议使用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>
您需要将Bootstrap包含到您的项目中，其中将包含必要的脚本和样式。 然后调用类“navbar-fixed-top”。 这将做的伎俩。 看上面的例子
只需调用此代码，并将其称为您的中间酒吧粘滞的导航栏
.sticky { /*css for stickey navbar*/ position: sticky; top: 0; z-index: 100; }
为了使标题粘滞，首先你必须给位置：fixed; 在CSS中的标题。 那么你可以调整宽度和高度等。我强烈build议遵循这篇文章。 如何创build粘性网站标题
这里也是代码，以解决头部问题，使其变得粘稠。
header { position: fixed; right: 0; left: 0; z-index: 999; }
上面的代码将进入您的styles.css文件中。
选中此项可使当前的Blogger导航栏或菜单栏变为粘滞状态，在向下滚动时将隐藏，并在向上滚动时出现。
