Javascript 如何设置引导导航菜单在滚动时保持在页面顶部
我正在Bootstrap中创建一个站点。我在标题部分下面添加了导航栏。基本上，我希望我的导航栏在滚动时保持在页面顶部。我看了引导文档来了解如何实现这一功能，但没有找到任何东西。这里是我的链接，你可以看到它是怎样的。如果你知道如何解决这个问题，请告诉我 以下是完整的代码：Javascript 如何设置引导导航菜单在滚动时保持在页面顶部,javascript,jquery,html,css,twitter-bootstrap,Javascript,Jquery,Html,Css,Twitter Bootstrap,我正在Bootstrap中创建一个站点。我在标题部分下面添加了导航栏。基本上，我希望我的导航栏在滚动时保持在页面顶部。我看了引导文档来了解如何实现这一功能，但没有找到任何东西。这里是我的链接，你可以看到它是怎样的。如果你知道如何解决这个问题，请告诉我 以下是完整的代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <met
<!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>
Daygostar.ir
var vid=document.getElementById（“bgvid”）；
var pauseButton=document.querySelector（“polina按钮”）；
函数vidFade（）{
参见classList.add（“stopfade”）；
}
vid.addEventListener（'end'，function（）
{
//仅当“回路”被移除时才起作用
参阅暂停（）；
//捕捉IE10
vidFade（）；
});
pauseButton.addEventListener（“单击”，函数（）{
查看classList.toggle（“停止褪色”）；
如果（参见暂停）{
视频播放（）；
pauseButton.innerHTML=“暂停”；
}否则{
参阅暂停（）；
pauseButton.innerHTML=“暂停”；
}
})
var-ypos，图像；
函数parallex（）{
image=document.getElementById（'image'）；
ypos=window.pageYOffset；
image.style.top=ypos*.7+'px'；
}
window.addEventListener（'scroll'，parallex），false；
切换导航
-
خدمات دپارتمان طراحی سایت دی گستر
... طراحی انواع سایت های شخصی، فروشگاهی، شرکتی، سازمانی، خبری و
诚实正直
- 诚信是一个制作精美的-
- 目的性设计，同样适用于
- 创意人士和专业人士一样。干净的
- 线条给它一种低调的优雅
- 感觉新鲜而不太紧张
- 华而不实。查看所有完整性功能
亮点
- 非常适合商业网站
- 非常适合商业网站
- 非常适合商业网站
诚实正直
- 诚信是一个制作精美的-
- 目的性设计，同样适用于
- 创意人士和专业人士一样。干净的
- 线条给它一种低调的优雅
- 感觉新鲜而不太紧张
- 华而不实。查看所有完整性功能
亮点
- 非常适合商业网站
- 非常适合商业网站
- 非常适合商业网站
.navbar-fixed-top
.navbar-fixed-bottom
.navbar-static-top
.page-header {
padding-top: 80px; /* nav height */
}
.sticky-nav {
position:fixed;
top:0;
width: 100%;
z-index: 99999999;
}
@media (min-width: 768px) {
.page-header {
padding-top: 80px; /* nav height */
}
.sticky-nav {
position:fixed;
top:0;
width: 100%;
z-index: 99999999;
}
}
<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>
$(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');
}
}