自動隱藏導航觸發第二個元素

Question

我有結構化的一個navBar是自動隱藏向下滾動查看/上/顯示代碼。

我試圖觸發第二個元素（#floatingBox）在導航隱藏時向上移動10px，並在重新出現時向下移動10px。剩下的時間，我想#floatingBox被修復，並在用戶滾動時「跟隨」用戶。

問題

#floatingBox會跟隨，但不會改變其頂部，甚至當我添加/刪除類。

我清楚地失去了一些東西。任何幫助，將不勝感激。

鏈接：https://codepen.io/theodore_steiner/pen/ZKbRyG

var didScroll; 
 
var lastScrollTop = 0; 
 
var delta = 5; 
 
var navBarHeight = $("header").outerHeight(); 
 

 
$(window).scroll(function(event) 
 
\t \t \t \t \t \t \t \t { 
 
\t didScroll = true; 
 
}); 
 

 
setInterval(function() 
 
\t \t \t \t \t \t { 
 
\t if(didScroll) 
 
\t { 
 
\t \t hasScrolled(); 
 
\t \t didScroll = false; 
 
\t } 
 
}, 100); 
 

 

 
function hasScrolled() 
 
{ 
 
\t var st = $(this).scrollTop(); 
 
\t 
 
\t if(Math.abs(lastScrollTop - st) <= delta) 
 
\t \t return; 
 
\t 
 
\t if(st > lastScrollTop && st > navBarHeight) 
 
\t { 
 
\t \t $('header').removeClass("nav-down").addClass("nav-up"); 
 
\t \t $("floatingBox").removeClass("box-start").addClass("up"); 
 
\t } 
 
\t else 
 
\t { 
 
\t \t if(st + $(window).height() < $(document).height()) 
 
\t \t { 
 
\t \t \t $("header").removeClass("nav-up").addClass("nav-down"); 
 
\t \t \t $("floatingBox").removeClass("up").addClass("box-start"); 
 
\t \t } 
 
\t } 
 
\t lastScrollTop = st; 
 
}

body 
 
{ 
 
    padding-top: 40px; 
 
} 
 

 
header 
 
{ 
 
    background: #f5b335; 
 
    height: 40px; 
 
    position: fixed; 
 
    top: 0; 
 
    transition: top 0.2s ease-in-out; 
 
    width: 100%; 
 
} 
 

 
.nav-up 
 
{ 
 
    top: -40px; 
 
} 
 

 
main 
 
{ 
 
    background-color: #f2f2f2; 
 
\t height: 2000px; 
 
} 
 

 
#floatingBox 
 
{ 
 
\t height: 230px; 
 
\t width: 100px; 
 
\t border: 1px solid #ddd; 
 
\t position: fixed; 
 
\t top: 100px; 
 
\t left: 30px; 
 
\t transition: top .2s ease; 
 
} 
 

 
#floatingBox.up 
 
{ 
 
\t top: 90px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<header class="nav-down"></header> 
 
<main> 
 
\t <div id="floatingBox" class="box-start"></div> 
 
</main> 
 
<footer></footer>

Answer 1

兩個問題，我想。

首先，在您的jQuery函數floating-box中，您需要將其更改爲#floating-box。

其次，假設你要滾動備份時，恢復到原來的狀況，你需要扭轉的類別順序被刪除，並添加上floating-box - >$("#floatingBox").removeClass("up").addClass("box-start");

var didScroll; 
 
var lastScrollTop = 0; 
 
var delta = 5; 
 
var navBarHeight = $("header").outerHeight(); 
 

 
$(window).scroll(function(event) 
 
\t \t \t \t \t \t \t \t { 
 
\t didScroll = true; 
 
}); 
 

 
setInterval(function() 
 
\t \t \t \t \t \t { 
 
\t if(didScroll) 
 
\t { 
 
\t \t hasScrolled(); 
 
\t \t didScroll = false; 
 
\t } 
 
}, 100); 
 

 

 
function hasScrolled() 
 
{ 
 
\t var st = $(this).scrollTop(); 
 
\t 
 
\t if(Math.abs(lastScrollTop - st) <= delta) 
 
\t \t return; 
 
\t 
 
\t if(st > lastScrollTop && st > navBarHeight) 
 
\t { 
 
\t \t $('header').removeClass("nav-down").addClass("nav-up"); 
 
\t \t $("#floatingBox").removeClass("box-start").addClass("up"); 
 
\t } 
 
\t else 
 
\t { 
 
\t \t if(st + $(window).height() < $(document).height()) 
 
\t \t { 
 
\t \t \t $("header").removeClass("nav-up").addClass("nav-down"); 
 
\t \t \t $("#floatingBox").removeClass("up").addClass("box-start"); 
 
\t \t } 
 
\t } 
 
\t lastScrollTop = st; 
 
}

body 
 
{ 
 
    padding-top: 40px; 
 
} 
 

 
header 
 
{ 
 
    background: #f5b335; 
 
    height: 40px; 
 
    position: fixed; 
 
    top: 0; 
 
    transition: top 0.2s ease-in-out; 
 
    width: 100%; 
 
} 
 

 
.nav-up 
 
{ 
 
    top: -40px; 
 
} 
 

 
main 
 
{ 
 
    background-color: #f2f2f2; 
 
\t height: 2000px; 
 
} 
 

 
#floatingBox 
 
{ 
 
\t height: 230px; 
 
\t width: 100px; 
 
\t border: 1px solid #ddd; 
 
\t position: fixed; 
 
\t top: 100px; 
 
\t left: 30px; 
 
\t transition: top .2s ease; 
 
} 
 

 
#floatingBox.up 
 
{ 
 
\t top: 90px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<header class="nav-down"></header> 
 
<main> 
 
\t <div id="floatingBox" class="box-start"></div> 
 
</main> 
 
<footer></footer>