我尝试使用bootstrap词缀进行制作,但对我不起作用。如何使用JavaScript和CSS Transition或JavaScript进行粘性导航栏?
data-spy =" affix" data-offset-top =" 630">来自bootstrap。
<div class="topnavhome">
<nav class="navbar" data-spy="affix" data-offset-top="630">
<div class="container">
<div class="row">
<div class="col-md-6 col-sm-4 col-xs-12">
<div class="logo-wrapper">
<a class="navbar-brand" href="index.html"><img src="images/logo.png" alt="N logo" /></a>
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
</div>
</div>
<div class="col-md-6 col-sm-8 col-xs-12">
<div class="social-link">
<span><i class="fa fa-phone phone" aria-hidden="true"></i> 000 000 000000</span>
<ul>
<li><a href="#" class="facebook"><i class="fa fa-facebook" aria-hidden="true"></i></a></li>
<li><a href="#" class="twitter"><i class="fa fa-twitter" aria-hidden="true"></i></a></li>
</ul>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav navbar-right ">
<li><a href="index.html" class="active">Home</a></li>
<li><a href="about.html">About Us</a></li>
<li><a href="supplements.html">Supplements</a></li>
<li><a href="faq.html">FAQs</a></li>
<li><a href="contact.html">Contact</a></li>
</ul>
</div>
</div>
</div>
</div>
</nav>
</div>
我假设您的意思是在滚动完整屏幕旋转频率后,导航栏是粘性的。如果我错了,请纠正我。
为此,您可以使用window
元素的scroll
事件,并检查offset().top
何时高于屏幕高度,然后仅在此点,粘性类或您用来制作Navbar Sticky的任何内容。/p>