當從頂部滾動大于 20 時，我想更改導航欄。我的代碼可以工作，但是當緩慢向上滾動時會無限跳轉。我該如何修復它？工作https://jsfiddle.net/gwuh4zc9/2/這是我的html：<!--Navbar--><div class="container-fluid shadow-sm bg-white"> <div class="container p-0"> <!--First Nav--> <div class="Nav1 Z-index d-none d-sm-block"> <nav class="navbar navbar-expand-sm navbar-light p-0 py-1"> Nav 1 </nav> </div> <!--Second Navbar--> <div class="Nav2 container-fluid Fixed d-none Z-index bg-white"> <div class="container p-0"> <nav class="navbar p-0 m-0 navbar-expand-sm bg-white navbar-light"> Nav 2 </nav> </div> </div> </div></div><div class="body"> Body</div>這是我的js代碼：$(document).ready(function() { $(document).scroll(function() { if ($(this).scrollTop() > 20) { $(".Nav1").addClass("d-none"); $(".Nav1").removeClass("d-sm-block"); $(".Nav2").addClass("d-sm-block"); } else { $(".Nav1").removeClass("d-none"); $(".Nav1").addClass("d-sm-block"); $(".Nav2").removeClass("d-sm-block"); } })})
1 回答
一只名叫tom的貓
TA貢獻1906條經驗 獲得超3個贊
發生這種情況是因為當您將Nav1display 設置為 none 時，它會從 DOM 中刪除并且scrollTop值會發生變化。相反，你可以用不透明度隱藏它：
.hidden {
opacity: 0;
}
并添加/刪除此類：
if ($(this).scrollTop() > 20) {
$(".Nav1").addClass("hidden");
$(".Nav2").addClass("nav-visible");
} else {
$(".Nav1").removeClass("hidden");
$(".Nav2").removeClass("nav-visible");
}
$(document).ready(function() {
$(document).scroll(function() {
if ($(this).scrollTop() > 20) {
$(".Nav1").addClass("hidden");
$(".Nav2").addClass("nav-visible");
} else {
$(".Nav1").removeClass("hidden");
$(".Nav2").removeClass("nav-visible");
}
})
})
.Z-index {
z-index: 999999 !important;
}
.nav-initial {
position: fixed !important;
right: 0;
left: 0;
top: -20px;
opacity: 0;
transition: 0.2s;
}
.nav-visible {
top: 0;
opacity: 1;
}
.body {
height: 1000px;
}
.hidden {
opacity: 0;
}
/* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 575px) {
.SearchBox {
width: 100%;
}
.mycard {
width: 180px;
}
.Dotted:before {
height: 75px;
}
.tagFilters {
height: 3rem;
width: 6rem;
font-size: 9pt;
}
.wordFilter {
font-size: 9pt;
}
.HotelBckImg {
height: 230px;
border-top-left-radius: 15px;
border-bottom-right-radius: 0;
margin-bottom: 5px;
}
.sm-Padding {
max-width: 95% !important;
margin-right: auto;
margin-left: auto;
}
.customButton2 {
height: 2.8rem;
}
}
@media only screen and (max-width: 425px) {
.Dotted:before {
height: 95px;
}
}
@media only screen and (max-width: 350px) {
.Dotted:before {
height: 125px;
}
}
/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 576px) {
.SearchBox {
width: 320px;
}
.mycard {
width: 190px;
}
.Dotted:before {
height: 70px;
}
.tagFilters {
height: 3rem;
width: 6rem;
font-size: 9pt;
}
.wordFilter {
font-size: 10pt;
}
}
/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
.SearchBox {
width: 330px;
}
.mycard {
width: 190px;
}
.sideImgLeft {
width: 30%;
height: 350px;
margin-top: 3.5%;
}
.sideImgRight {
width: 30%;
height: 350px;
margin-top: 3.5%;
}
.Dotted:before {
height: 90px;
}
.tagFilters {
height: 3rem;
width: 6rem;
font-size: 9pt;
}
.wordFilter {
font-size: 9pt;
}
}
/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
.SearchBox {
width: 400px;
}
.mycard {
width: 190px;
}
.sideImgLeft {
width: 30%;
height: 370px;
margin-top: 2%;
}
.sideImgRight {
width: 30%;
height: 370px;
margin-top: 2%;
}
.tagFilters {
height: 3rem;
width: 6rem;
}
.wordFilter {
font-size: 10pt;
}
}
/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
.SearchBox {
width: 370px;
}
.mycard {
width: 190px;
}
.sideImgLeft {
width: 30%;
height: 285px;
}
.sideImgRight {
width: 30%;
height: 285px;
}
.Dotted:before {
height: 70px;
}
.tagFilters {
height: 3.3rem;
width: 8rem;
}
.wordFilter {
font-size: 11pt;
}
}
.body {
height: 1000px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!--Navbar-->
<div class="container-fluid shadow-sm bg-white">
<div class="container p-0">
<!--First Nav-->
<div class="Nav1 Z-index d-none d-sm-block">
<nav class="navbar navbar-expand-sm navbar-light p-0 py-1">
Nav 1
</nav>
</div>
<!--Second Navbar-->
<div class="Nav2 container-fluid nav-initial Z-index bg-white">
<div class="container p-0">
<nav class="navbar p-0 m-0 navbar-expand-sm bg-white navbar-light">
Nav 2
</nav>
</div>
</div>
</div>
</div>
<div class="body">
Body
</div>
- 1 回答
- 0 關注
- 150 瀏覽
添加回答
舉報
0/150
提交
取消