Develop Reference

How to disable parent/body scrolling when a modal is open in react

There are lot of similar questions to this.I have a react project in which I want to disable the parent/body scrolling when a modal/popup is in hover or focused state. I needed the parent scroll to be visible only the scrolling should be disabled when the modal is hovered or focused. I tried overflow:hidden and position:fixed but it makes the parent scroll disappear. Is there any way we can achieve this. I am new to UI , any help would be appreciated.

body {
position: fixed;
max-height: 100vh;
overflow-y: scroll;
}
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tempor congue leo, ullamcorper gravida dui. Integer dignissim euismod facilisis. Etiam eget accumsan justo. Ut vitae eros semper, pulvinar tortor eget, viverra metus. Proin eleifend eros
tortor, vel lobortis sem consequat quis. Phasellus euismod fermentum condimentum. Nulla id vehicula dolor, id rutrum metus. Curabitur tempor posuere enim, et accumsan lectus malesuada vitae. Morbi ultrices fringilla lacus vel ultricies. Etiam ut urna
massa. Morbi porttitor quam eget nisi volutpat, id tempor justo imperdiet. Nullam maximus venenatis turpis, a semper ligula placerat nec. Aliquam hendrerit magna a laoreet elementum. Duis efficitur, lacus sed lacinia porta, nibh ante eleifend lacus, et
viverra mi elit eget nulla. Fusce ultrices faucibus orci vel fermentum. Donec a consectetur turpis, id ultricies risus. Vestibulum iaculis porttitor justo, sit amet pellentesque est vulputate ac. Suspendisse nisi ex, gravida dapibus ipsum vitae, pharetra
efficitur tellus. Vivamus varius elementum euismod. Nunc elit diam, laoreet vel finibus at, porttitor vel est. Maecenas dignissim nibh eu nibh pellentesque ornare. Curabitur feugiat iaculis mi, ullamcorper hendrerit ex scelerisque ac. Donec blandit ipsum
sit amet nibh elementum, vitae efficitur nisi maximus. Curabitur sodales, elit a bibendum tempor, elit sem pellentesque metus, sit amet tempor diam nulla id sapien. In aliquam magna at turpis semper, et consectetur lorem egestas. Nunc ornare erat eros,
quis efficitur nibh tincidunt ac. Nunc imperdiet lectus id libero semper cursus eu vel turpis. Proin tincidunt sollicitudin metus consequat vehicula. Etiam sed nunc tincidunt, imperdiet mi eget, rutrum enim. Aenean scelerisque imperdiet tortor id sodales.
Aenean faucibus bibendum pharetra. Etiam sagittis odio nec risus malesuada egestas. Cras vel lorem a neque efficitur scelerisque. Pellentesque ut lorem id dolor varius dictum eget non metus. Nunc consectetur lectus sit amet nulla sollicitudin, eu tincidunt
neque cursus. Nullam in enim ullamcorper, ultrices velit non, suscipit lorem. Nunc eleifend urna non fermentum tincidunt. Curabitur fermentum dui eros, consectetur feugiat risus aliquam nec. Sed efficitur nec nulla eu porta. Suspendisse ipsum massa, elementum
vel blandit vel, hendrerit at nibh. Etiam tempus massa non pellentesque hendrerit. In commodo nisl quam, ut aliquet ipsum varius a. Donec magna justo, luctus eu congue tempus, feugiat ut est. Proin suscipit eu lorem vel imperdiet. Morbi suscipit nisi
sem, finibus pulvinar magna scelerisque non. Proin molestie, nisl non tincidunt suscipit, mauris nunc commodo diam, et lacinia diam libero sit amet felis. Praesent vestibulum risus id erat consequat, ac maximus mauris pulvinar. Etiam tempus interdum est
sed aliquet. In hac habitasse platea dictumst. Curabitur maximus sodales tempus. Suspendisse dapibus vestibulum blandit. Ut mollis interdum fringilla. Maecenas neque purus, rhoncus nec tortor at, elementum dictum sem. Aenean sit amet elit facilisis, euismod
felis non, elementum tortor. Mauris eget aliquam mauris, at volutpat mi. Donec in ligula ac lectus rhoncus pulvinar. Suspendisse a nulla id mi convallis congue quis vitae massa.

Found a more precise solution for this usecase. Simple adding below property in overlay class
overscroll-behavior: contain

Fix javascript sticky header jump when using css transition

I have the following sticky header that appears when you scroll down the page past 100px.
var scrollpos = window.scrollY;
var header = document.getElementById("masthead");
function add_class_on_scroll() {
header.classList.add("slide-in");
}
function remove_class_on_scroll() {
header.classList.remove("slide-in");
}
window.addEventListener('scroll', function(){
scrollpos = window.scrollY;
if(scrollpos > 188) {
add_class_on_scroll();
}
else {
remove_class_on_scroll();
}
});
html {
box-sizing: border-box;
}
body {
margin: 0;
}
.site {
position: relative;
}
.site-header {
position: relative;
top: -100px;
height: 100px;
background-color: #f5f5f5;
transition: top ease-in-out 1s;
display: flex;
justify-content: center;
align-items: center;
}
.slide-in {
position: sticky;
top: 0;
}
<div class="site">
<header id="masthead" class="site-header">
<p>I'm the site header</p>
</header>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce consectetur diam dui. Curabitur egestas augue non arcu tincidunt, ut fermentum mi lacinia. Sed vehicula non lectus at efficitur. Sed bibendum ipsum sed cursus condimentum. Maecenas non leo semper nisl consequat vestibulum. Maecenas vestibulum sodales metus, in varius ante efficitur a. Integer ipsum orci, ultrices facilisis mi sed, bibendum egestas ipsum. Maecenas nec elit non libero bibendum condimentum.</p>
<p>Suspendisse potenti. Vestibulum vestibulum, diam eleifend mattis dictum, ante nulla semper est, at fermentum leo ligula sit amet nunc. Nullam gravida sem et urna maximus, eu efficitur eros hendrerit. Aliquam convallis facilisis mi sed congue. Praesent pulvinar vehicula urna, quis iaculis nisi vestibulum non. Aliquam pulvinar risus id blandit malesuada. Proin pharetra, nibh nec consequat fringilla, erat quam sollicitudin orci, id tincidunt ex justo in diam. Vestibulum eleifend metus urna, at interdum arcu venenatis ac. Nam euismod, lorem ac fringilla bibendum, dui massa volutpat nulla, non aliquam nisi ligula id ligula. Sed iaculis viverra nisi eget mattis.</p>
<p>Phasellus ac lacus tincidunt, vestibulum dolor eget, dictum massa. Fusce fringilla lorem sed ex placerat ornare. Aenean in consequat mauris, in dapibus enim. Sed commodo posuere est ut lobortis. Nulla elementum pretium ante eu elementum. Nulla facilisi. Curabitur quam velit, varius nec leo vitae, scelerisque dignissim justo.</p>
<p>Donec nec rutrum tortor, ac semper dolor. Maecenas id laoreet orci. Vivamus tincidunt commodo nisi sit amet posuere. Vestibulum pretium risus ante, non mattis ex eleifend quis. Ut id scelerisque tortor, quis ullamcorper orci. Sed vestibulum pharetra nibh. Donec ultricies nibh neque, vitae ullamcorper elit rhoncus a. Nunc odio turpis, euismod at tempus vitae, aliquet in lectus. Praesent vehicula lectus et enim fringilla feugiat.</p>
<p>Quisque eleifend libero a mi sodales vehicula. Aliquam erat volutpat. Maecenas dignissim rutrum auctor. Vestibulum pretium lacus quis vehicula placerat. Cras placerat leo non libero imperdiet, ac tristique ligula feugiat. Aliquam semper aliquam ligula, sed fermentum erat sagittis eget. Donec lorem urna, tristique at suscipit sed, euismod nec odio.</p>
<p>Aliquam lobortis lorem non libero varius, in ultricies ipsum ornare. Sed imperdiet elementum ligula, non blandit nunc imperdiet quis. Vivamus ut dictum est, quis euismod orci. Sed eget magna ac massa gravida porta. Donec nibh massa, scelerisque ac tempus a, fringilla vel nunc. Aenean malesuada pulvinar quam sed pretium. Aenean id dui a neque lobortis dictum vitae ac ipsum. Donec interdum ligula mattis enim facilisis vehicula facilisis id eros. Donec eu dolor sit amet neque ultricies faucibus nec et arcu. Proin vulputate elementum dui nec gravida. Nunc odio justo, consequat non tortor ut, rutrum mollis magna. Donec ac leo elit. Fusce hendrerit maximus est mattis porta. Praesent malesuada interdum orci nec viverra. Mauris porta ligula in auctor tincidunt. Suspendisse potenti.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse aliquet purus quis enim egestas tincidunt. Maecenas mattis ut metus eget viverra. Praesent hendrerit odio tincidunt, feugiat metus quis, gravida turpis. Aenean sed mauris commodo libero placerat malesuada eu accumsan lacus. Mauris mi tortor, fringilla nec velit tristique, eleifend pulvinar nunc. Integer nec accumsan mauris. Maecenas mattis, est sit amet congue consectetur, mi massa dignissim urna, ut efficitur orci est et ex. In ac lorem viverra, dictum libero at, pellentesque neque. Cras congue volutpat diam ac luctus. Etiam iaculis augue enim, eget pharetra ligula posuere ac.</p>
<p>Curabitur elementum malesuada nulla, nec semper lectus pretium eget. Proin tempor tortor sed lectus sollicitudin bibendum. Donec non sodales nibh. Suspendisse gravida, purus eget fringilla sagittis, quam ex tempus nisl, quis consectetur orci elit in nisi. Nam tincidunt finibus leo sed consectetur. Etiam sit amet ex aliquet, varius augue ac, consequat nisl. Integer ac dignissim lacus. Ut at facilisis ligula, vel viverra mauris. Phasellus ut egestas turpis. Phasellus sit amet quam ut dui hendrerit tincidunt eget et nisi. Donec tempor dapibus enim. Etiam eget nunc eleifend, hendrerit diam vitae, fringilla mi. Nunc a condimentum felis.</p>
<p>Vestibulum pharetra ultricies ultrices. Vestibulum cursus ante felis. Sed aliquet, elit eget posuere consequat, mauris arcu tincidunt dolor, at porta erat orci a felis. In quis viverra diam. Vestibulum porta nisi purus, lacinia placerat ligula posuere et. Ut aliquet commodo sem non luctus. Mauris suscipit justo eget turpis interdum blandit eu eu purus. Integer condimentum blandit sapien id pellentesque. In convallis odio in neque accumsan, vitae volutpat mi ornare. Vivamus a augue quis tellus facilisis luctus. Integer laoreet, tortor vel interdum blandit, arcu arcu ornare nunc, in cursus mi tellus vitae mauris. Etiam molestie nibh sapien, id auctor nulla ullamcorper in. Maecenas vel justo est. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Pellentesque porttitor lacinia ipsum ultricies rutrum.</p>
<p>Quisque varius tempor tellus. Morbi eleifend venenatis nunc, sed sodales tortor vulputate a. Quisque non risus ut nunc viverra suscipit non rhoncus neque. Aliquam at efficitur ligula. Ut diam tortor, feugiat ut rutrum ac, imperdiet in nibh. Proin at odio nec mi aliquet efficitur lobortis vitae turpis. Curabitur molestie odio nec laoreet luctus. Praesent vel ligula at felis convallis accumsan. Fusce cursus nisi orci, in placerat lorem congue convallis. Praesent pellentesque consequat elit, nec interdum velit tincidunt a.</p>
<p>Nullam efficitur est ligula, non fringilla massa pulvinar at. Aliquam non porta tortor. Aenean sit amet mollis turpis. Curabitur convallis sollicitudin leo a aliquam. Praesent vitae semper odio. Curabitur condimentum lorem eget dapibus volutpat. Vivamus id tortor erat. Cras mollis varius dolor. Donec laoreet, ipsum sed sollicitudin placerat, nulla diam consequat nibh, sit amet lobortis diam turpis vitae dui. Aliquam dapibus diam nec porttitor egestas. Nam eu tristique orci, in tristique tortor. Sed est ex, scelerisque sed ligula a, condimentum maximus augue. Phasellus malesuada augue libero, eu consectetur magna rhoncus a. Sed ipsum tellus, viverra ut suscipit id, efficitur eu est.</p>
<p>Proin sagittis magna ac enim varius maximus. Quisque vel neque tincidunt, malesuada diam ut, bibendum tortor. Praesent feugiat ante egestas, convallis nisi at, ornare lacus. Nunc non sem vel orci posuere efficitur. Morbi accumsan ipsum ut turpis rhoncus, id ultricies nulla mollis. Sed purus diam, pellentesque vitae quam ac, hendrerit suscipit eros. Quisque euismod, nunc sit amet varius fermentum, sapien purus condimentum nunc, sit amet ultricies lacus turpis eu ante. Donec pulvinar iaculis blandit. Morbi quis ligula lorem. In in bibendum libero. Integer convallis elit eu ex lobortis, nec luctus libero ultrices. Nam ullamcorper posuere cursus. Ut feugiat, mauris scelerisque facilisis eleifend, magna massa maximus mi, at porttitor ex leo sit amet nisl. Praesent ligula purus, aliquet in commodo sit amet, porttitor ac velit. Nunc sodales elementum arcu, et fringilla libero ultricies ut. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae;</p>
<p>Ut nec interdum magna. Aenean sit amet vehicula neque. Nunc tincidunt ultrices tellus vitae pretium. Pellentesque posuere ultricies diam, ullamcorper hendrerit nibh ullamcorper in. Maecenas ut est et elit venenatis vestibulum. Vestibulum id hendrerit eros. Aliquam efficitur est elit, nec malesuada purus posuere ac. Morbi eu est porttitor, condimentum arcu eget, pretium nisi. Aliquam viverra enim vitae vulputate viverra. Nullam vitae metus sodales, finibus justo vel, efficitur neque. Morbi euismod rutrum tempus. Donec cursus lectus sed commodo vestibulum. Vivamus eu ligula consequat, cursus neque ac, tempus sapien.</p>
<p>Donec vel urna ac lacus consectetur cursus. Donec tempor justo ornare libero eleifend, id ultrices nisi tincidunt. Donec ac orci eget ligula auctor pretium sit amet eu purus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc ac luctus elit. Sed consectetur, elit at consequat mollis, justo lectus pellentesque lectus, malesuada congue erat velit eu tortor. Donec ullamcorper nibh a dui convallis venenatis. In a ullamcorper nulla, id porttitor nunc. Praesent elit orci, aliquam vel nunc sed, scelerisque tincidunt ex. Duis consequat dignissim lacus, id porttitor libero fringilla quis. Fusce libero dolor, consectetur id pharetra at, tristique eget sem. Donec et mollis nunc, in aliquet ligula.</p>
<p>Cras pellentesque imperdiet laoreet. Aliquam erat volutpat. Pellentesque ultrices aliquet pretium. Integer auctor sem magna, eget condimentum sapien elementum ac. Nunc finibus feugiat aliquet. Quisque libero ligula, congue sit amet vestibulum at, euismod a elit. Vivamus eget augue et nunc lobortis hendrerit sed ut turpis. Donec et ante commodo, faucibus felis in, viverra libero. Aliquam erat volutpat. Duis euismod magna eget metus tincidunt dapibus. Curabitur malesuada efficitur venenatis. Fusce eu nisi sed purus hendrerit consectetur et ac tellus. Cras placerat dignissim mauris, egestas bibendum eros pulvinar non. Quisque finibus eget elit eu placerat. Mauris diam metus, imperdiet et libero sit amet, venenatis finibus libero. Cras eget laoreet justo.</p>
<p>Proin sit amet orci nec magna tincidunt vehicula. Praesent mauris elit, ullamcorper eget odio sed, pulvinar luctus tellus. Mauris tempus, magna tempus vulputate efficitur, elit lectus accumsan est, ultricies volutpat nulla ante in sapien. Morbi condimentum erat sit amet mattis ullamcorper. Nullam tincidunt nunc vel leo vulputate porttitor. Donec efficitur hendrerit nunc, non viverra libero scelerisque ac. Ut gravida nec ante vitae facilisis. Pellentesque sagittis urna sit amet egestas vestibulum.</p>
<p>Duis tempus dui in interdum ullamcorper. Curabitur vulputate laoreet est, dictum condimentum sapien vehicula eget. Pellentesque ac dictum mi. Sed metus arcu, sodales lobortis urna vel, feugiat ullamcorper est. Integer lacinia, lacus ac tristique convallis, nunc purus bibendum arcu, at eleifend enim est non ipsum. Nam iaculis elementum convallis. Nulla tempus odio vel porta ullamcorper. Donec dignissim ut elit vestibulum faucibus.</p>
<p>Aenean a pulvinar ante. Nunc rutrum volutpat tincidunt. Aenean ultricies sodales mauris eget suscipit. Proin rhoncus ornare lacus in auctor. Duis nec urna sit amet tortor ullamcorper sagittis non nec massa. Nullam dolor sem, laoreet sit amet elit in, iaculis consequat turpis. Morbi semper nulla vel egestas ultrices. Suspendisse id est iaculis, facilisis metus non, accumsan augue. Vestibulum arcu nulla, porta euismod felis et, sollicitudin vehicula ligula. Pellentesque ac dolor ac eros gravida tempus. Etiam sed sem ultrices, tincidunt purus eget, porttitor eros. Vivamus ut tempor sem. Donec interdum efficitur mollis.</p>
<p>In a laoreet ante. Suspendisse potenti. In sit amet enim elit. In arcu mauris, luctus a urna eget, aliquet accumsan tellus. Maecenas egestas, sem nec commodo tincidunt, metus tortor volutpat libero, eget tristique metus velit sed eros. Fusce bibendum lacus id lectus semper, id volutpat turpis dictum. Vestibulum eu elit eget eros dictum cursus. Mauris consectetur dolor eu ligula condimentum aliquam at id dui. Vestibulum non dolor ante. Morbi a dapibus erat. Nulla placerat mi id neque rhoncus, et semper dolor hendrerit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas quam sem, dapibus non aliquet iaculis, mollis id urna.</p>
<p>Integer pellentesque enim a justo venenatis sodales. Etiam in nisl ipsum. Vestibulum fringilla dignissim faucibus. Nam pellentesque, mi ac accumsan mattis, elit velit bibendum lacus, id scelerisque ligula sapien id diam. Sed condimentum rutrum metus, in sollicitudin quam ultricies ut. Phasellus at lobortis arcu. Duis auctor, arcu id hendrerit faucibus, odio turpis finibus mi, molestie tempus ex lorem suscipit enim. Nam pretium laoreet ipsum. Donec eu mauris euismod, varius mi id, elementum leo. Integer ultricies nulla massa, in consequat lectus pellentesque ut. Ut eu risus mi. Pellentesque id ligula sodales, maximus lorem at, bibendum velit. Etiam vitae eros vitae quam lacinia egestas. Sed ullamcorper egestas magna, eget suscipit nulla euismod a. Morbi accumsan arcu a vulputate iaculis.</p>
</div>
The problem I'm having is when I scroll back up and the .slide-in class is removed, the header snaps back into position without a transition. This looks a little buggy.
I've used transition: top ease-in-out 1s; on .site-header but this doesn't have an effect when the class is removed. Is there a way to apply a transition in reverse for when the class is removed?
I'm using position: relative; instead of fixed position: fixed; because I want the header to be hidden when you're at the top.

This is because you used position relative & sticky in two different situation.
relative is related to it's parent div
static is related to it's screen
var scrollpos = window.scrollY;
var header = document.getElementById("masthead");
function add_class_on_scroll() {
header.classList.add("slide-in");
}
function remove_class_on_scroll() {
header.classList.remove("slide-in");
}
window.addEventListener('scroll', function(){
scrollpos = window.scrollY;
if(scrollpos > 188) {
add_class_on_scroll();
}
else {
remove_class_on_scroll();
}
});
html {
box-sizing: border-box;
}
body {
margin: 0;
}
.site {
position: relative;
overflow:hidden;
}
.site-header {
position: fixed;
height: 100px;
top: -100px;
background-color: #f5f5f5;
transition: top ease-in-out 1s;
display: flex;
justify-content: center;
align-items: center;
Width:100%;
overflow: hidden;
}
.slide-in {
position: fixed;
top: 0px;
}
<div class="site">
<header id="masthead" class="site-header">
<p>I'm the site header</p>
</header>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce consectetur diam dui. Curabitur egestas augue non arcu tincidunt, ut fermentum mi lacinia. Sed vehicula non lectus at efficitur. Sed bibendum ipsum sed cursus condimentum. Maecenas non leo semper nisl consequat vestibulum. Maecenas vestibulum sodales metus, in varius ante efficitur a. Integer ipsum orci, ultrices facilisis mi sed, bibendum egestas ipsum. Maecenas nec elit non libero bibendum condimentum.</p>
<p>Suspendisse potenti. Vestibulum vestibulum, diam eleifend mattis dictum, ante nulla semper est, at fermentum leo ligula sit amet nunc. Nullam gravida sem et urna maximus, eu efficitur eros hendrerit. Aliquam convallis facilisis mi sed congue. Praesent pulvinar vehicula urna, quis iaculis nisi vestibulum non. Aliquam pulvinar risus id blandit malesuada. Proin pharetra, nibh nec consequat fringilla, erat quam sollicitudin orci, id tincidunt ex justo in diam. Vestibulum eleifend metus urna, at interdum arcu venenatis ac. Nam euismod, lorem ac fringilla bibendum, dui massa volutpat nulla, non aliquam nisi ligula id ligula. Sed iaculis viverra nisi eget mattis.</p>
<p>Phasellus ac lacus tincidunt, vestibulum dolor eget, dictum massa. Fusce fringilla lorem sed ex placerat ornare. Aenean in consequat mauris, in dapibus enim. Sed commodo posuere est ut lobortis. Nulla elementum pretium ante eu elementum. Nulla facilisi. Curabitur quam velit, varius nec leo vitae, scelerisque dignissim justo.</p>
<p>Donec nec rutrum tortor, ac semper dolor. Maecenas id laoreet orci. Vivamus tincidunt commodo nisi sit amet posuere. Vestibulum pretium risus ante, non mattis ex eleifend quis. Ut id scelerisque tortor, quis ullamcorper orci. Sed vestibulum pharetra nibh. Donec ultricies nibh neque, vitae ullamcorper elit rhoncus a. Nunc odio turpis, euismod at tempus vitae, aliquet in lectus. Praesent vehicula lectus et enim fringilla feugiat.</p>
<p>Quisque eleifend libero a mi sodales vehicula. Aliquam erat volutpat. Maecenas dignissim rutrum auctor. Vestibulum pretium lacus quis vehicula placerat. Cras placerat leo non libero imperdiet, ac tristique ligula feugiat. Aliquam semper aliquam ligula, sed fermentum erat sagittis eget. Donec lorem urna, tristique at suscipit sed, euismod nec odio.</p>
<p>Aliquam lobortis lorem non libero varius, in ultricies ipsum ornare. Sed imperdiet elementum ligula, non blandit nunc imperdiet quis. Vivamus ut dictum est, quis euismod orci. Sed eget magna ac massa gravida porta. Donec nibh massa, scelerisque ac tempus a, fringilla vel nunc. Aenean malesuada pulvinar quam sed pretium. Aenean id dui a neque lobortis dictum vitae ac ipsum. Donec interdum ligula mattis enim facilisis vehicula facilisis id eros. Donec eu dolor sit amet neque ultricies faucibus nec et arcu. Proin vulputate elementum dui nec gravida. Nunc odio justo, consequat non tortor ut, rutrum mollis magna. Donec ac leo elit. Fusce hendrerit maximus est mattis porta. Praesent malesuada interdum orci nec viverra. Mauris porta ligula in auctor tincidunt. Suspendisse potenti.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse aliquet purus quis enim egestas tincidunt. Maecenas mattis ut metus eget viverra. Praesent hendrerit odio tincidunt, feugiat metus quis, gravida turpis. Aenean sed mauris commodo libero placerat malesuada eu accumsan lacus. Mauris mi tortor, fringilla nec velit tristique, eleifend pulvinar nunc. Integer nec accumsan mauris. Maecenas mattis, est sit amet congue consectetur, mi massa dignissim urna, ut efficitur orci est et ex. In ac lorem viverra, dictum libero at, pellentesque neque. Cras congue volutpat diam ac luctus. Etiam iaculis augue enim, eget pharetra ligula posuere ac.</p>
<p>Curabitur elementum malesuada nulla, nec semper lectus pretium eget. Proin tempor tortor sed lectus sollicitudin bibendum. Donec non sodales nibh. Suspendisse gravida, purus eget fringilla sagittis, quam ex tempus nisl, quis consectetur orci elit in nisi. Nam tincidunt finibus leo sed consectetur. Etiam sit amet ex aliquet, varius augue ac, consequat nisl. Integer ac dignissim lacus. Ut at facilisis ligula, vel viverra mauris. Phasellus ut egestas turpis. Phasellus sit amet quam ut dui hendrerit tincidunt eget et nisi. Donec tempor dapibus enim. Etiam eget nunc eleifend, hendrerit diam vitae, fringilla mi. Nunc a condimentum felis.</p>
<p>Vestibulum pharetra ultricies ultrices. Vestibulum cursus ante felis. Sed aliquet, elit eget posuere consequat, mauris arcu tincidunt dolor, at porta erat orci a felis. In quis viverra diam. Vestibulum porta nisi purus, lacinia placerat ligula posuere et. Ut aliquet commodo sem non luctus. Mauris suscipit justo eget turpis interdum blandit eu eu purus. Integer condimentum blandit sapien id pellentesque. In convallis odio in neque accumsan, vitae volutpat mi ornare. Vivamus a augue quis tellus facilisis luctus. Integer laoreet, tortor vel interdum blandit, arcu arcu ornare nunc, in cursus mi tellus vitae mauris. Etiam molestie nibh sapien, id auctor nulla ullamcorper in. Maecenas vel justo est. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Pellentesque porttitor lacinia ipsum ultricies rutrum.</p>
<p>Quisque varius tempor tellus. Morbi eleifend venenatis nunc, sed sodales tortor vulputate a. Quisque non risus ut nunc viverra suscipit non rhoncus neque. Aliquam at efficitur ligula. Ut diam tortor, feugiat ut rutrum ac, imperdiet in nibh. Proin at odio nec mi aliquet efficitur lobortis vitae turpis. Curabitur molestie odio nec laoreet luctus. Praesent vel ligula at felis convallis accumsan. Fusce cursus nisi orci, in placerat lorem congue convallis. Praesent pellentesque consequat elit, nec interdum velit tincidunt a.</p>
<p>Nullam efficitur est ligula, non fringilla massa pulvinar at. Aliquam non porta tortor. Aenean sit amet mollis turpis. Curabitur convallis sollicitudin leo a aliquam. Praesent vitae semper odio. Curabitur condimentum lorem eget dapibus volutpat. Vivamus id tortor erat. Cras mollis varius dolor. Donec laoreet, ipsum sed sollicitudin placerat, nulla diam consequat nibh, sit amet lobortis diam turpis vitae dui. Aliquam dapibus diam nec porttitor egestas. Nam eu tristique orci, in tristique tortor. Sed est ex, scelerisque sed ligula a, condimentum maximus augue. Phasellus malesuada augue libero, eu consectetur magna rhoncus a. Sed ipsum tellus, viverra ut suscipit id, efficitur eu est.</p>
<p>Proin sagittis magna ac enim varius maximus. Quisque vel neque tincidunt, malesuada diam ut, bibendum tortor. Praesent feugiat ante egestas, convallis nisi at, ornare lacus. Nunc non sem vel orci posuere efficitur. Morbi accumsan ipsum ut turpis rhoncus, id ultricies nulla mollis. Sed purus diam, pellentesque vitae quam ac, hendrerit suscipit eros. Quisque euismod, nunc sit amet varius fermentum, sapien purus condimentum nunc, sit amet ultricies lacus turpis eu ante. Donec pulvinar iaculis blandit. Morbi quis ligula lorem. In in bibendum libero. Integer convallis elit eu ex lobortis, nec luctus libero ultrices. Nam ullamcorper posuere cursus. Ut feugiat, mauris scelerisque facilisis eleifend, magna massa maximus mi, at porttitor ex leo sit amet nisl. Praesent ligula purus, aliquet in commodo sit amet, porttitor ac velit. Nunc sodales elementum arcu, et fringilla libero ultricies ut. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae;</p>
<p>Ut nec interdum magna. Aenean sit amet vehicula neque. Nunc tincidunt ultrices tellus vitae pretium. Pellentesque posuere ultricies diam, ullamcorper hendrerit nibh ullamcorper in. Maecenas ut est et elit venenatis vestibulum. Vestibulum id hendrerit eros. Aliquam efficitur est elit, nec malesuada purus posuere ac. Morbi eu est porttitor, condimentum arcu eget, pretium nisi. Aliquam viverra enim vitae vulputate viverra. Nullam vitae metus sodales, finibus justo vel, efficitur neque. Morbi euismod rutrum tempus. Donec cursus lectus sed commodo vestibulum. Vivamus eu ligula consequat, cursus neque ac, tempus sapien.</p>
<p>Donec vel urna ac lacus consectetur cursus. Donec tempor justo ornare libero eleifend, id ultrices nisi tincidunt. Donec ac orci eget ligula auctor pretium sit amet eu purus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc ac luctus elit. Sed consectetur, elit at consequat mollis, justo lectus pellentesque lectus, malesuada congue erat velit eu tortor. Donec ullamcorper nibh a dui convallis venenatis. In a ullamcorper nulla, id porttitor nunc. Praesent elit orci, aliquam vel nunc sed, scelerisque tincidunt ex. Duis consequat dignissim lacus, id porttitor libero fringilla quis. Fusce libero dolor, consectetur id pharetra at, tristique eget sem. Donec et mollis nunc, in aliquet ligula.</p>
<p>Cras pellentesque imperdiet laoreet. Aliquam erat volutpat. Pellentesque ultrices aliquet pretium. Integer auctor sem magna, eget condimentum sapien elementum ac. Nunc finibus feugiat aliquet. Quisque libero ligula, congue sit amet vestibulum at, euismod a elit. Vivamus eget augue et nunc lobortis hendrerit sed ut turpis. Donec et ante commodo, faucibus felis in, viverra libero. Aliquam erat volutpat. Duis euismod magna eget metus tincidunt dapibus. Curabitur malesuada efficitur venenatis. Fusce eu nisi sed purus hendrerit consectetur et ac tellus. Cras placerat dignissim mauris, egestas bibendum eros pulvinar non. Quisque finibus eget elit eu placerat. Mauris diam metus, imperdiet et libero sit amet, venenatis finibus libero. Cras eget laoreet justo.</p>
<p>Proin sit amet orci nec magna tincidunt vehicula. Praesent mauris elit, ullamcorper eget odio sed, pulvinar luctus tellus. Mauris tempus, magna tempus vulputate efficitur, elit lectus accumsan est, ultricies volutpat nulla ante in sapien. Morbi condimentum erat sit amet mattis ullamcorper. Nullam tincidunt nunc vel leo vulputate porttitor. Donec efficitur hendrerit nunc, non viverra libero scelerisque ac. Ut gravida nec ante vitae facilisis. Pellentesque sagittis urna sit amet egestas vestibulum.</p>
<p>Duis tempus dui in interdum ullamcorper. Curabitur vulputate laoreet est, dictum condimentum sapien vehicula eget. Pellentesque ac dictum mi. Sed metus arcu, sodales lobortis urna vel, feugiat ullamcorper est. Integer lacinia, lacus ac tristique convallis, nunc purus bibendum arcu, at eleifend enim est non ipsum. Nam iaculis elementum convallis. Nulla tempus odio vel porta ullamcorper. Donec dignissim ut elit vestibulum faucibus.</p>
<p>Aenean a pulvinar ante. Nunc rutrum volutpat tincidunt. Aenean ultricies sodales mauris eget suscipit. Proin rhoncus ornare lacus in auctor. Duis nec urna sit amet tortor ullamcorper sagittis non nec massa. Nullam dolor sem, laoreet sit amet elit in, iaculis consequat turpis. Morbi semper nulla vel egestas ultrices. Suspendisse id est iaculis, facilisis metus non, accumsan augue. Vestibulum arcu nulla, porta euismod felis et, sollicitudin vehicula ligula. Pellentesque ac dolor ac eros gravida tempus. Etiam sed sem ultrices, tincidunt purus eget, porttitor eros. Vivamus ut tempor sem. Donec interdum efficitur mollis.</p>
<p>In a laoreet ante. Suspendisse potenti. In sit amet enim elit. In arcu mauris, luctus a urna eget, aliquet accumsan tellus. Maecenas egestas, sem nec commodo tincidunt, metus tortor volutpat libero, eget tristique metus velit sed eros. Fusce bibendum lacus id lectus semper, id volutpat turpis dictum. Vestibulum eu elit eget eros dictum cursus. Mauris consectetur dolor eu ligula condimentum aliquam at id dui. Vestibulum non dolor ante. Morbi a dapibus erat. Nulla placerat mi id neque rhoncus, et semper dolor hendrerit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas quam sem, dapibus non aliquet iaculis, mollis id urna.</p>
<p>Integer pellentesque enim a justo venenatis sodales. Etiam in nisl ipsum. Vestibulum fringilla dignissim faucibus. Nam pellentesque, mi ac accumsan mattis, elit velit bibendum lacus, id scelerisque ligula sapien id diam. Sed condimentum rutrum metus, in sollicitudin quam ultricies ut. Phasellus at lobortis arcu. Duis auctor, arcu id hendrerit faucibus, odio turpis finibus mi, molestie tempus ex lorem suscipit enim. Nam pretium laoreet ipsum. Donec eu mauris euismod, varius mi id, elementum leo. Integer ultricies nulla massa, in consequat lectus pellentesque ut. Ut eu risus mi. Pellentesque id ligula sodales, maximus lorem at, bibendum velit. Etiam vitae eros vitae quam lacinia egestas. Sed ullamcorper egestas magna, eget suscipit nulla euismod a. Morbi accumsan arcu a vulputate iaculis.</p>
</div>

The problem you are facing is due to a position change, you are having its one position to another and that is causing this issue. Try to have same position, either sticky or fixed.
var scrollpos = window.scrollY;
var header = document.getElementById("masthead");
function add_class_on_scroll() {
header.classList.add("slide-in");
}
function remove_class_on_scroll() {
header.classList.remove("slide-in");
}
window.addEventListener('scroll', function(){
scrollpos = window.scrollY;
if(scrollpos > 188) {
add_class_on_scroll();
}
else {
remove_class_on_scroll();
}
});
html {
box-sizing: border-box;
}
body {
margin: 0;
}
.site {
position: relative;
overflow:hidden;
}
.site-header {
position: fixed;
top: -100px;
height: 0;
background-color: #f5f5f5;
transition: all ease-in-out 1s;
display: flex;
justify-content: center;
align-items: center;
Width:100%;
left: 0;
}
.slide-in {
position: fixed;
height:100px;
top: 0;
}
<div class="site">
<header id="masthead" class="site-header">
<p>I'm the site header</p>
</header>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce consectetur diam dui. Curabitur egestas augue non arcu tincidunt, ut fermentum mi lacinia. Sed vehicula non lectus at efficitur. Sed bibendum ipsum sed cursus condimentum. Maecenas non leo semper nisl consequat vestibulum. Maecenas vestibulum sodales metus, in varius ante efficitur a. Integer ipsum orci, ultrices facilisis mi sed, bibendum egestas ipsum. Maecenas nec elit non libero bibendum condimentum.</p>
<p>Suspendisse potenti. Vestibulum vestibulum, diam eleifend mattis dictum, ante nulla semper est, at fermentum leo ligula sit amet nunc. Nullam gravida sem et urna maximus, eu efficitur eros hendrerit. Aliquam convallis facilisis mi sed congue. Praesent pulvinar vehicula urna, quis iaculis nisi vestibulum non. Aliquam pulvinar risus id blandit malesuada. Proin pharetra, nibh nec consequat fringilla, erat quam sollicitudin orci, id tincidunt ex justo in diam. Vestibulum eleifend metus urna, at interdum arcu venenatis ac. Nam euismod, lorem ac fringilla bibendum, dui massa volutpat nulla, non aliquam nisi ligula id ligula. Sed iaculis viverra nisi eget mattis.</p>
<p>Phasellus ac lacus tincidunt, vestibulum dolor eget, dictum massa. Fusce fringilla lorem sed ex placerat ornare. Aenean in consequat mauris, in dapibus enim. Sed commodo posuere est ut lobortis. Nulla elementum pretium ante eu elementum. Nulla facilisi. Curabitur quam velit, varius nec leo vitae, scelerisque dignissim justo.</p>
<p>Donec nec rutrum tortor, ac semper dolor. Maecenas id laoreet orci. Vivamus tincidunt commodo nisi sit amet posuere. Vestibulum pretium risus ante, non mattis ex eleifend quis. Ut id scelerisque tortor, quis ullamcorper orci. Sed vestibulum pharetra nibh. Donec ultricies nibh neque, vitae ullamcorper elit rhoncus a. Nunc odio turpis, euismod at tempus vitae, aliquet in lectus. Praesent vehicula lectus et enim fringilla feugiat.</p>
<p>Quisque eleifend libero a mi sodales vehicula. Aliquam erat volutpat. Maecenas dignissim rutrum auctor. Vestibulum pretium lacus quis vehicula placerat. Cras placerat leo non libero imperdiet, ac tristique ligula feugiat. Aliquam semper aliquam ligula, sed fermentum erat sagittis eget. Donec lorem urna, tristique at suscipit sed, euismod nec odio.</p>
<p>Aliquam lobortis lorem non libero varius, in ultricies ipsum ornare. Sed imperdiet elementum ligula, non blandit nunc imperdiet quis. Vivamus ut dictum est, quis euismod orci. Sed eget magna ac massa gravida porta. Donec nibh massa, scelerisque ac tempus a, fringilla vel nunc. Aenean malesuada pulvinar quam sed pretium. Aenean id dui a neque lobortis dictum vitae ac ipsum. Donec interdum ligula mattis enim facilisis vehicula facilisis id eros. Donec eu dolor sit amet neque ultricies faucibus nec et arcu. Proin vulputate elementum dui nec gravida. Nunc odio justo, consequat non tortor ut, rutrum mollis magna. Donec ac leo elit. Fusce hendrerit maximus est mattis porta. Praesent malesuada interdum orci nec viverra. Mauris porta ligula in auctor tincidunt. Suspendisse potenti.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse aliquet purus quis enim egestas tincidunt. Maecenas mattis ut metus eget viverra. Praesent hendrerit odio tincidunt, feugiat metus quis, gravida turpis. Aenean sed mauris commodo libero placerat malesuada eu accumsan lacus. Mauris mi tortor, fringilla nec velit tristique, eleifend pulvinar nunc. Integer nec accumsan mauris. Maecenas mattis, est sit amet congue consectetur, mi massa dignissim urna, ut efficitur orci est et ex. In ac lorem viverra, dictum libero at, pellentesque neque. Cras congue volutpat diam ac luctus. Etiam iaculis augue enim, eget pharetra ligula posuere ac.</p>
<p>Curabitur elementum malesuada nulla, nec semper lectus pretium eget. Proin tempor tortor sed lectus sollicitudin bibendum. Donec non sodales nibh. Suspendisse gravida, purus eget fringilla sagittis, quam ex tempus nisl, quis consectetur orci elit in nisi. Nam tincidunt finibus leo sed consectetur. Etiam sit amet ex aliquet, varius augue ac, consequat nisl. Integer ac dignissim lacus. Ut at facilisis ligula, vel viverra mauris. Phasellus ut egestas turpis. Phasellus sit amet quam ut dui hendrerit tincidunt eget et nisi. Donec tempor dapibus enim. Etiam eget nunc eleifend, hendrerit diam vitae, fringilla mi. Nunc a condimentum felis.</p>
<p>Vestibulum pharetra ultricies ultrices. Vestibulum cursus ante felis. Sed aliquet, elit eget posuere consequat, mauris arcu tincidunt dolor, at porta erat orci a felis. In quis viverra diam. Vestibulum porta nisi purus, lacinia placerat ligula posuere et. Ut aliquet commodo sem non luctus. Mauris suscipit justo eget turpis interdum blandit eu eu purus. Integer condimentum blandit sapien id pellentesque. In convallis odio in neque accumsan, vitae volutpat mi ornare. Vivamus a augue quis tellus facilisis luctus. Integer laoreet, tortor vel interdum blandit, arcu arcu ornare nunc, in cursus mi tellus vitae mauris. Etiam molestie nibh sapien, id auctor nulla ullamcorper in. Maecenas vel justo est. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Pellentesque porttitor lacinia ipsum ultricies rutrum.</p>
<p>Quisque varius tempor tellus. Morbi eleifend venenatis nunc, sed sodales tortor vulputate a. Quisque non risus ut nunc viverra suscipit non rhoncus neque. Aliquam at efficitur ligula. Ut diam tortor, feugiat ut rutrum ac, imperdiet in nibh. Proin at odio nec mi aliquet efficitur lobortis vitae turpis. Curabitur molestie odio nec laoreet luctus. Praesent vel ligula at felis convallis accumsan. Fusce cursus nisi orci, in placerat lorem congue convallis. Praesent pellentesque consequat elit, nec interdum velit tincidunt a.</p>
<p>Nullam efficitur est ligula, non fringilla massa pulvinar at. Aliquam non porta tortor. Aenean sit amet mollis turpis. Curabitur convallis sollicitudin leo a aliquam. Praesent vitae semper odio. Curabitur condimentum lorem eget dapibus volutpat. Vivamus id tortor erat. Cras mollis varius dolor. Donec laoreet, ipsum sed sollicitudin placerat, nulla diam consequat nibh, sit amet lobortis diam turpis vitae dui. Aliquam dapibus diam nec porttitor egestas. Nam eu tristique orci, in tristique tortor. Sed est ex, scelerisque sed ligula a, condimentum maximus augue. Phasellus malesuada augue libero, eu consectetur magna rhoncus a. Sed ipsum tellus, viverra ut suscipit id, efficitur eu est.</p>
<p>Proin sagittis magna ac enim varius maximus. Quisque vel neque tincidunt, malesuada diam ut, bibendum tortor. Praesent feugiat ante egestas, convallis nisi at, ornare lacus. Nunc non sem vel orci posuere efficitur. Morbi accumsan ipsum ut turpis rhoncus, id ultricies nulla mollis. Sed purus diam, pellentesque vitae quam ac, hendrerit suscipit eros. Quisque euismod, nunc sit amet varius fermentum, sapien purus condimentum nunc, sit amet ultricies lacus turpis eu ante. Donec pulvinar iaculis blandit. Morbi quis ligula lorem. In in bibendum libero. Integer convallis elit eu ex lobortis, nec luctus libero ultrices. Nam ullamcorper posuere cursus. Ut feugiat, mauris scelerisque facilisis eleifend, magna massa maximus mi, at porttitor ex leo sit amet nisl. Praesent ligula purus, aliquet in commodo sit amet, porttitor ac velit. Nunc sodales elementum arcu, et fringilla libero ultricies ut. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae;</p>
<p>Ut nec interdum magna. Aenean sit amet vehicula neque. Nunc tincidunt ultrices tellus vitae pretium. Pellentesque posuere ultricies diam, ullamcorper hendrerit nibh ullamcorper in. Maecenas ut est et elit venenatis vestibulum. Vestibulum id hendrerit eros. Aliquam efficitur est elit, nec malesuada purus posuere ac. Morbi eu est porttitor, condimentum arcu eget, pretium nisi. Aliquam viverra enim vitae vulputate viverra. Nullam vitae metus sodales, finibus justo vel, efficitur neque. Morbi euismod rutrum tempus. Donec cursus lectus sed commodo vestibulum. Vivamus eu ligula consequat, cursus neque ac, tempus sapien.</p>
<p>Donec vel urna ac lacus consectetur cursus. Donec tempor justo ornare libero eleifend, id ultrices nisi tincidunt. Donec ac orci eget ligula auctor pretium sit amet eu purus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc ac luctus elit. Sed consectetur, elit at consequat mollis, justo lectus pellentesque lectus, malesuada congue erat velit eu tortor. Donec ullamcorper nibh a dui convallis venenatis. In a ullamcorper nulla, id porttitor nunc. Praesent elit orci, aliquam vel nunc sed, scelerisque tincidunt ex. Duis consequat dignissim lacus, id porttitor libero fringilla quis. Fusce libero dolor, consectetur id pharetra at, tristique eget sem. Donec et mollis nunc, in aliquet ligula.</p>
<p>Cras pellentesque imperdiet laoreet. Aliquam erat volutpat. Pellentesque ultrices aliquet pretium. Integer auctor sem magna, eget condimentum sapien elementum ac. Nunc finibus feugiat aliquet. Quisque libero ligula, congue sit amet vestibulum at, euismod a elit. Vivamus eget augue et nunc lobortis hendrerit sed ut turpis. Donec et ante commodo, faucibus felis in, viverra libero. Aliquam erat volutpat. Duis euismod magna eget metus tincidunt dapibus. Curabitur malesuada efficitur venenatis. Fusce eu nisi sed purus hendrerit consectetur et ac tellus. Cras placerat dignissim mauris, egestas bibendum eros pulvinar non. Quisque finibus eget elit eu placerat. Mauris diam metus, imperdiet et libero sit amet, venenatis finibus libero. Cras eget laoreet justo.</p>
<p>Proin sit amet orci nec magna tincidunt vehicula. Praesent mauris elit, ullamcorper eget odio sed, pulvinar luctus tellus. Mauris tempus, magna tempus vulputate efficitur, elit lectus accumsan est, ultricies volutpat nulla ante in sapien. Morbi condimentum erat sit amet mattis ullamcorper. Nullam tincidunt nunc vel leo vulputate porttitor. Donec efficitur hendrerit nunc, non viverra libero scelerisque ac. Ut gravida nec ante vitae facilisis. Pellentesque sagittis urna sit amet egestas vestibulum.</p>
<p>Duis tempus dui in interdum ullamcorper. Curabitur vulputate laoreet est, dictum condimentum sapien vehicula eget. Pellentesque ac dictum mi. Sed metus arcu, sodales lobortis urna vel, feugiat ullamcorper est. Integer lacinia, lacus ac tristique convallis, nunc purus bibendum arcu, at eleifend enim est non ipsum. Nam iaculis elementum convallis. Nulla tempus odio vel porta ullamcorper. Donec dignissim ut elit vestibulum faucibus.</p>
<p>Aenean a pulvinar ante. Nunc rutrum volutpat tincidunt. Aenean ultricies sodales mauris eget suscipit. Proin rhoncus ornare lacus in auctor. Duis nec urna sit amet tortor ullamcorper sagittis non nec massa. Nullam dolor sem, laoreet sit amet elit in, iaculis consequat turpis. Morbi semper nulla vel egestas ultrices. Suspendisse id est iaculis, facilisis metus non, accumsan augue. Vestibulum arcu nulla, porta euismod felis et, sollicitudin vehicula ligula. Pellentesque ac dolor ac eros gravida tempus. Etiam sed sem ultrices, tincidunt purus eget, porttitor eros. Vivamus ut tempor sem. Donec interdum efficitur mollis.</p>
<p>In a laoreet ante. Suspendisse potenti. In sit amet enim elit. In arcu mauris, luctus a urna eget, aliquet accumsan tellus. Maecenas egestas, sem nec commodo tincidunt, metus tortor volutpat libero, eget tristique metus velit sed eros. Fusce bibendum lacus id lectus semper, id volutpat turpis dictum. Vestibulum eu elit eget eros dictum cursus. Mauris consectetur dolor eu ligula condimentum aliquam at id dui. Vestibulum non dolor ante. Morbi a dapibus erat. Nulla placerat mi id neque rhoncus, et semper dolor hendrerit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas quam sem, dapibus non aliquet iaculis, mollis id urna.</p>
<p>Integer pellentesque enim a justo venenatis sodales. Etiam in nisl ipsum. Vestibulum fringilla dignissim faucibus. Nam pellentesque, mi ac accumsan mattis, elit velit bibendum lacus, id scelerisque ligula sapien id diam. Sed condimentum rutrum metus, in sollicitudin quam ultricies ut. Phasellus at lobortis arcu. Duis auctor, arcu id hendrerit faucibus, odio turpis finibus mi, molestie tempus ex lorem suscipit enim. Nam pretium laoreet ipsum. Donec eu mauris euismod, varius mi id, elementum leo. Integer ultricies nulla massa, in consequat lectus pellentesque ut. Ut eu risus mi. Pellentesque id ligula sodales, maximus lorem at, bibendum velit. Etiam vitae eros vitae quam lacinia egestas. Sed ullamcorper egestas magna, eget suscipit nulla euismod a. Morbi accumsan arcu a vulputate iaculis.</p>
</div>

My onscroll event is not firing my java script function

I'm trying to say in my code that if the user scrolls down 250px, I want the data-percent to go from 0% to 100% and this is done in "myFunction". I am still new to JS so I'm having trouble understanding why it's not working when I scroll past 250px. Any help would be much appreciated!
var div = document.getElementById('div1');
window.onscroll = myFunction();
function myFunction() {
if (document.body.scrollTop > 250 || document.documentElement.scrollTop > 250) {
div.getAttribute('data-percent').value = "100%";
} else {
div.getAttribute('data-percent').value = "";
}
}
<div id="div1" class="skillbar clearfix " data-percent="100%">
<div class="skillbar-title" style="background: #d35400;"><span>HTML5</span></div>
<div class="skillbar-bar" style="background: #e67e22;"></div>
<div class="skill-bar-percent">100%</div>
</div>
I expect the data-percent attribute to go from 0% to 100% when I scroll past 250px, and then back to 0% when I scroll back up.

I fixed the header to the top of the page so you could see it, and added some filler text to make it scroll, but the issue was that your code only called myFunction as soon as the page loaded - it wasn't doing anything else. You needed to change the call of myFunction into a reference to myFunction by removing the parentheses.
var div = document.getElementById('div1');
window.onscroll = myFunction;
function myFunction() {
if (document.body.scrollTop > 250 || document.documentElement.scrollTop > 250) {
div.getAttribute('data-percent').value = "100%";
div.querySelector(".skill-bar-percent").textContent = "100%";
} else {
div.getAttribute('data-percent').value = "";
div.querySelector(".skill-bar-percent").textContent = "0%";
}
}
<div id="div1" class="skillbar clearfix " data-percent="100%" style="position: fixed; top: 0; background-color: white; display: block;">
<div class="skillbar-title" style="background: #d35400;"><span>HTML5</span></div>
<div class="skillbar-bar" style="background: #e67e22;"></div>
<div class="skill-bar-percent">0%</div>
</div>
<br />
<br />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In maximus facilisis dolor, mollis consequat justo vestibulum in. Pellentesque ac laoreet turpis. Duis eget sodales elit. In eget eros vitae nibh laoreet viverra. Fusce tincidunt tortor id metus iaculis, in pulvinar urna consectetur. Nunc in leo non lacus volutpat rhoncus. Vestibulum aliquet tortor quis vehicula tempor. Vivamus faucibus orci nec condimentum consequat. Vestibulum vestibulum venenatis tincidunt. Donec non velit nulla. Nunc tellus est, feugiat quis interdum luctus, rhoncus non nisi. Aenean sagittis sed nisl sit amet vehicula. Nulla maximus at lacus eget tristique. Curabitur dignissim ligula et massa rhoncus, id lobortis odio dignissim. Sed ut dolor ac libero lacinia laoreet nec eu urna. Morbi justo lectus, ultrices ac tellus ut, lobortis semper risus.</p>
<p>Phasellus tempor dignissim odio, sodales vulputate metus facilisis sit amet. Maecenas vestibulum dapibus ipsum, nec bibendum neque tempor eget. Nunc ullamcorper, libero et semper condimentum, nibh mi pretium nisi, a hendrerit elit nunc sed metus. Duis lacinia quis dui ut interdum. In efficitur vitae magna sit amet aliquam. Pellentesque quis ullamcorper lorem. Etiam id ullamcorper velit. Suspendisse id tristique ante, suscipit facilisis nisl. Ut ac orci quis augue ornare egestas a id eros. Curabitur dictum eros mauris, lacinia vulputate diam dignissim at. Curabitur venenatis posuere lorem, non maximus lectus lobortis in.</p>
<p>Praesent in finibus purus. Maecenas nec rutrum mi. Donec molestie rhoncus ex vel laoreet. Duis id leo sit amet nisi tristique porta non at enim. Suspendisse eu pharetra lorem. Nunc posuere odio nisl, id iaculis felis fringilla ut. Proin aliquam sapien quis tortor vestibulum interdum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque gravida bibendum urna, tincidunt venenatis ligula egestas vitae. Fusce accumsan ligula et diam porta, id finibus felis vulputate.</p>
<p>Ut eleifend venenatis quam, vel ultricies diam vestibulum sit amet. Vestibulum accumsan eu felis et dictum. Cras turpis tellus, sodales ut nibh accumsan, rutrum ullamcorper ligula. Donec mollis sem eros, vitae finibus dui ullamcorper vel. Mauris sodales diam ut dictum mattis. Nam varius nisi ac efficitur dapibus. Nam dignissim, dolor at suscipit dignissim, ipsum eros mollis risus, eget facilisis lacus dolor id nisl. Vivamus dictum rutrum neque, vel accumsan lacus vulputate in. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris vel tortor sed mi faucibus egestas non maximus enim. Suspendisse sed mi sagittis, imperdiet felis sed, tristique nisi. Proin porta nisi at pretium volutpat. Quisque nec nisl dictum, dignissim erat sit amet, vestibulum dui.</p>
<p>Curabitur vitae consectetur felis. In quis ligula metus. Nunc mauris ex, viverra in suscipit in, ultricies id lorem. Sed ac libero at velit iaculis placerat vitae in odio. Sed tortor dui, lobortis nec pretium ut, ullamcorper a dui. Praesent congue erat sed ultrices pretium. Nullam consequat orci at ex aliquet, vitae aliquet lorem suscipit. Maecenas nisi purus, semper eu lorem vel, elementum dapibus quam. Suspendisse potenti. Nulla augue enim, vulputate a fringilla eget, sollicitudin nec turpis. Aenean vitae pulvinar ante. Nam ex dui, gravida a nunc sed, tristique lacinia sapien. Sed auctor laoreet nisl, et maximus risus. Fusce finibus bibendum mauris. Ut cursus euismod eros non dapibus. Sed luctus eleifend lorem venenatis aliquam.</p>
<p>Morbi volutpat velit vitae est molestie, nec porttitor orci tempus. Suspendisse lorem arcu, elementum sit amet diam sit amet, pharetra laoreet metus. Integer posuere sapien porta, placerat odio lobortis, sollicitudin augue. Integer mattis arcu est, gravida porta justo ultrices a. Etiam egestas in ante at interdum. Cras sodales at lectus nec interdum. Donec ac posuere ligula, id dictum lectus. Nullam et elit non nunc convallis pulvinar. Pellentesque vitae pulvinar ex. Etiam a mattis risus, vitae gravida neque.</p>
<p>Nullam vestibulum nisl a faucibus sodales. Interdum et malesuada fames ac ante ipsum primis in faucibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla iaculis gravida sem at aliquam. Vestibulum id enim suscipit, condimentum ipsum ut, egestas libero. Proin et leo ac eros hendrerit tincidunt dapibus ac urna. Integer tincidunt, est et faucibus malesuada, purus ligula ultricies velit, quis rutrum lacus quam non neque. Sed facilisis ipsum eget nisl consectetur sollicitudin. Donec sodales massa non quam ornare tristique. Suspendisse condimentum dui dolor, in ultrices leo laoreet non.</p>
<p>Morbi mattis, mi nec fringilla dignissim, nisl risus pharetra massa, in luctus sem magna at ex. Nullam aliquam ultricies dolor, eget maximus eros auctor sed. Suspendisse sodales orci a elementum dignissim. Maecenas vulputate pharetra nisl vel cursus. Sed sit amet molestie lacus. Etiam fringilla maximus velit at posuere. Vestibulum non metus non sapien molestie tempor. Ut tincidunt faucibus lectus. Aliquam scelerisque ligula vel dictum fermentum. Donec egestas velit consequat vehicula condimentum. Etiam semper rhoncus efficitur. Ut ut leo pretium nisi pharetra pharetra. Nullam elementum, metus at sollicitudin convallis, mauris eros sagittis justo, quis venenatis ante magna dignissim nisl. Donec sit amet tempus tellus, id ultrices quam. Aliquam dui dolor, placerat non metus ut, mattis imperdiet nisi. Maecenas ultrices felis lacus, ut mattis ipsum laoreet vitae.</p>
<p>Fusce commodo faucibus volutpat. Nulla tristique libero at mi ultricies, scelerisque lobortis risus accumsan. Vestibulum iaculis, est a blandit eleifend, lorem justo porttitor arcu, a feugiat arcu magna eget nulla. Mauris posuere massa vitae diam pretium placerat nec ut ex. Ut porttitor nisi sit amet felis eleifend, non fermentum nibh placerat. In molestie mi a mi rutrum tempus. Praesent fringilla semper mi, at accumsan lorem lobortis euismod.</p>
<p>Fusce fermentum interdum leo non auctor. In hac habitasse platea dictumst. Pellentesque lectus ante, vehicula ac blandit dictum, pulvinar non tortor. Ut faucibus erat luctus, convallis magna non, ornare dolor. Sed dictum, nunc non iaculis pharetra, mi nisl pretium libero, at tincidunt massa felis eu mauris. Maecenas sit amet lorem non enim finibus posuere. Ut pulvinar aliquam convallis. Maecenas eu purus nec tortor bibendum maximus in quis enim. Fusce vehicula leo non felis posuere aliquet. Nam aliquet mauris nec felis dictum, non semper diam efficitur. Duis blandit euismod vestibulum. Nulla quis leo venenatis, volutpat ex sit amet, vulputate enim. Morbi varius arcu id tortor egestas ornare. Etiam porttitor et elit et condimentum. Maecenas libero felis, consequat varius pharetra non, tempor eget lacus. Fusce vel volutpat ante, vel feugiat nulla.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In maximus facilisis dolor, mollis consequat justo vestibulum in. Pellentesque ac laoreet turpis. Duis eget sodales elit. In eget eros vitae nibh laoreet viverra. Fusce tincidunt tortor id metus iaculis, in pulvinar urna consectetur. Nunc in leo non lacus volutpat rhoncus. Vestibulum aliquet tortor quis vehicula tempor. Vivamus faucibus orci nec condimentum consequat. Vestibulum vestibulum venenatis tincidunt. Donec non velit nulla. Nunc tellus est, feugiat quis interdum luctus, rhoncus non nisi. Aenean sagittis sed nisl sit amet vehicula. Nulla maximus at lacus eget tristique. Curabitur dignissim ligula et massa rhoncus, id lobortis odio dignissim. Sed ut dolor ac libero lacinia laoreet nec eu urna. Morbi justo lectus, ultrices ac tellus ut, lobortis semper risus.</p>
<p>Phasellus tempor dignissim odio, sodales vulputate metus facilisis sit amet. Maecenas vestibulum dapibus ipsum, nec bibendum neque tempor eget. Nunc ullamcorper, libero et semper condimentum, nibh mi pretium nisi, a hendrerit elit nunc sed metus. Duis lacinia quis dui ut interdum. In efficitur vitae magna sit amet aliquam. Pellentesque quis ullamcorper lorem. Etiam id ullamcorper velit. Suspendisse id tristique ante, suscipit facilisis nisl. Ut ac orci quis augue ornare egestas a id eros. Curabitur dictum eros mauris, lacinia vulputate diam dignissim at. Curabitur venenatis posuere lorem, non maximus lectus lobortis in.</p>
<p>Praesent in finibus purus. Maecenas nec rutrum mi. Donec molestie rhoncus ex vel laoreet. Duis id leo sit amet nisi tristique porta non at enim. Suspendisse eu pharetra lorem. Nunc posuere odio nisl, id iaculis felis fringilla ut. Proin aliquam sapien quis tortor vestibulum interdum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque gravida bibendum urna, tincidunt venenatis ligula egestas vitae. Fusce accumsan ligula et diam porta, id finibus felis vulputate.</p>
<p>Ut eleifend venenatis quam, vel ultricies diam vestibulum sit amet. Vestibulum accumsan eu felis et dictum. Cras turpis tellus, sodales ut nibh accumsan, rutrum ullamcorper ligula. Donec mollis sem eros, vitae finibus dui ullamcorper vel. Mauris sodales diam ut dictum mattis. Nam varius nisi ac efficitur dapibus. Nam dignissim, dolor at suscipit dignissim, ipsum eros mollis risus, eget facilisis lacus dolor id nisl. Vivamus dictum rutrum neque, vel accumsan lacus vulputate in. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris vel tortor sed mi faucibus egestas non maximus enim. Suspendisse sed mi sagittis, imperdiet felis sed, tristique nisi. Proin porta nisi at pretium volutpat. Quisque nec nisl dictum, dignissim erat sit amet, vestibulum dui.</p>
<p>Curabitur vitae consectetur felis. In quis ligula metus. Nunc mauris ex, viverra in suscipit in, ultricies id lorem. Sed ac libero at velit iaculis placerat vitae in odio. Sed tortor dui, lobortis nec pretium ut, ullamcorper a dui. Praesent congue erat sed ultrices pretium. Nullam consequat orci at ex aliquet, vitae aliquet lorem suscipit. Maecenas nisi purus, semper eu lorem vel, elementum dapibus quam. Suspendisse potenti. Nulla augue enim, vulputate a fringilla eget, sollicitudin nec turpis. Aenean vitae pulvinar ante. Nam ex dui, gravida a nunc sed, tristique lacinia sapien. Sed auctor laoreet nisl, et maximus risus. Fusce finibus bibendum mauris. Ut cursus euismod eros non dapibus. Sed luctus eleifend lorem venenatis aliquam.</p>
<p>Morbi volutpat velit vitae est molestie, nec porttitor orci tempus. Suspendisse lorem arcu, elementum sit amet diam sit amet, pharetra laoreet metus. Integer posuere sapien porta, placerat odio lobortis, sollicitudin augue. Integer mattis arcu est, gravida porta justo ultrices a. Etiam egestas in ante at interdum. Cras sodales at lectus nec interdum. Donec ac posuere ligula, id dictum lectus. Nullam et elit non nunc convallis pulvinar. Pellentesque vitae pulvinar ex. Etiam a mattis risus, vitae gravida neque.</p>
<p>Nullam vestibulum nisl a faucibus sodales. Interdum et malesuada fames ac ante ipsum primis in faucibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla iaculis gravida sem at aliquam. Vestibulum id enim suscipit, condimentum ipsum ut, egestas libero. Proin et leo ac eros hendrerit tincidunt dapibus ac urna. Integer tincidunt, est et faucibus malesuada, purus ligula ultricies velit, quis rutrum lacus quam non neque. Sed facilisis ipsum eget nisl consectetur sollicitudin. Donec sodales massa non quam ornare tristique. Suspendisse condimentum dui dolor, in ultrices leo laoreet non.</p>
<p>Morbi mattis, mi nec fringilla dignissim, nisl risus pharetra massa, in luctus sem magna at ex. Nullam aliquam ultricies dolor, eget maximus eros auctor sed. Suspendisse sodales orci a elementum dignissim. Maecenas vulputate pharetra nisl vel cursus. Sed sit amet molestie lacus. Etiam fringilla maximus velit at posuere. Vestibulum non metus non sapien molestie tempor. Ut tincidunt faucibus lectus. Aliquam scelerisque ligula vel dictum fermentum. Donec egestas velit consequat vehicula condimentum. Etiam semper rhoncus efficitur. Ut ut leo pretium nisi pharetra pharetra. Nullam elementum, metus at sollicitudin convallis, mauris eros sagittis justo, quis venenatis ante magna dignissim nisl. Donec sit amet tempus tellus, id ultrices quam. Aliquam dui dolor, placerat non metus ut, mattis imperdiet nisi. Maecenas ultrices felis lacus, ut mattis ipsum laoreet vitae.</p>
<p>Fusce commodo faucibus volutpat. Nulla tristique libero at mi ultricies, scelerisque lobortis risus accumsan. Vestibulum iaculis, est a blandit eleifend, lorem justo porttitor arcu, a feugiat arcu magna eget nulla. Mauris posuere massa vitae diam pretium placerat nec ut ex. Ut porttitor nisi sit amet felis eleifend, non fermentum nibh placerat. In molestie mi a mi rutrum tempus. Praesent fringilla semper mi, at accumsan lorem lobortis euismod.</p>
<p>Fusce fermentum interdum leo non auctor. In hac habitasse platea dictumst. Pellentesque lectus ante, vehicula ac blandit dictum, pulvinar non tortor. Ut faucibus erat luctus, convallis magna non, ornare dolor. Sed dictum, nunc non iaculis pharetra, mi nisl pretium libero, at tincidunt massa felis eu mauris. Maecenas sit amet lorem non enim finibus posuere. Ut pulvinar aliquam convallis. Maecenas eu purus nec tortor bibendum maximus in quis enim. Fusce vehicula leo non felis posuere aliquet. Nam aliquet mauris nec felis dictum, non semper diam efficitur. Duis blandit euismod vestibulum. Nulla quis leo venenatis, volutpat ex sit amet, vulputate enim. Morbi varius arcu id tortor egestas ornare. Etiam porttitor et elit et condimentum. Maecenas libero felis, consequat varius pharetra non, tempor eget lacus. Fusce vel volutpat ante, vel feugiat nulla.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In maximus facilisis dolor, mollis consequat justo vestibulum in. Pellentesque ac laoreet turpis. Duis eget sodales elit. In eget eros vitae nibh laoreet viverra. Fusce tincidunt tortor id metus iaculis, in pulvinar urna consectetur. Nunc in leo non lacus volutpat rhoncus. Vestibulum aliquet tortor quis vehicula tempor. Vivamus faucibus orci nec condimentum consequat. Vestibulum vestibulum venenatis tincidunt. Donec non velit nulla. Nunc tellus est, feugiat quis interdum luctus, rhoncus non nisi. Aenean sagittis sed nisl sit amet vehicula. Nulla maximus at lacus eget tristique. Curabitur dignissim ligula et massa rhoncus, id lobortis odio dignissim. Sed ut dolor ac libero lacinia laoreet nec eu urna. Morbi justo lectus, ultrices ac tellus ut, lobortis semper risus.</p>
<p>Phasellus tempor dignissim odio, sodales vulputate metus facilisis sit amet. Maecenas vestibulum dapibus ipsum, nec bibendum neque tempor eget. Nunc ullamcorper, libero et semper condimentum, nibh mi pretium nisi, a hendrerit elit nunc sed metus. Duis lacinia quis dui ut interdum. In efficitur vitae magna sit amet aliquam. Pellentesque quis ullamcorper lorem. Etiam id ullamcorper velit. Suspendisse id tristique ante, suscipit facilisis nisl. Ut ac orci quis augue ornare egestas a id eros. Curabitur dictum eros mauris, lacinia vulputate diam dignissim at. Curabitur venenatis posuere lorem, non maximus lectus lobortis in.</p>
<p>Praesent in finibus purus. Maecenas nec rutrum mi. Donec molestie rhoncus ex vel laoreet. Duis id leo sit amet nisi tristique porta non at enim. Suspendisse eu pharetra lorem. Nunc posuere odio nisl, id iaculis felis fringilla ut. Proin aliquam sapien quis tortor vestibulum interdum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque gravida bibendum urna, tincidunt venenatis ligula egestas vitae. Fusce accumsan ligula et diam porta, id finibus felis vulputate.</p>
<p>Ut eleifend venenatis quam, vel ultricies diam vestibulum sit amet. Vestibulum accumsan eu felis et dictum. Cras turpis tellus, sodales ut nibh accumsan, rutrum ullamcorper ligula. Donec mollis sem eros, vitae finibus dui ullamcorper vel. Mauris sodales diam ut dictum mattis. Nam varius nisi ac efficitur dapibus. Nam dignissim, dolor at suscipit dignissim, ipsum eros mollis risus, eget facilisis lacus dolor id nisl. Vivamus dictum rutrum neque, vel accumsan lacus vulputate in. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris vel tortor sed mi faucibus egestas non maximus enim. Suspendisse sed mi sagittis, imperdiet felis sed, tristique nisi. Proin porta nisi at pretium volutpat. Quisque nec nisl dictum, dignissim erat sit amet, vestibulum dui.</p>
<p>Curabitur vitae consectetur felis. In quis ligula metus. Nunc mauris ex, viverra in suscipit in, ultricies id lorem. Sed ac libero at velit iaculis placerat vitae in odio. Sed tortor dui, lobortis nec pretium ut, ullamcorper a dui. Praesent congue erat sed ultrices pretium. Nullam consequat orci at ex aliquet, vitae aliquet lorem suscipit. Maecenas nisi purus, semper eu lorem vel, elementum dapibus quam. Suspendisse potenti. Nulla augue enim, vulputate a fringilla eget, sollicitudin nec turpis. Aenean vitae pulvinar ante. Nam ex dui, gravida a nunc sed, tristique lacinia sapien. Sed auctor laoreet nisl, et maximus risus. Fusce finibus bibendum mauris. Ut cursus euismod eros non dapibus. Sed luctus eleifend lorem venenatis aliquam.</p>
<p>Morbi volutpat velit vitae est molestie, nec porttitor orci tempus. Suspendisse lorem arcu, elementum sit amet diam sit amet, pharetra laoreet metus. Integer posuere sapien porta, placerat odio lobortis, sollicitudin augue. Integer mattis arcu est, gravida porta justo ultrices a. Etiam egestas in ante at interdum. Cras sodales at lectus nec interdum. Donec ac posuere ligula, id dictum lectus. Nullam et elit non nunc convallis pulvinar. Pellentesque vitae pulvinar ex. Etiam a mattis risus, vitae gravida neque.</p>
<p>Nullam vestibulum nisl a faucibus sodales. Interdum et malesuada fames ac ante ipsum primis in faucibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla iaculis gravida sem at aliquam. Vestibulum id enim suscipit, condimentum ipsum ut, egestas libero. Proin et leo ac eros hendrerit tincidunt dapibus ac urna. Integer tincidunt, est et faucibus malesuada, purus ligula ultricies velit, quis rutrum lacus quam non neque. Sed facilisis ipsum eget nisl consectetur sollicitudin. Donec sodales massa non quam ornare tristique. Suspendisse condimentum dui dolor, in ultrices leo laoreet non.</p>
<p>Morbi mattis, mi nec fringilla dignissim, nisl risus pharetra massa, in luctus sem magna at ex. Nullam aliquam ultricies dolor, eget maximus eros auctor sed. Suspendisse sodales orci a elementum dignissim. Maecenas vulputate pharetra nisl vel cursus. Sed sit amet molestie lacus. Etiam fringilla maximus velit at posuere. Vestibulum non metus non sapien molestie tempor. Ut tincidunt faucibus lectus. Aliquam scelerisque ligula vel dictum fermentum. Donec egestas velit consequat vehicula condimentum. Etiam semper rhoncus efficitur. Ut ut leo pretium nisi pharetra pharetra. Nullam elementum, metus at sollicitudin convallis, mauris eros sagittis justo, quis venenatis ante magna dignissim nisl. Donec sit amet tempus tellus, id ultrices quam. Aliquam dui dolor, placerat non metus ut, mattis imperdiet nisi. Maecenas ultrices felis lacus, ut mattis ipsum laoreet vitae.</p>
<p>Fusce commodo faucibus volutpat. Nulla tristique libero at mi ultricies, scelerisque lobortis risus accumsan. Vestibulum iaculis, est a blandit eleifend, lorem justo porttitor arcu, a feugiat arcu magna eget nulla. Mauris posuere massa vitae diam pretium placerat nec ut ex. Ut porttitor nisi sit amet felis eleifend, non fermentum nibh placerat. In molestie mi a mi rutrum tempus. Praesent fringilla semper mi, at accumsan lorem lobortis euismod.</p>
<p>Fusce fermentum interdum leo non auctor. In hac habitasse platea dictumst. Pellentesque lectus ante, vehicula ac blandit dictum, pulvinar non tortor. Ut faucibus erat luctus, convallis magna non, ornare dolor. Sed dictum, nunc non iaculis pharetra, mi nisl pretium libero, at tincidunt massa felis eu mauris. Maecenas sit amet lorem non enim finibus posuere. Ut pulvinar aliquam convallis. Maecenas eu purus nec tortor bibendum maximus in quis enim. Fusce vehicula leo non felis posuere aliquet. Nam aliquet mauris nec felis dictum, non semper diam efficitur. Duis blandit euismod vestibulum. Nulla quis leo venenatis, volutpat ex sit amet, vulputate enim. Morbi varius arcu id tortor egestas ornare. Etiam porttitor et elit et condimentum. Maecenas libero felis, consequat varius pharetra non, tempor eget lacus. Fusce vel volutpat ante, vel feugiat nulla.</p>

You need to change:
window.onscroll = myFunction();
Into
window.onscroll = function() {myFunction()};
Why? because the onscroll is an Event that executes a function after something had happened (Scroll Event in our case).
But when you use use the the code like window.onscroll = myFunction(); the JS engine will immediately invoke the function regardless to the scroll event as soon as he sees this line of code.

You need to do two changes to achive what you are looking :
First as Shahar mentioned, you need to change the way you run the function :
window.onscroll = function() {myFunction()};
And the other thing, you are using getAttribute method to update the value of your attribute, you need to use setAttribute instead :
div.setAttribute('data-percent', '100%');
And maybe add a height to your div with css to actually be able to scroll :
#div1{height:700px}
https://jsfiddle.net/odpzLtec/

How to determine if an element is above viewport?

How do I determine in javascript, if an element is above the viewport (user has scrolled past it) (not just if it can be seen)?
In this snippet:
console.log(iselement1aboveviewport); would return:
0, if you have not seen the element (element is below viewport)
0, if you currently see the element (element is in the viewport)
1, if you have scrolled past the element (element is above the viewport).
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et imperdiet nulla. Morbi malesuada consectetur nisl, ut iaculis sapien. Praesent molestie lobortis purus efficitur vehicula. Quisque elementum tortor sit amet condimentum rhoncus. Etiam molestie porttitor nisi, vel porttitor orci dignissim a. Aliquam a est felis. Quisque libero neque, ultricies a nunc nec, hendrerit euismod ligula. Vestibulum viverra egestas magna malesuada ornare. Sed in cursus est, eget convallis arcu.
Integer ante lorem, sagittis quis turpis quis, congue feugiat risus. Cras mollis porttitor rutrum. Fusce eget nisi ut nisl bibendum sollicitudin. Donec tempus accumsan elit, ut hendrerit odio commodo ut. Sed ac interdum massa. Vivamus elementum efficitur nulla sit amet varius. Suspendisse purus mi, laoreet eget ligula molestie, egestas sodales erat.
<div id="element1" style="color: orange;">Am I above the viewport? (have you scrolled past me?)</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et imperdiet nulla. Morbi malesuada consectetur nisl, ut iaculis sapien. Praesent molestie lobortis purus efficitur vehicula. Quisque elementum tortor sit amet condimentum rhoncus. Etiam molestie porttitor nisi, vel porttitor orci dignissim a. Aliquam a est felis. Quisque libero neque, ultricies a nunc nec, hendrerit euismod ligula. Vestibulum viverra egestas magna malesuada ornare. Sed in cursus est, eget convallis arcu.
Fusce gravida tellus fermentum massa faucibus scelerisque. Vestibulum consequat dolor libero, sed lobortis ligula eleifend at. Sed porttitor odio nec enim pulvinar pulvinar. Vivamus vulputate sollicitudin nisi et ullamcorper. Aenean et ultrices nunc. Donec ligula dolor, lobortis in vestibulum at, ultrices ac lectus. Nunc tristique arcu eu felis finibus commodo. Ut lacinia tincidunt dui, venenatis lacinia orci imperdiet in.
Nam maximus at quam eu rhoncus. Mauris auctor efficitur dignissim. Proin porttitor nunc ut tortor aliquet, a tincidunt tortor luctus. Suspendisse dapibus dui sapien, sed elementum ex pellentesque a. Quisque tortor massa, pretium vel lacus non, accumsan convallis leo. Nunc nec orci mi. Phasellus id massa ipsum. Aenean non ornare neque, ultricies vestibulum tellus. Aliquam quis laoreet orci. Cras faucibus massa in ultricies consectetur. Duis et odio nec dolor sollicitudin condimentum.
Integer ante lorem, sagittis quis turpis quis, congue feugiat risus. Cras mollis porttitor rutrum. Fusce eget nisi ut nisl bibendum sollicitudin. Donec tempus accumsan elit, ut hendrerit odio commodo ut. Sed ac interdum massa. Vivamus elementum efficitur nulla sit amet varius. Suspendisse purus mi, laoreet eget ligula molestie, egestas sodales erat.

Explanation:
You should use Element.getBoundingClientRect
The Element.getBoundingClientRect() method returns the size of an element and its position relative to the viewport.
It returns an object that looks like this:
{
"x": 7.997159004211426,
"y": 229.81533813476562,
"width": 425.8238525390625,
"height": 18.18181800842285,
"top": 229.81533813476562,
"right": 433.8210115432739,
"bottom": 247.99715614318848,
"left": 7.997159004211426
}
If you want to know when the element is above the view port you need to keep an eye on the bottom property to be <= 0.
Working example:
const element1 = document.getElementById("element1");
window.addEventListener("scroll", function(){
console.clear();
console.log(element1.getBoundingClientRect().bottom <= 0 ? "Above" : "Under");
});
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et imperdiet nulla. Morbi malesuada consectetur nisl, ut iaculis sapien. Praesent molestie lobortis purus efficitur vehicula. Quisque elementum tortor sit amet condimentum rhoncus. Etiam molestie porttitor nisi, vel porttitor orci dignissim a. Aliquam a est felis. Quisque libero neque, ultricies a nunc nec, hendrerit euismod ligula. Vestibulum viverra egestas magna malesuada ornare. Sed in cursus est, eget convallis arcu.
Integer ante lorem, sagittis quis turpis quis, congue feugiat risus. Cras mollis porttitor rutrum. Fusce eget nisi ut nisl bibendum sollicitudin. Donec tempus accumsan elit, ut hendrerit odio commodo ut. Sed ac interdum massa. Vivamus elementum efficitur nulla sit amet varius. Suspendisse purus mi, laoreet eget ligula molestie, egestas sodales erat.
<div id="element1" style="color: orange;">Am I above the viewport? (have you scrolled past me?)</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et imperdiet nulla. Morbi malesuada consectetur nisl, ut iaculis sapien. Praesent molestie lobortis purus efficitur vehicula. Quisque elementum tortor sit amet condimentum rhoncus. Etiam molestie porttitor nisi, vel porttitor orci dignissim a. Aliquam a est felis. Quisque libero neque, ultricies a nunc nec, hendrerit euismod ligula. Vestibulum viverra egestas magna malesuada ornare. Sed in cursus est, eget convallis arcu.
Fusce gravida tellus fermentum massa faucibus scelerisque. Vestibulum consequat dolor libero, sed lobortis ligula eleifend at. Sed porttitor odio nec enim pulvinar pulvinar. Vivamus vulputate sollicitudin nisi et ullamcorper. Aenean et ultrices nunc. Donec ligula dolor, lobortis in vestibulum at, ultrices ac lectus. Nunc tristique arcu eu felis finibus commodo. Ut lacinia tincidunt dui, venenatis lacinia orci imperdiet in.
Nam maximus at quam eu rhoncus. Mauris auctor efficitur dignissim. Proin porttitor nunc ut tortor aliquet, a tincidunt tortor luctus. Suspendisse dapibus dui sapien, sed elementum ex pellentesque a. Quisque tortor massa, pretium vel lacus non, accumsan convallis leo. Nunc nec orci mi. Phasellus id massa ipsum. Aenean non ornare neque, ultricies vestibulum tellus. Aliquam quis laoreet orci. Cras faucibus massa in ultricies consectetur. Duis et odio nec dolor sollicitudin condimentum.
Integer ante lorem, sagittis quis turpis quis, congue feugiat risus. Cras mollis porttitor rutrum. Fusce eget nisi ut nisl bibendum sollicitudin. Donec tempus accumsan elit, ut hendrerit odio commodo ut. Sed ac interdum massa. Vivamus elementum efficitur nulla sit amet varius. Suspendisse purus mi, laoreet eget ligula molestie, egestas sodales erat.

How to access element from this.event.path?

I basically want to access all the properties of an element that you get when say, that element is a target to an event. We do this via this.event.target to get access to all its properties.
What I want to do is search for scrollTop key of elements in the path of an event but all I am returned is their names instead of their equivalent JS objects.
Here's my try:
const viewport = this.event.path.filter(element => element.scrollTop) || { scrollTop: 0 };
But this just doesn't work and returns me an empty array.

you're not getting the scrollTop values because filter return the array containing all the elements having the properity scrollTop : do as following :
const viewport = this.event.composedPath().filter(element => element.scrollTop).map(e => { return e = {
//whatever you want to keep
scrollTop: e.scrollTop
}})
Here's a simple example to extract the scrollTop values from it with map
document.querySelector('html').addEventListener('click',function(e) {
let paths = e.composedPath().map(e => { return e.scrollTop || 0 })
console.log(paths)
});
div {
overflow-y: scroll;
height: 20px;
}
<div>
<span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pretium sed quam sed faucibus. Sed dictum enim non tortor egestas, sagittis mattis sem hendrerit. Duis quis massa turpis. Fusce consectetur facilisis lectus nec elementum. Praesent porttitor massa non enim bibendum, eu interdum lacus vehicula. Vestibulum efficitur felis sit amet ipsum venenatis interdum. Sed vulputate nibh id mi egestas, eu rutrum tellus dignissim. Sed suscipit risus condimentum libero pulvinar venenatis. Maecenas semper, erat eget dictum egestas, nisl urna finibus quam, a fermentum magna ante vel erat. Integer sed neque tristique, bibendum nisl et, pretium augue. Duis malesuada odio vitae commodo venenatis. Nunc consequat libero ac velit tempus sollicitudin. Sed scelerisque velit sem, ac pellentesque tellus rutrum eget. Aliquam convallis, ipsum id consectetur tempor, nibh odio fermentum orci, vitae imperdiet felis arcu vel elit. Sed venenatis et erat eget scelerisque. Aliquam consectetur nibh eu augue dignissim, a vestibulum ligula facilisis.
Quisque tincidunt in nulla ut placerat. Nullam posuere massa et urna eleifend consectetur. Praesent in odio mauris. Quisque pellentesque ante vitae justo consequat, vel posuere sapien lacinia. Aliquam varius diam nec purus scelerisque lobortis. Donec nisi mi, imperdiet posuere orci in, lobortis egestas purus. Aenean luctus egestas eleifend. Donec semper lectus nunc, eget consectetur nulla commodo vel. Aliquam erat volutpat. Quisque sodales enim sed diam pretium, eget finibus felis interdum. Mauris mattis id velit quis tincidunt. Fusce et pellentesque felis. Proin fermentum, est sed malesuada egestas, lorem nisl luctus mi, non tempor mi leo id nunc. In viverra rhoncus pulvinar. Duis dictum sem ac nisi fermentum, non iaculis eros convallis.
Vestibulum pharetra neque vitae auctor fermentum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Morbi eu erat sed ante cursus congue quis nec metus. Donec et erat sed quam faucibus pellentesque. Donec eu orci id justo dignissim tempor at sit amet dui. Curabitur varius lobortis pellentesque. Duis et diam sed ligula laoreet maximus in vel ex. Sed consequat eleifend libero a accumsan. Maecenas convallis tellus lobortis tristique vulputate. Morbi luctus a nisl ac accumsan. Integer dignissim orci et rhoncus porta.
Curabitur lacinia ullamcorper turpis in tincidunt. Nulla facilisi. Sed blandit ultricies arcu, vitae luctus nisi suscipit non. Fusce iaculis dapibus risus. Praesent turpis purus, sodales eget condimentum nec, vehicula id erat. Cras placerat velit justo, non imperdiet quam efficitur in. Fusce sit amet nisl sed purus vestibulum interdum. In felis mi, finibus non sagittis ut, accumsan a velit.
Nunc et ullamcorper mi. Donec vulputate tortor ante, in consequat enim facilisis condimentum. Nullam fermentum, libero ac iaculis tincidunt, dui nibh varius enim, in sollicitudin elit arcu eget libero. Quisque tincidunt mauris ex, sed congue augue faucibus at. Phasellus accumsan urna id enim ullamcorper suscipit. Pellentesque id quam a enim hendrerit dictum. Etiam sit amet dapibus justo, at sollicitudin urna. Etiam sodales efficitur urna, tempor ullamcorper tellus blandit sit amet. Ut magna magna, euismod et viverra suscipit, tristique posuere enim. Phasellus augue ex, viverra a pretium vel, porttitor a turpis. In placerat lectus eu suscipit sodales. Nam at placerat odio. Vivamus ullamcorper fringilla quam in iaculis. Maecenas id viverra nibh. Nunc lorem nunc, auctor non augue a, aliquam dictum lorem. Phasellus pretium nibh in nunc fermentum scelerisque et vel turpis.
</span>
</div>
scroll the text and click on it