我想制作像 w3school.com 这样的顶级固定导航栏吗？当我向下滚动时，顶部导航栏将固定，而 Logo 则不会。如何使用 bootstrap css framewok 做到这一点？是只能与 w3.css 一起使用吗？我对此表示怀疑。谢谢!
#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>最佳答案
这就是你想要的:
<!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>关于javascript - 如何像w3school一样制作固定的导航栏顶部，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36511858/