固定滾動條上的導航欄
[英]Fixed Navigation bar on scroll
問題描述
我似乎無法在滾動條上創建固定的導航欄。 我已經看過這里發布的一些答案，但是我無法將其用於我的解決方案。 我面臨的問題是導航欄在標題后不滾動。 它保持在頁眉下方的固定位置，即使向下滾動也不會移動。 有任何想法嗎？
//jQuery to collapse the navbar on scroll $(window).scroll(function() { if ($(".navbar").offset().top > 50) { $(".navbar").addClass("top-nav-collapse"); } else { $(".navbar").removeClass("top-nav-collapse"); } }); //jQuery for page scrolling feature - requires jQuery Easing plugin $(function() { $('a.page-scroll').bind('click', function(event) { var $anchor = $(this); $('html, body').stop().animate({ scrollTop: $($anchor.attr('href')).offset().top }, 1500, 'easeInOutExpo'); event.preventDefault(); }); });
body { width: 100%; height: 100%; } html { width: 100%; height: 100%; } @media(min-width:767px) { .navbar { position: relative padding: 20px 0; -webkit-transition: background .5s ease-in-out,padding .5s ease-in-out; -moz-transition: background .5s ease-in-out,padding .5s ease-in-out; transition: background .5s ease-in-out,padding .5s ease-in-out; background-color: azure } .top-nav-collapse { padding: 0; } }
<body id="home" data-spy="scroll" data-target=".navbar-default"> <!-- Header --> <header id="top" class="header-Home"> <div class="text-vertical-center"> <!--<img src="img/logocrop2.svg" class="CenterScreen" style="display:inline"> --> <div class="row"> <div class="col-sm-4 col-sm-push-4"> <h4><a href="#About">About</a></h4> <h4><a href="#Services">Services</a></h4> <h4><a href="#Contact">Contact</a></h4> </div> </div> </div> </header> <nav class="navbar navbar-default" role="navigation"> <div class="container"> <div class="navbar-header page-scroll"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"> <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 page-scroll" href="#home">A&Co</a> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse navbar-right navbar-ex1-collapse"> <ul class="nav navbar-nav"> <!-- Hidden li included to remove active class from about link when scrolled up past about section --> <li class="hidden"> <a class="page-scroll" href="#home"></a> </li> <li> <a class="page-scroll" href="#about">About</a> </li> <li> <a class="page-scroll" href="#services">Services</a> </li> <li> <a class="page-scroll" href="#contact">Contact</a> </li> </ul> </div> <!-- /.navbar-collapse --> </div> <!-- /.container --> </nav> <!-- Intro Section --> <section id="intro" class="intro-section"> <div class="container"> <div class="row"> <div class="col-lg-12"> <h1>Scrolling Nav</h1> <p><strong>Usage Instructions:</strong> Make sure to include the <code>scrolling-nav.js</code>, <code>jquery.easing.min.js</code>, and <code>scrolling-nav.css</code> files. To make a link smooth scroll to another section on the page, give the link the <code>.page-scroll</code> class and set the link target to a corresponding ID on the page.</p> <a class="btn btn-default page-scroll" href="#contact">Click Me to Scroll Down!</a> </div> </div> </div> </section> <!-- About Section --> <section id="about" class="about-section"> <div class="container"> <div class="row"> <div class="col-lg-12"> <h1>About Section</h1> </div> </div> </div> </section> <!-- Services Section --> <section id="services" class="services-section"> <div class="container"> <div class="row"> <div class="col-lg-12"> <h1>Services Section</h1> </div> </div> </div> </section> <!-- Contact Section --> <section id="contact" class="contact-section"> <div class="container"> <div class="row"> <div class="col-lg-12"> <h1>Contact Section</h1> </div> </div> </div> </section> <!-- jQuery --> <script src="js/jquery.js"></script> <!-- Bootstrap Core JavaScript --> <script src="js/bootstrap.min.js"></script> <!-- Scrolling Nav JavaScript --> <script src="js/jquery.easing.min.js"></script> <script src="js/scrolling-nav.js"></script> <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script> </body> </html>
屏幕截圖1
屏幕截圖2
2 個解決方案
解決方案1
1 2017-01-07 17:23:22
要在滾動時將導航欄保持在同一位置，
position: fixed;
在適用於我的導航的CSS中，但這可能不是您想要的...
解決方案2
0 2019-02-07 11:52:31
$(window).scroll(function(){
if($("body").scrollTop() > 100 || $("html").scrollTop() > 100) {
$(".navbar").addClass(".stop");
} else {
$(".navbar").removeClass(".stop");
}
});
enter code here
// css
.stop{
top: 0;
left: 0;
width: 100%;
padding: 0;
}
// html markup
<!-- Begin Navbar -->
<div class="navbar navbar-default ">
<div class="container">
<div class="navbar-header">
<div class="logo">
<a class="navbar-brand" href="index.html">
<img src="images/Restaurant-logo.png" class="img-responsive" alt="Restaurant logo">
</a>
</div>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"><span class="inner"></span></span>
<span class="icon-bar"><span class="inner"></span></span>
<span class="icon-bar"><span class="inner"></span></span>
</button>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-left ">
<li><a href="index.html" class="active">Home</a></li>
<li><a href="menu.html">Menu</a></li>
<li><a href="about.html">About</a></li>
<li class="dropdown">
<button class="btn-default dropdown-toggle" type="button" data-toggle="dropdown" data-hover="dropdown" aria-expanded="false">
Reservation
</button>
<ul class="dropdown-menu dropdownhover-bottom" role="menu" aria-labelledby="dropdownMenu1">
<li><a href="reservationTable.html">Reservation Table</a></li>
<li><a href="reservationEvent.html">Reservation Event</a></li>
</ul>
</li>
</ul>
<div class="logo">
<a href="index.html">
<img src="images/Restaurant-logo.png" class="img-responsive" alt="Restaurant logo">
</a>
</div>
<ul class="nav navbar-nav navbar-right ">
<li><a href="blog.html">Blog</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="tel:(123)234-8765">Order No : (123) 234-8765</a></li>
</ul>
</div><!-- /collapse -->
</div><!-- /container -->
</div><!--/Navbar -->`enter code here`
滾動后固定導航欄？
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.