当导航栏在屏幕顶部时的jQuery变得粘滞不起作用
[英]Jquery for when navbar is at top of screen become sticky not working
问题描述
我正在尝试使导航栏（位于幻灯片前面）在到达页面顶部时变得发粘。 每当它靠近顶部时，它都会略微向下跳（位于幻灯片下方），并且在屏幕顶部不会发粘。
我对Jquery缺乏经验，所以没有尝试过其他任何事情。
$(document).ready(function() { var stickyNavTop = $('nav').offset().top; console.log("work"); var stickyNav = function() { var scrollTop = $(window).scrollTop(); if (scrollTop > stickyNavTop) { $('nav').addClass('sticky'); } else { $('nav').removeClass('sticky'); } }; stickyNav(); $(window).scroll(function() { stickyNav(); }); });
.sticky { position: sticky; width: 100%; left: 0; top: 0; z-index: 100; border-top: 0; } .navbar { background-color: #083867; font-family: Arial; display: flex; justify-content: center; bottom: 0; position: absolute; z-index: 10; width: 100%; } .slideshow-container { position: relative; z-index: 1; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <header> <div class="slideshow-container"> <div class="mySlides fade"> <img class="slideshow-image" src="http://placehold.it/1900x1080" style="width:100%"> </div> <div class="mySlides fade"> <img class="slideshow-image" src="http://placehold.it/1900x1080" style="width:100%"> </div> <div class="mySlides fade"> <img class="slideshow-image" src="http://placehold.it/1900x1080" style="width:100%"> </div> </div> <nav class="navbar"> <div class="container"> <ul class="navbar-nav"> <div class="dropdown"> <button class="dropbtn">About</button> <div class="dropdown-content"> <a href="about.html">About us</a> <a href="nco-profile.html">NCO Profiles</a> <a href="co-profile.html">CO profiles</a> </div> </div> <li class="nav-item"> <a class="nav-link" href="joinInfo.html">Joining Info</a> </li> <li class="nav-item"> <a class="nav-link" href="contact.html">Contact</a> </li> <li class="nav-item"> <a class="nav-link " href="calendar.html">Calendar</a> </li> <li class="nav-item"> <a class="nav-link" href="forms.html">Forms</a> </li> <li class="nav-item"> <a class="nav-link" href="courses.html">Courses</a> </li> <li class="nav-item"> <a class="nav-link" href="courses.html">Support Committee</a> </li> </ul> </div> </nav> </header>
导航栏到达屏幕顶部时，应该使其具有粘性，并停留在屏幕顶部。 当我向下滚动到导航栏在屏幕顶部的位置时，它会跳到幻灯片下方，并且不会发粘。
1 个解决方案
解决方案1
0 已采纳 2019-08-07 04:45:38
以下代码将为您提供帮助，您只需将id =“ header”添加到容器类div并在底部添加jquery代码。
<style>
.sticky {
position: sticky; width: 100%;
left: 0; top: 0;
z-index: 100; border-top: 0;
}
.navbar {
background-color: #083867; font-family: Arial;
display: flex; justify-content: center;
bottom: 0; position: absolute;
z-index: 10; width: 100%;
}
.slideshow-container {
position: relative;
z-index: 1;
}
</style>
<body>
<header>
<div class="slideshow-container">
<div class="mySlides fade">
<img class="slideshow-image" src="http://placehold.it/1900x1080" style="width:100%">
</div>
<div class="mySlides fade">
<img class="slideshow-image" src="http://placehold.it/1900x1080" style="width:100%">
</div>
<div class="mySlides fade">
<img class="slideshow-image" src="http://placehold.it/1900x1080" style="width:100%">
</div>
</div>
<nav class="navbar">
<div class="container" id="header">
<ul class="navbar-nav">
<div class="dropdown">
<button class="dropbtn">About</button>
<div class="dropdown-content">
<a href="about.html">About us</a>
<a href="nco-profile.html">NCO Profiles</a>
<a href="co-profile.html">CO profiles</a>
</div>
</div>
<li class="nav-item">
<a class="nav-link" href="joinInfo.html">Joining Info</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link " href="calendar.html">Calendar</a>
</li>
<li class="nav-item">
<a class="nav-link" href="forms.html">Forms</a>
</li>
<li class="nav-item">
<a class="nav-link" href="courses.html">Courses</a>
</li>
<li class="nav-item">
<a class="nav-link" href="courses.html">Support Committee</a>
</li>
</ul>
</div>
</nav>
</header>
<script>
$(document).ready(function(){
var HeaderTop = $('#header').offset().top;
var hh =HeaderTop + 300;
$(window).scroll(function(){
if( $(window).scrollTop() > HeaderTop ) {
if($(window).scrollTop() > hh) {
$('#header').css({position: 'fixed', top: '0px', background:'#083867', width:'100%'});
} else{
$('#header').css({position: 'fixed', top: '0px'});
}
} else {
$('#header').css({position: 'static'});
}
});
});
</script>
</body>
当滚动到顶部时，粘滞导航栏会更改文本/ bg颜色，.addclass不起作用？
[英]Sticky Navbar change text/bg color when scrolled to top, .addclass is not working?
jQuery - 使粘性页脚停在页脚顶部并在向上滚动时再次变粘
[英]jQuery - make sticky footer stop at the top of footer and become sticky again on scroll up
如何在 jquery & bootstrap 5 中的主要固定顶部导航栏下的特定部分的滚动上添加第二个粘性导航栏？
[英]How to add a second sticky navbar on scroll of a particular section, under the primary fixed-top navbar, in jquery & bootstrap 5?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.