scrollintoview（）被粘性導航欄阻止

Question

由於某些未知原因，我的導航欄阻止了div內容。

下面是我的示例代碼。 如何修復該問題，以便在單擊按鈕時不會被粘性導航欄阻止div ？

 <div style="height:90px; border: 1px solid red; background-color: grey; position: fixed; width: 100%;">Navbar</div> <div id="A"> This text will blocked by sticky navbar <br/>A<br/><br/><br/><br/><br/>--- </div> <div id="B"> This text will blocked by sticky navbar <br/>B<br/><br/><br/><br/><br/>--- </div> <br/><br/><br/><br/><br/><br/><br/> <button onClick="document.getElementById('A').scrollIntoView();">A</button> <button onClick="document.getElementById('B').scrollIntoView();">B</button> 

Answer 1

您必須從頂部離開一些像素，以便內容從導航欄的底部開始顯示。 在這種情況下， padding-bottom有效。

 function scrollToView(id){ var top = document.getElementById(id).offsetTop-document.getElementById("nav").offsetHeight-10; //show 10 pixels down the border window.scrollTo(0, top); } 

 <div style="height:90px; border: 1px solid red; background-color: grey; position: fixed; width: 100%;" id="nav">Navbar</div> <div id="A" style="padding-top: 100px"> This text will blocked by sticky navbar <br/>A<br/><br/><br/><br/><br/>--- </div> <div id="B"> This text will blocked by sticky navbar <br/>B<br/><br/><br/><br/><br/>--- </div> <br/><br/><br/><br/><br/><br/><br/> <div id="C"> This text will blocked by sticky navbar <br/>C<br/><br/><br/><br/><br/>--- </div> <button onClick="scrollToView('A')">A</button> <button onClick="scrollToView('B')">B</button>