lop*_*opu 5 html javascript css jquery twitter-bootstrap
我有这个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的用例,所以我无法让它为我的页面工作.
干杯
小智 8
她的代码类似于' 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>