Top margin of the first section ignored when scroll to top
Gillesvk opened this issue · 7 comments
In my case, the top margin of the first section is ignored when scroll back to top. I have to use padding instead of margin or wrap the sections in a container div.
NOT WORKING :
<body>
<section></section>
<section></section>
<section></section>
<button>Back to top</button>
</body>
section {
margin: 50px 0 0 0;
}
WORKING :
<body>
<section></section>
<section></section>
<section></section>
<button>Back to top</button>
</body>
section {
padding: 50px 0 0 0;
}
OR
<body>
<div class="wrapper">
<section></section>
<section></section>
<section></section>
<button>Back to top</button>
</div>
</body>
section {
margin: 50px 0 0 0;
}
Here is a link to a very simple example : codepen
As you will see, the top margin of the first section is ignored.
This is not a bug, it's a normal css behavior. The first section's margin is collapsing. You can check this link for more information.
Actually, it's not a margin collapsing issue because I apply only top margin on the child elements of the body, so there is no adjacent margin interference. In the codepen, I changed the background color of the body to pink and, as expected, the body contains the top margin of the first section.
Maybe, it's something to do with the choice between :
- window.scrollY,
- window.pageYOffset,
- document.body.scrollTop,
- document.documentElement.scrollTop
See this link
Check this codepen;
I added
display: flex;
flex-direction: column
to the body to prevent margin collapsing. As I said before, It seems like this is margin collapsing. Also you can see it clearly with inspect in the browser,
OK, thanks. Your plugin is awesome. So light.