如何在滚动时将Bootstrap导航菜单设置为停留在页面顶部
[英]How To Set Bootstrap Navigation Menu To Stays At Top Of The Page While Scrolling
问题描述
I'm making a site in Bootstrap. 
我正在Bootstrap中建立网站。 I added the navigation bar below the header part. 我在标题部分下方添加了导航栏。 Basically I want my navigation bar to stays at top of the page while scrolling. 基本上，我希望我的导航栏在滚动时保持在页面顶部。 I saw the Bootstrap documentation to see how this feature can be done but I didn't find anything. 我看到了Bootstrap文档，以了解如何完成此功能，但没有找到任何东西。 So here's the link to my site so you can see how it is. 因此，这是指向我的网站的链接，因此您可以查看它的状态。 Please if you know how to solve this problem ,please let me know. 如果您知道如何解决此问题，请告诉我。
Here's the full code: 这是完整的代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Daygostar.ir</title>
<!-- Bootstrap -->
<link href="css/bootstrap.css" rel="stylesheet"/>
<link href="styles.css" rel="stylesheet"/>
<link href="css/1140.css" rel="stylesheet" type="text/css">
<link href="css/custom.css" rel="stylesheet" type="text/css">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="js/html5shiv.min.js"></script>
<script src="js/respond.min.js"></script>
<![endif]-->
<script>
var vid = document.getElementById("bgvid");
var pauseButton = document.querySelector("#polina button");
function vidFade() {
vid.classList.add("stopfade");
}
vid.addEventListener('ended', function()
{
// only functional if "loop" is removed
vid.pause();
// to capture IE10
vidFade();
});
pauseButton.addEventListener("click", function() {
vid.classList.toggle("stopfade");
if (vid.paused) {
vid.play();
pauseButton.innerHTML = "Pause";
} else {
vid.pause();
pauseButton.innerHTML = "Paused";
}
})
</script>
<script type="text/javascript">
var ypos,image;
function parallex() {
image = document.getElementById('image');
ypos = window.pageYOffset;
image.style.top = ypos * .7+ 'px';
}
window.addEventListener('scroll', parallex),false;
</script>
</head>
<body data-spy="scroll" data-target="#my-navbar" >
<div id="wrapper">
<div id="header">
<div id="image">
<div class="container12">
<ul id="scene">
<li class="layer" id="l1" data-depth="0.40"><img src="img/larg-logo.png"></li>
<li class="layer" id="l2" data-depth="0.80"><img src="img/small-logo.png"></li>
</ul>
</div>
</div>
</div>
<div id="content">
<nav class="navbar navbar-default" id="topMenu">
<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="#"><img src="img/logo.png"></a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse BKoodakBold" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right" id="navigationMenu">
<li><a href="#">تماس با ما</a></li>
<li><a href="#">درباره ما</a></li>
<li><a href="#">پشتیبانی افلاین</a></li>
<li><a href="#">نمونه کارها</a></li>
<li><a href="#">سوالات متداول</a></li>
<li><a href="#">تعرفه ها</a></li>
<li><a href="#">خدمات ما</a></li>
<li><a href="#">دانستنی ها</a></li>
<li><a href="#">مقالات سایت</a></li>
<li><a href="#">پکیج ها</a></li>
<li class="active"><a href="#">صفحه اصلی</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">منوی کاربران <span class="caret"></span></a>
<ul class="dropdown-menu" id="dropDown">
<li><a href="#">ورود کاربران</a></li>
<li><a href="#">ثبت نام کاربران</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
<div class="container-fluid">
<div class="page-header BHoma" id="pageHeader">
<h1>
خدمات دپارتمان طراحی سایت دی گستر
<hr class="style18">
<small style="padding-right:100px;padding-left:100px;">... طراحی انواع سایت های شخصی، فروشگاهی، شرکتی، سازمانی، خبری و</small>
</h1>
</div>
</div></br>
<div class="container">
<div class="row">
<div class="col-md-6">
<img style="float:;" src="images/home-1.png"></img>
</div>
<div class="col-md-4 col-md-offset-2">
<h1>INTEGRITY</h1>
<ul>
<li>Integrity is a beautifully crafted, all-</li>
<li>purpose design that works equally well for </li>
<li>creatives and professionals alike. Clean </li>
<li>lines give it an understated elegance that </li>
<li>feels current and fresh without being too </li>
<li>flashy. See all Integrity features.</li>
</ul>
<h3>HIGHLIGHTS</h3>
<ul>
<li>Great For Business Sites</li>
<li>Great For Business Sites </li>
<li>Great For Business Sites</li>
</ul>
</div>
</div>
</div></br>
<div class="container">
<div class="row">
<div class="col-md-6">
<img style="float:;" src="images/home-2.png"></img>
</div>
<div class="col-md-4 col-md-offset-2">
<h1>INTEGRITY</h1>
<ul>
<li>Integrity is a beautifully crafted, all-</li>
<li>purpose design that works equally well for </li>
<li>creatives and professionals alike. Clean </li>
<li>lines give it an understated elegance that </li>
<li>feels current and fresh without being too </li>
<li>flashy. See all Integrity features.</li>
</ul>
<h3>HIGHLIGHTS</h3>
<ul>
<li>Great For Business Sites</li>
<li>Great For Business Sites </li>
<li>Great For Business Sites</li>
</ul>
</div>
</div>
</div></br>
<div class="container">
<div class="row">
<div class="col-md-6">
<img style="float:;" src="images/home-3.png"></img>
</div>
<div class="col-md-4 col-md-offset-2">
<h1>INTEGRITY</h1>
<ul>
<li>Integrity is a beautifully crafted, all-</li>
<li>purpose design that works equally well for </li>
<li>creatives and professionals alike. Clean </li>
<li>lines give it an understated elegance that </li>
<li>feels current and fresh without being too </li>
<li>flashy. See all Integrity features.</li>
</ul>
<h3>HIGHLIGHTS</h3>
<ul>
<li>Great For Business Sites</li>
<li>Great For Business Sites </li>
<li>Great For Business Sites</li>
</ul>
</div>
</div>
</div></br>
<div class="container">
<div class="row">
<div class="col-md-6">
<img style="float:;" src="images/home-4.png"></img>
</div>
<div class="col-md-4 col-md-offset-2">
<h1>INTEGRITY</h1>
<ul>
<li>Integrity is a beautifully crafted, all-</li>
<li>purpose design that works equally well for </li>
<li>creatives and professionals alike. Clean </li>
<li>lines give it an understated elegance that </li>
<li>feels current and fresh without being too </li>
<li>flashy. See all Integrity features.</li>
</ul>
<h3>HIGHLIGHTS</h3>
<ul>
<li>Great For Business Sites</li>
<li>Great For Business Sites </li>
<li>Great For Business Sites</li>
</ul>
</div>
</div>
</div></br>
</div>
<div class="container-fluid">
<div class="row" id="paraDiv">
<div class="col-md-8 col-md-offset-2" id="contentDiv"><span class="glyphicon glyphicon-ok-circle" aria-hidden="true"></span> <strong>ALL STACKS INCLUDED.</strong> NO OTHER THEME ON THE PLANET HAS THIS VERSATILITY!</div>
<div class="col-md-offset-2"></div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<video autoplay poster="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/polina.jpg" id="bgvid" loop>
<source src="http://thenewcode.com/assets/videos/polina.webm" type="video/webm">
<source src="http://thenewcode.com/assets/videos/polina.mp4" type="video/mp4">
</video>
<div id="polina">
<h1>Polina</h1>
<p>filmed by Alexander Wagner 2011
<p><a href="http://thenewcode.com/777/Create-Fullscreen-HTML5-Page-Background-Video">original article</a>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur porta dictum turpis, eu mollis justo gravida ac. Proin non eros blandit, rutrum est a, cursus quam. Nam ultricies, velit ac suscipit vehicula, turpis eros sollicitudin lacus, at convallis mauris magna non justo. Etiam et suscipit elit. Morbi eu ornare nulla, sit amet ornare est. Sed vehicula ipsum a mattis dapibus. Etiam volutpat vel enim at auctor.</p>
<p>Aenean pharetra convallis pellentesque. Vestibulum et metus lectus. Nunc consectetur, ipsum in viverra eleifend, erat erat ultricies felis, at ultricies mi massa eu ligula. Suspendisse in justo dapibus metus sollicitudin ultrices id sed nisl.</p>
<button>Pause</button>
</div>
</div>
</div>
</div>
<footer>
</footer>
<!-- Scripts -->
<script src="deploy/parallax.min.js"></script>
<script>
// Pretty simple huh?
var scene = document.getElementById('scene');
var parallax = new Parallax(scene);
</script>
<script src="js/script.js">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</div>
</body>
</html>
3 个解决方案
解决方案1
2 2016-07-22 15:42:33
Please read the Bootstrap Documentation for .navbar here: 请在此处阅读.navbar的Bootstrap文档：
http://getbootstrap.com/components/#navbar http://getbootstrap.com/components/#navbar
The Bootstrap Framework has native support for a fixed navigation by any of the following classes: Bootstrap框架对以下任一类的固定导航均提供本机支持：
.navbar-fixed-top
.navbar-fixed-bottom
.navbar-static-top
Each one functions differently, so pick the one that best addresses your needs for this project. 每个项目的功能都不相同，因此请选择最能满足您对该项目需求的项目。
解决方案2
0 2016-07-22 15:45:11
You can fix the navigation bar to the top of the browser by adding a few simple css codes to your bootstrap theme. 您可以通过在引导主题中添加一些简单的CSS代码，将导航栏固定在浏览器顶部。 The class is sticky-nav included in bootstrap. 该类是bootstrap中包含的sticky-nav。 Here is the css example and below that is a nav example using the css example. 这是css示例，下面是使用css示例的导航示例。
.page-header {
padding-top: 80px; /* nav height */
}
.sticky-nav {
position:fixed;
top:0;
width: 100%;
z-index: 99999999;
}
you can also have it only do it for desktop by doing it like this: 您也可以通过以下方式使其仅在台式机上运行：
@media (min-width: 768px) {
.page-header {
padding-top: 80px; /* nav height */
}
.sticky-nav {
position:fixed;
top:0;
width: 100%;
z-index: 99999999;
}
}
Here is the HTML navigation code: 这是HTML导航代码：
<nav class="row navbar navbar-trans sticky-nav navbar-white">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<img class="icon-x" src="img/m/x.svg" alt="Close Menu">
</button>
<a class="navbar-brand-trans" href="#"><img src="/img/logo-top-t.svg" alt="Logo">
</a><a class="navbar-brand-white" href="#"><img src="/img/logo-top-w.svg" alt="Logo">
</a>
</div>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="/" id="home" class="active">Home</a></li>
<li class="dropdown">
<a href="#" data-toggle="dropdown" class="dropdown-toggle" id="serv-dropdown">Services <span class="glyphicon glyphicon glyphicon-menu-down"></span></a>
<ul class="dropdown-menu">
<div class="col-md-1 visible-md visible-lg"></div>
<div class="col-sm-12 col-md-10">
<div class="col-sm-3 heading hidden-xs">
<p>Services</p>
</div>
<div class="col-sm-3 hcol">
<li><a href="/consulting">Consulting Services</a></li>
<li><a href="/custom">Custom Software</a></li>
<li><a href="/django">Development Django</a></li>
<li><a href="/mobiledevelopment">Development Mobile</a></li>
</div>
<div class="col-sm-3 hcol">
<li><a href="/php">Development PHP</a></li>
<li><a href="/python">Development Python</a></li>
<li><a href="/webdevelopment">Web Development</a></li>
</div>
<div class="col-sm-3 hcol hidden-xs">
<span>Our Experience Drives</span> <br>
<span>Your Success</span> <br><br>
<button type="button" name="projects" class="jq-btn blue">OUR PROJECTS</button>
</div>
</div>
<div class="col-md-1 visible-md visible-lg"></div>
</ul>
</li>
<li><a href="/projects">Projects</a></li>
<li><a href="/team">Team</a> </li>
<li><a href="/blog">Blog</a></li>
<li>
<div class="col-xs-12 visible-xs text-center"><a id="contact-btn" onclick="toggleContact();">Contact Us</a></div>
<a class="hidden-xs" id="contact-btn" onclick="toggleContact();">Contact Us</a>
</li>
</ul>
</div>
</div>
</nav>
解决方案3
0 2016-07-22 15:55:25
To have a sticky header(one that gets fixed as you scroll), you'll need to bind a function to the window.onscroll event that will check if the header is passed the current scroll position, and add the bootstrap's navbar-fixed-top class to it: 要使用粘性标头（滚动时会固定的标头），您需要将一个函数绑定到window.onscroll事件，该事件将检查标头是否通过当前滚动位置，并添加引导程序的navbar-fixed-top班吧：
$(window).on('scroll', fixHeader);
var header = $('nav');
var headerOffset = header.offset().top;
function fixHeader(evt){
var currentScroll = $(window).scrollTop()
if(headerOffset <= currentScroll){
header.addClass('navbar-fixed-top')
}
else{
header.removeClass('navbar-fixed-top');
}
}
https://jsfiddle.net/hgLzqnqp/2/ https://jsfiddle.net/hgLzqnqp/2/
You'll also want to push the content following the nav down, as it will be removed from the rendering flow. 您还将要在nav后将内容下推，因为它将从渲染流中删除。 Here is an example of how to do that: https://jsfiddle.net/hgLzqnqp/3/ 这是如何执行此操作的示例： https : //jsfiddle.net/hgLzqnqp/3/
Hopefully position: sticky will come to CSS at some point, and there are already some polyfills for that: https://github.com/filamentgroup/fixed-sticky 希望的position: sticky会在某些时候出现在CSS上，并且已经有一些polyfills： https : //github.com/filamentgroup/fixed-sticky
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
滚动时如何从页面中间离开菜单栏？ - How to leave Menu bar from the middle of the page on top while scrolling?
在Twitter Bootstrap中如何在滚动时将菜单栏固定在顶部 - In Twitter Bootstrap How can I fix my menu bar on the top while scrolling
如何创建滚动时位于顶部的栏？ - How to create a bar that stays on top when scrolling?
导航菜单下的页面正在滚动 - Page under the navigation menu is scrolling
在网页滚动时保持在顶部的DIV - A DIV that stays at the top while a web page scrolls
导航栏位于顶部 - Navigation bar that stays on top
滚动时如何使此导航栏浮动在顶部？ - How to make this navigation bar floating on top while scrolling?
Bootstrap滚动时将导航栏固定在顶部 - Bootstrap Fixing navigation bar on top when scrolling
平滑的导航菜单将整个页面滚动到顶部 - Smooth Navigational Menu scrolling the whole page to the top
如何使jQuery在着陆页菜单上从上到下和从下到上滚动慢动画 - How to make jQuery Scrolling Top to bottom and Bottom to Top Slow Animation on Landing page menu
相关标签