我下面有以下代碼片段。當(dāng)用戶滾動(dòng)經(jīng)過(guò)標(biāo)題時(shí)，它會(huì)變得粘性。然后，當(dāng)他們單擊標(biāo)題One、Two、Three等中的任一選項(xiàng)卡時(shí)，它會(huì)向下滾動(dòng)到相應(yīng)的 div。由于某種原因，當(dāng)我單擊選項(xiàng)卡時(shí)，它會(huì)滾動(dòng)經(jīng)過(guò) div。One就像我想滾動(dòng)到、等部分的頂部Two，并在滾動(dòng)時(shí)讓它出現(xiàn)在粘性標(biāo)題的正下方?，F(xiàn)在，當(dāng)我單擊標(biāo)題上的導(dǎo)航項(xiàng)目時(shí)，它會(huì)滾動(dòng)經(jīng)過(guò)粘性標(biāo)題。有沒(méi)有不同的方法來(lái)實(shí)現(xiàn)這一目標(biāo)？<!DOCTYPE html><html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> body { margin: 0; font-size: 28px; } #navbar { overflow: hidden; background-color: #333; padding: 25px 16px; } #navbar a { float: left; display: block; color: #f2f2f2; text-align: center; text-decoration: none; font-size: 17px; margin-right: 15px; } .content { padding: 16px; } .sticky { position: fixed; top: 0; width: 100%; z-index: 100; box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.16); } .common { border: 1px solid black; padding: 200px 10px; margin-bottom: 20px; } </style> </head> <body> <div class="header"> <p>Scroll down to see the sticky effect.</p> </div> <div id="navbar"> <a onclick="headerClick(this); return false;" href="#">This is One</a> <a onclick="headerClick(this); return false;" href="#">This is Two</a> <a onclick="headerClick(this); return false;" href="#">This is Three</a> <a onclick="headerClick(this); return false;" href="#">This is Four</a> </div> <div class="content"> <div class="common" id="One">This is the first</div> <div class="common" id="Two">Two</div> <div class="common" id="Three">Three</div> <div class="common" id="Four">Four</div> <div class="common" id="Five">Five</div> <div class="common">Filler div to make scrolling longer</div> <div class="common">Filler div to make scrolling longer</div> <div class="common">Filler div to make scrolling longer</div> </div>
2 回答
慕后森
TA貢獻(xiàn)1802條經(jīng)驗(yàn) 獲得超5個(gè)贊
問(wèn)題是你的導(dǎo)航欄覆蓋了 div 的頂部。您可以通過(guò)使用window.scrollBy()和offsetHeight將窗口再次向上滾動(dòng)導(dǎo)航欄的高度來(lái)避免這種情況。該解決方案的優(yōu)點(diǎn)是它不需要您知道導(dǎo)航欄的起始高度，因此它允許各種不同的瀏覽器配置。
function headerClick(elem) {
if (elem.innerHTML === 'One') {
document.getElementById("One").scrollIntoView();
window.scrollBy(0, -(elem.offsetHeight)-2)
}
if (elem.innerHTML === 'Two') {
document.getElementById("Two").scrollIntoView();
window.scrollBy(0, -(elem.offsetHeight)-2)
}
if (elem.innerHTML === 'Three') {
document.getElementById("Three").scrollIntoView();
window.scrollBy(0, -(elem.offsetHeight)-2)
}
if (elem.innerHTML === 'Four') {
document.getElementById("Four").scrollIntoView();
window.scrollBy(0, -(elem.offsetHeight)-2)
}
if (elem.innerHTML === 'Five') {
document.getElementById("Five").scrollIntoView();
window.scrollBy(0, -(elem.offsetHeight)-2)
}
}
額外的 -2 是為了確?？梢钥吹?div 邊框，但如果不需要，可以將其刪除。
慕妹3146593
TA貢獻(xiàn)1820條經(jīng)驗(yàn) 獲得超9個(gè)贊
您可以這樣實(shí)現(xiàn)：在每個(gè)部分之前添加某種錨點(diǎn)，然后滾動(dòng)到該部分滾動(dòng)到不可見(jiàn)的錨點(diǎn)，該錨點(diǎn)將有一些頂部偏移。
<a id='Two'></a>
<div class="common">Two</div>
#Two {
display: block;
position: relative;
top: -120px; /*Here must be same value as your navbar height is*/
visibility: hidden;
}
我希望它對(duì)你有幫助！
- 2 回答
- 0 關(guān)注
- 155 瀏覽
添加回答
舉報(bào)
0/150
提交
取消