固定导航栏滚动 [英] Fixed Navigation bar on scroll
本文介绍了固定导航栏滚动的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我似乎无法在滚动上创建固定的导航栏。我看过一些在这里张贴的答案，但我不能得到它的工作为我的解决方案。我面临的问题是导航栏不滚动标题后。它停留在标题下方的固定位置，并且尽管向下滚动也不移动。任何想法？
// jQuery折叠导航栏滚动$ ）.scroll（function（）{if（$（。navbar）。offset（）。top> 50）{$（。navbar）。addClass（top-nav-collapse）;} else { $（。navbar）。removeClass（top-nav-collapse）;}}）; // jQuery的页面滚动功能 - 需要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：背景.5s缓入，填充.5s缓入; -moz-transition：背景.5s缓入，填充.5s缓出;过渡：背景.5s缓入，填充.5s缓入; background-color：azure} .top-nav-collapse {padding：0; }}
< body id =homedata- spy =scrolldata-target =。navbar-default> <！ - Header - > < header id =topclass =header-Home> < div class =text-vertical-center> <！ - < img src =img / logocrop2.svgclass =CenterScreenstyle =display：inline> - > < div class =row> < div class =col-sm-4 col-sm-push-4> < h4>< a href =＃About>关于< / a>< / h4> < h4>< a href =＃Services>服务< / a>< / h4> < h4>< a href =＃Contact>联系人< / a>< / h4> < / div> < / div> < / div> < / header> < nav class =navbar navbar-defaultrole =navigation> < div class =container> < div class =navbar-header page-scroll> < button type =buttonclass =navbar-toggledata-toggle =collapsedata-target =。navbar-ex1-collapse> < span class =sr-only>切换导航< / span> < span class =icon-bar>< / span> < span class =icon-bar>< / span> < span class =icon-bar>< / span> < / button> < a class =navbar-brand page-scrollhref =＃home> A& amp; amp< / a> < / div> <！ - 收集导航链接，表单和其他内容，用于切换 - > < div class =collapse navbar-collapse navbar-right navbar-ex1-collapse> < ul class =nav navbar-nav> <！ - 隐藏的li包括从向上滚动时关于链接的活动类删除部分 - > < li class =hidden> < a class =page-scrollhref =＃home>< / a> < / li> < li> < a class =page-scrollhref =＃about>关于< / a> < / li> < li> < a class =page-scrollhref =＃services>服务< / a> < / li> < li> < a class =page-scrollhref =＃contact>联系人< / a> < / li> < / ul> < / div> <！ - /.navbar-collapse - > < / div> <！ - / .container - > < / nav> <！ - 介绍部 - > < section id =introclass =intro-section> < div class =container> < div class =row> < div class =col-lg-12> < h1>滚动导航< / h1> < p>< strong>使用说明：< / strong>请务必将< code> scrolling-nav.js< / code>，< code> jquery.easing.min.js< / code>和< code> scrolling-nav.css< / code>文件。要使链接顺利滚动到页面上的其他部分，请为链接指定< code> .page-scroll< / code>并将链接目标设置为页面上的相应ID。< / p> < a class =btn btn-default page-scrollhref =＃contact>点击我向下滚动！< / a> < / div> < / div> < / div> < / section> <！ - 关于部分 - > < section id =aboutclass =about-section> < div class =container> < div class =row> < div class =col-lg-12> < h1>关于部分< / h1> < / div> < / div> < / div> < / section> <！ - 服务部分 - > < section id =servicesclass =services-section> < div class =container> < div class =row> < div class =col-lg-12> < h1>服务部分< / h1> < / div> < / div> < / div> < / section> <！ - 联系人 - > < section id =contactclass =contact-section> < div class =container> < div class =row> < div class =col-lg-12> < h1>联系人部门< / 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.jstype =text / javascript>< / script>< / body>< / html& code>
1
截图2
解决方案
position：fixed;
在为我工作的导航的CSS中，但不是你的后面。 ..
I can't seem to create a fixed Navigation bar on scroll. I've looked at some of the answers posted on here however I can't get it to work for my solution. THe problem I'm facing is that the nav bar does not scroll after the header. It stays in a fixed position below the header and does not move despite scrolling down. Any ideas?
//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>
Screenshot 1
Screenshot 2
解决方案
To keep the navigation bar in the same place as you scroll it's
position: fixed;
In the CSS for the nav that worked for me, but that not might be what you are after...
这篇关于固定导航栏滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
