0
我在Bootstrap中創建了一個站點。我在標題部分下方添加了導航欄。基本上我希望我的導航欄在滾動時停留在頁面的頂部。我看到了Bootstrap文檔，看看如何完成這項功能，但我沒有找到任何東西。所以這裏是我的site的鏈接，所以你可以看到它是如何。如果你知道如何解決這個問題，請告訴我。如何設置Bootstrap導航菜單在滾動時停留在頁面頂部
下面是完整的代碼：
<!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>
具體來說，http://getbootstrap.com/components /＃的Navbar固定頂 – adam0101