个人中心
文章发布
退出
作者热门文章
- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时，我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
25
4
我正在使用 Bootstrap 创建一个站点。我在标题部分下方添加了导航栏。基本上我希望我的导航栏在滚动时保持在页面顶部。我查看了 Bootstrap 文档以了解如何完成此功能，但我没有找到任何东西。所以这是我的 site 的链接所以你可以看到它是怎么回事。如果您知道如何解决这个问题，请告诉我。
完整代码如下:
<!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>
最佳答案
请在此处阅读 .navbar 的 Bootstrap 文档:
http://getbootstrap.com/components/#navbar
Bootstrap Framework 对以下任何类的固定导航具有 native 支持:
.navbar-fixed-top
.navbar-fixed-bottom
.navbar-static-top
每一个的功能都不同，因此请选择最能满足您对该元素需求的那个。
关于javascript - 如何将 Bootstrap 导航菜单设置为在滚动时保持在页面顶部，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38530390/
25
4
0
我是一名优秀的程序员,十分优秀！