Scroll to row ID with a negative margin to account for header height

chillwiddastill

Hi, sorry this is quite hard to explain...

Basically I have noticed that when navigating to an anchor tag that's set in the row ID on that page or a separate page, the page scrolls to the top of the row, but the height of the main nav menu covers part of the row container.

Here are some example screenshots of what I mean:

Here is the page area before the scroll: https://cl.ly/1E1J1q3v1k34/Screen Shot 2017-02-18 at 04.37.14.png

Then when you click the mouse icon in the top of the image, it scrolls like so and clips very close to the title of the row below it: https://cl.ly/0Q43362T2G3X/Screen Shot 2017-02-18 at 04.39.00.png

And in this shot you see that the row is scrolling to the top of the page, but because of the height of the nav bar, its clipping too close to the title in the row below: https://cl.ly/410V3f2f1S2a/Screen Shot 2017-02-18 at 04.40.38.png

Is there some way I can adjust the scroll percentage/pixel amount to take into account the nav bar height (which is 80px), so that the page scrolls to -80px of the top of the row ID? So it would look like this after the scroll: https://cl.ly/0F0A0Y1W3Q46/Screen Shot 2017-02-18 at 04.50.18.png

Hopefully this makes sense?


Thanks

chillwiddastill

I also tried adding the following custom CSS to try to fix the issue, which hasn't worked:

.hashlink:before{
display:block;
position:relative;
margin-top: -80px;
height:80px;
content: " ";
visibility:hidden;
}

So perhaps there is a particular class set for the current smooth scroll I can target?

chillwiddastill

its ok, I found out how to do it. I replaced the following in script.js

Line 1914 --- scrollTop: Math.round(target.offset().top)

with

scrollTop: Math.round(target.offset().top - 80)

Hopefully this is the only place its needed? If not, please let me know.


Thanks

Air

Hello :-)

Nice investigation!

I don't from where you got this CSS, but your JavaScript modification was spot on!

I think I will have to fix it in future so it will account for header height depending on chosen option for sticky header.

With kind regards.

chillwiddastill

Awesome! Yes it was quite a achievement when it suddenly started working