如何使固定的导航栏顶部像w3school
[英]How to make fixed navbar top like w3school
问题描述
i want to make top fixed navbar like w3school.com? 
我想制作像w3school.com这样的顶级固定导航栏吗？ when i scroll down, the top navbar will fixed and the logo are not. 当我向下滚动时，顶部导航栏将固定，徽标未固定。 how to do that with using bootstrap css framewok? 使用Bootstrap CSS FrameWok怎么做？ is that only can use with w3.css ? 那只能与w3.css一起使用吗？ i doubt about it. 我对此表示怀疑。 thank you! 谢谢！
#logo { text-align: center;}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> <body> <div id="logo"> <img src="http://lorempicsum.com/futurama/350/200/1"/> </div> <div id="nav"> <ul class="nav nav-tabs navbar-fixed-top"> <li><a href="...">Fixed</a></li> <li><a href="...">Fixed</a></li> <li><a href="...">Fixed</a></li> <li><a href="...">Fixed</a></li> <li><a href="...">Fixed</a></li> <li><a href="...">Fixed</a></li> </ul> </div> <p> i want the navbar fixed like w3school.com when it the scroll down until reach the image the navbar will fixed. sorry for bad english. visit w3school to see the navbar fixed top </p>
2 个解决方案
解决方案1
1 2016-04-09 03:04:28
Right, so you can't do this with just CSS, you'll want to use a sticky library of some kind. 正确，因此您不能仅使用CSS来执行此操作，而是要使用某种粘性库。 I'm using in this example sticky-kit . 在此示例中，我使用了sticky-kit 。
$("#nav").stick_in_parent();
#logo { text-align: center;}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script src="//cdn.jsdelivr.net/jquery.sticky-kit/1.1.2/jquery.sticky-kit.min.js"></script> <body> <div id="logo"> <img src="http://lorempicsum.com/futurama/350/200/1"/> </div> <div id="nav"> <ul class="nav nav-tabs"> <li><a href="...">Fixed</a></li> <li><a href="...">Fixed</a></li> <li><a href="...">Fixed</a></li> <li><a href="...">Fixed</a></li> <li><a href="...">Fixed</a></li> <li><a href="...">Fixed</a></li> </ul> </div> <p> i want the navbar fixed like w3school.com when it the scroll down until reach the image the navbar will fixed. sorry for bad english. visit w3school to see the navbar fixed top Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec non arcu sed nisl vehicula gravida. Donec arcu ante, consectetur ut neque et, finibus dignissim magna. Nam vitae felis porta, scelerisque diam ac, tristique felis. Ut id lectus diam. Fusce vel felis eu arcu porta imperdiet. Suspendisse justo velit, ultricies ut ultrices vel, mollis et elit. Maecenas at pharetra arcu, sed vestibulum urna. Donec a consectetur elit. Ut nisl nisi, blandit sed tellus ac, vulputate posuere ex. Integer rutrum massa vel tincidunt lobortis. Donec eget rhoncus nisi. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vivamus sed turpis hendrerit, maximus metus eleifend, sollicitudin enim. Donec ac congue ante. Praesent mi risus, auctor ac imperdiet non, iaculis id risus. Ut viverra et velit eget luctus. Mauris eu aliquam nisl. Nullam auctor augue id justo volutpat, nec consectetur neque volutpat. Integer et urna tellus. Donec a fringilla erat. Nam ex urna, consequat ut sodales ut, congue in sem. Maecenas et tortor risus. Suspendisse maximus felis mauris. Duis porttitor mi eu finibus eleifend. Mauris ac pulvinar leo. Phasellus hendrerit faucibus sagittis. Donec rhoncus mattis lacinia. Nullam pulvinar urna at leo aliquam lacinia. Phasellus fringilla, augue eget posuere elementum, enim purus lacinia erat, eget gravida lectus ex sed dolor. Maecenas non neque eu nisi fringilla ornare. Fusce odio neque, volutpat in felis sed, consequat mattis leo. Praesent et mauris euismod, fringilla ipsum in, dignissim nisl. Duis quis lacus at nulla semper semper. Cras massa mauris, mattis ac lorem ac, tempor eleifend est. Donec gravida tincidunt tristique. Nam semper id odio id viverra. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam eu sagittis arcu, ut pretium elit. Pellentesque id elit eu ex rutrum cursus vitae et metus. Sed enim leo, mollis non malesuada quis, imperdiet sed mi. Vestibulum pretium, augue a hendrerit hendrerit, quam est accumsan leo, at accumsan nulla diam sed justo. Pellentesque ut lacus gravida, scelerisque massa vel, venenatis sapien. Integer id justo a augue rutrum pellentesque ac efficitur ex. Cras interdum enim quis libero tempor faucibus. Vivamus eu diam eu sapien ultricies vestibulum. Ut consequat felis at ligula dictum rutrum. Sed eget ullamcorper leo, vitae sodales justo. Pellentesque nec tellus felis. Aenean augue sem, tristique consequat magna a, efficitur ultrices ligula.</p>
解决方案2
1 已采纳 2016-04-09 06:01:03
This is what u want: 这就是你想要的：
<!DOCTYPE html> <html> <head> <script src="https://code.jquery.com/jquery.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" /> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>Navbar like w3schools</title> <script> jQuery(document).ready(function($) { // Fixa navbar ao ultrapassa-lo var navbar = $('#navbar-main'), distance = navbar.offset().top, $window = $(window); $window.scroll(function() { if ($window.scrollTop() >= distance) { navbar.removeClass('navbar-fixed-top').addClass('navbar-fixed-top'); $("body").css("padding-top", "70px"); } else { navbar.removeClass('navbar-fixed-top'); $("body").css("padding-top", "0px"); } }); }); </script> <style> @media screen and (max-width: 768px){ .man{ display:none; } } body { overflow-x: hidden;} </style> </head> <body> <div class="row"> <div style="font-weight:bold;font-size:35px;font-family:cursive;padding:5px;left:15px" class="col-xs-12 col-sm-offset-1 col-sm-4">w3schools<span style="color:green">.com</span></div> <div style="font-weight:lighter;font-size:25px;padding:5px;top:12px" class="man col-xs-12 col-sm-offset-1 col-sm-6">The world's largest web developer site</div> </div> <nav id="navbar-main" class="navbar navbar-inverse"> <div class="container-fluid"> <!-- Brand and toggle get grouped for better mobile display--> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Brand</a> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li> <li><a href="#">Link</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li role="separator" class="divider"></li> <li><a href="#">Separated link</a></li> <li role="separator" class="divider"></li> <li><a href="#">One more separated link</a></li> </ul> </li> </ul> <form class="navbar-form navbar-left" role="search"> <div class="form-group"> <input type="text" class="form-control" placeholder="Search"> </div> <button type="submit" class="btn btn-default">Submit</button> </form> <ul class="nav navbar-nav navbar-right"> <li><a href="#">Link</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li role="separator" class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </li> </ul> </div><!-- /.navbar-collapse --> </div><!-- /.container-fluid --> </nav> <main class="container"> <p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id voluptatum sequi sunt asperiores eius, qui saepe tempore aliquam debitis distinctio officia optio unde perferendis fugiat sint quia consequuntur, placeat sed!</p> <p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id voluptatum sequi sunt asperiores eius, qui saepe tempore aliquam debitis distinctio officia optio unde perferendis fugiat sint quia consequuntur, placeat sed!</p> <p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id voluptatum sequi sunt asperiores eius, qui saepe tempore aliquam debitis distinctio officia optio unde perferendis fugiat sint quia consequuntur, placeat sed!</p> <p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id voluptatum sequi sunt asperiores eius, qui saepe tempore aliquam debitis distinctio officia optio unde perferendis fugiat sint quia consequuntur, placeat sed!</p> <p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id voluptatum sequi sunt asperiores eius, qui saepe tempore aliquam debitis distinctio officia optio unde perferendis fugiat sint quia consequuntur, placeat sed!</p> <p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id voluptatum sequi sunt asperiores eius, qui saepe tempore aliquam debitis distinctio officia optio unde perferendis fugiat sint quia consequuntur, placeat sed!</p> <p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id voluptatum sequi sunt asperiores eius, qui saepe tempore aliquam debitis distinctio officia optio unde perferendis fugiat sint quia consequuntur, placeat sed!</p> <p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id voluptatum sequi sunt asperiores eius, qui saepe tempore aliquam debitis distinctio officia optio unde perferendis fugiat sint quia consequuntur, placeat sed!</p> <p class="lead">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id voluptatum sequi sunt asperiores eius, qui saepe tempore aliquam debitis distinctio officia optio unde perferendis fugiat sint quia consequuntur, placeat sed!</p> </main> </body> </html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
如何自动播放w3school javascript报价幻灯片？ - How to autoplay w3school javascript Quotes Slideshow?
如何在 W3school 的手风琴教程中添加填充？ - How to add padding to W3school's accordion tutorial?
如何将导航栏固定在顶部 - how to make the navbar fixed to top
w3school包括HTML，JavaScript无法正常工作 - w3school include HTML, javascript not working
从w3school编辑滑块 - Editing a Slider from w3school
如何使nav-fixed-top下推内容，如非固定导航栏？ - How to make nav-fixed-top push down content like non-fixed navbar?
你如何使用钩子将 w3school 幻灯片包含到 reactJS 组件中？ - how do you include w3school slideshow into reactJS component using hooks?
如何从Chrome开发者控制台访问w3school页面上的元素？ - How to access elements on w3school pages from Chrome developer console?
来自w3school的幻灯片的Swiperight和swipeleft手势 - Swiperight and swipeleft gestures for slideshow from w3school
无法使用w3school HTML包含 - Can't use w3school HTML include
相关标签