scrollintoview() blocked by sticky Navbar

Question

For some unknown reason to me, my navigation bar is blocking the div content.

Below is my example code. How can I fix it so the div wouldn't be blocked by the sticky navigation bar when I click the button?

<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>

This might help you --> https://stackoverflow.com/questions/13614112/using-scrollintoview-with-a-fixed-position-header — Jaya Krishna, Jul 26 '18 at 06:25
Is there any ways for me to write the script inside onClick command? — Dwipa Arantha, Jul 26 '18 at 06:28
In the answer they provided a link, which scrolls when the button is clicked --> https://work.karlhorky.com/frontend-tricks/anchors-with-fixed-header/index.html — Jaya Krishna, Jul 26 '18 at 06:31
Possible duplicate of [Using scrollIntoView with a fixed position header](https://stackoverflow.com/questions/13614112/using-scrollintoview-with-a-fixed-position-header) — Gautham Srinivasan, Jul 26 '18 at 06:43

Hari Das · Accepted Answer · 2018-07-26T06:56:05.537

You have to leave some pixels from top so that the content will appear to start from the bottom of navbar. In this case padding-bottom worked.

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>

its not about the padding. what i need is to put every targeted div just bellow the navbar. — Dwipa Arantha, Jul 26 '18 at 06:45
I did.. And I'm pretty much understand the changes, but its not what it needs.. The padding 100px will ruin gaps above it.. — Dwipa Arantha, Jul 26 '18 at 08:13

scrollintoview() blocked by sticky Navbar

1 Answers1