我下面有以下代碼片段。當用戶滾動經過標題時，它會變得粘性。然后，當他們單擊標題One、Two、Three等中的任一選項卡時，它會向下滾動到相應的 div。由于某種原因，當我單擊選項卡時，它會滾動經過 div。One就像我想滾動到、等部分的頂部Two，并在滾動時讓它出現在粘性標題的正下方。現在，當我單擊標題上的導航項目時，它會滾動經過粘性標題。有沒有不同的方法來實現這一目標？<!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貢獻1802條經驗 獲得超5個贊
問題是你的導航欄覆蓋了 div 的頂部。您可以通過使用window.scrollBy()和offsetHeight將窗口再次向上滾動導航欄的高度來避免這種情況。該解決方案的優點是它不需要您知道導航欄的起始高度，因此它允許各種不同的瀏覽器配置。
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貢獻1820條經驗 獲得超9個贊
您可以這樣實現：在每個部分之前添加某種錨點，然后滾動到該部分滾動到不可見的錨點，該錨點將有一些頂部偏移。
<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;
}
我希望它對你有幫助！
- 2 回答
- 0 關注
- 157 瀏覽
添加回答
舉報
0/150
提交
取消