Scroll offset above 20px with href=#whereiwantscroll in html or css-CodePudding

Look at the problem :Screenshot

I added a sticky div with auto scroll button using: <a href="#BISHOKUS">BISHOKUS</a>

And in the div called BISHOKUS: <div id="BISHOKUS"...

But i added a sticky so it's not aligned with the top of the div.

So , my question is : How to shift a few pixels ? Like that :Screenshot 2 if it's on JS please help me to insert it on the code cause I don't know much about it

CodePudding user response：

On the id="BISHOKUS" div, give it following css:

/* The offset value should be the height of the sticky div */
margin-top: -50px;
padding-top: 50px;

TL;DR What happens is, we move the whole div up by 50px with the negative margin and then move the divs content down again by 50px with a positive padding. This makes the scrolling stop at the divs start position but the content is offset by 50px so effectively we've made a scroll offset.

Note that the div is now 50px taller than originally, so other styling may render it weird, for example if it has a background-color, it will look wrong, so you would need to work around that.

CodePudding user response：

Look at my code in the sticky :

<div >

<li style="padding: 5px; margin: 10px; display: inline-block; cursor: pointer;">

<a href="#BISHOKUS" style="margin-top: 20px;">BISHOKUS</a>

</li>

Look at my code in the div :

<div id="BISHOKUS" style="position: static;background-color: #202225; padding: 25px; margin-top: 20px; margin-bottom: 10px; border-radius: 1.25rem;">

<h1 style="margin-top: center;">Commandes Bishokus</h1>

</div>