javascript在滚动上固定的位置
[英]javascript for position fixed on scroll
问题描述
我有这个div只是一个标题。
<div class="container-fluid DFOCpadding">
<div class="row">
<div class="col-lg-12">
<div class=" text-center ">
<span class="toptext">DANCE FOR OVARIAN CANCER</span>
</div>
</div>
</div>
还有一个导航栏，我想把它定位为固定的
<nav class="navbar navbar-default">
<div class="container">
<div class="navbar-header page-scroll">
<button type="button" class="navbar-toggle glyphicon glyphicon-chevron-down" data-toggle="collapse" data-target="#navbar">
<span class="sr-only">Dance Dance</span>
</button>
</div>
<div class="collapse navbar-collapse" id="navbar">
<ul class="nav navbar-nav">
<li><a href="http://danceforovariancancer.com.au">HOME</a></li>
<li><a class="scroll" href="#register"><span class="register">REGISTER</span></a></li>
<li><a class="scroll" href="#faq">FAQ's</a></li>
<li><a class="scroll" href="#acts">ACTS</a></li>
<li><a class="scroll" href="#about">ABOUT</a></li>
<li><a class="scroll" href="#contact">CONTACT</a></li>
</ul>
</div>
</div>
</nav>
当你滚动浏览它时，我需要页面才能抓住导航栏，就像在这个网站上一样： https ： //ovariancancer.net.au/
我已经看到了这方面的答案，但它们非常局限于OP的用例，所以我无法让它为我的页面工作。
干杯
2 个解决方案
解决方案1
8 已采纳 2015-11-30 02:07:36
她的代码类似于' https://ovariancancer.net.au/ '
希望这可以帮助
$(window).scroll(function() { if ($(window).scrollTop() > 100) { $(".navbar").css({ 'position': 'fixed', 'top': '0px', 'width': '100%', 'background': '#cfcfcf', 'z-index': '99' }); } else { $(".navbar").css({ 'position': 'relative', 'background': '#FFFFFF', 'width': '100%' }) } });
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container-fluid DFOCpadding"> <div class="row"> <div class="col-lg-12"> <div class=" text-center "> <span class="toptext">DANCE FOR OVARIAN CANCER</span> </div> </div> </div> <nav class="navbar navbar-default"> <div class="container"> <div class="navbar-header page-scroll"> <button type="button" class="navbar-toggle glyphicon glyphicon-chevron-down" data-toggle="collapse" data-target="#navbar"> <span class="sr-only">Dance Dance</span> </button> </div> <div class="collapse navbar-collapse" id="navbar"> <ul class="nav navbar-nav"> <li><a href="http://danceforovariancancer.com.au">HOME</a> </li> <li><a class="scroll" href="#register"><span class="register">REGISTER</span></a> </li> <li><a class="scroll" href="#faq">FAQ's</a> </li> <li><a class="scroll" href="#acts">ACTS</a> </li> <li><a class="scroll" href="#about">ABOUT</a> </li> <li><a class="scroll" href="#contact">CONTACT</a> </li> </ul> </div> </div> </nav> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p> <P> </p>
解决方案2
2 2015-11-30 02:04:38
试试这个：
.navbarfixed {
position: fixed;
}
$(function() {
var nav = $(".navbar");
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 500) {
nav.addClass("navbarfixed");
} else {
nav.removeClass("navbarfixed");
}
});
});
Javascript或Jquery：滚动到固定位置div
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.