How to access element from this.event.path?

How to access element from this.event.path? - javascript

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

Related

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">
I'm the site header
</header>
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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;
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.
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.
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.
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.
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.
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.
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.
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.
</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">
I'm the site header
</header>
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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;
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.
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.
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.
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.
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.
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.
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.
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.
</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">
I'm the site header
</header>
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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;
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.
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.
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.
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.
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.
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.
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.
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.
</div>

Is there a way to calculate how far you have scrolled inside a div with overflow set to auto?

I need to find out how far I have scrolled inside a div. I can't use the window property to find this value as the window hasn't scrolled. Is there a way to accomplish this?

It's not difficult to do:
Grab the element that scrolls
Set an event listener for scroll to that element
Get the element's scrollTop value
const scrollyDiv = document.getElementById('scrollyDiv');
scrollyDiv.addEventListener('scroll', (e) => {
console.log(e.target.scrollTop)
})
Demo:
https://codepen.io/koralarts/pen/LoXYmZ

You can do this with JQuery by using $(document).scrollTop() :
$(document).scroll(function() {
console.log($(document).scrollTop());
})

Answer:
In combination with the scroll event you can use the properties scrollTop(MDN), scrollHeight(MDN), and the computed CSS height.
let {scrollTop, scrollHeight} = e.currentTarget,
height = +getComputedStyle(e.currentTarget)["height"].slice(0,-2);
note: we use the + operator to coerce the string returned by getComputedStyle and slice into a number. This is fine because we know exactly what we are getting (heights are always defined using px by default) and we know by slicing off px the value will always be a number. A more precise way of doing this if you're not sure of the returned value(a.e. rem) is to use a Regular Expression to remove non-numerals:
...
height = +getComputedStyle(e.currentTarget)["height"].replace(/\D/g, "");
what are these?
scrollTop is the distance scrolled from the top of the element. It starts at 0 and increments until you hit the scroll limit.
scrollHeight is the total distance, plus the original height of the element.
height is simply the height of the element.
Why is this important?
To determine how far you've scrolled you would use scrollTop out of (scrollHeight - height).
This is shown in the below example:
demo.addEventListener("scroll", function(e) {
let {scrollTop, scrollHeight} = e.currentTarget,
height = +getComputedStyle(e.currentTarget)["height"].slice(0,-2);
console.log("Scrolled " + parseInt(scrollTop) + " / " + parseInt(scrollHeight - height));
});
html, body {
overflow: hidden;
}
div {
position: relative;
width: 50%;
left: calc(50% - 25%);
overflow: auto;
height: 101vh;
background: rgba(20,20,100, .3);
padding: 0px;
margin: 0px;
}
<div id="demo">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tellus mauris, molestie eu vehicula quis, suscipit quis nisl. Fusce lorem purus, rhoncus eget dui nec, sagittis tincidunt odio. Interdum et malesuada fames ac ante ipsum primis in faucibus. Etiam eget odio vitae nulla porttitor maximus a eget neque. Pellentesque dictum mollis ligula, a consequat tellus feugiat vitae. Donec rutrum elementum odio, vitae egestas tellus volutpat nec. Proin tempor, odio quis molestie iaculis, lectus nibh volutpat turpis, luctus rutrum ex felis sit amet velit. Donec blandit cursus tortor in malesuada. Vestibulum faucibus, lectus vel accumsan molestie, ligula velit pharetra leo, ac imperdiet nibh quam quis mi.
Pellentesque ac dui augue. Fusce sit amet condimentum dui. Donec sodales urna nec nisl commodo, ac porta magna consectetur. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec tincidunt tellus nunc, at accumsan orci scelerisque sed. Suspendisse facilisis feugiat massa, quis egestas sapien tempus nec. Curabitur nunc ipsum, ultricies sit amet nibh sed, tincidunt tristique diam. Cras sit amet scelerisque leo, a blandit dolor. Cras lobortis leo nec est luctus molestie. Curabitur non arcu malesuada, tincidunt dolor quis, bibendum orci. Vestibulum lobortis tortor ac erat consequat, ut consequat ex consectetur. Maecenas finibus efficitur orci, sit amet gravida ipsum vestibulum a. Aliquam quis dictum mi. Vivamus sagittis fringilla quam, sed feugiat libero lobortis nec. Praesent suscipit nulla at mollis rutrum. Sed et lacus at quam feugiat varius vitae et lectus.
Suspendisse feugiat lacus eget risus elementum convallis. Vestibulum fringilla mi ac mollis sagittis. Suspendisse vel sem tincidunt, condimentum urna at, dignissim magna. Curabitur pulvinar lectus eu massa pharetra facilisis. Quisque est nisl, feugiat vitae pellentesque vel, hendrerit sed enim. Ut at dui eget eros rhoncus venenatis malesuada sit amet ligula. Pellentesque cursus vulputate egestas. Sed euismod sem vel felis sollicitudin faucibus. Cras aliquet viverra turpis sit amet pulvinar. Aliquam pellentesque dolor a pulvinar egestas. Curabitur in sagittis sapien. Vestibulum nec ipsum a risus porttitor rhoncus vitae id ex. Ut mollis, ligula eu sollicitudin commodo, nibh nibh bibendum mi, vel luctus tellus est eget eros.
Aenean congue diam id urna tincidunt consectetur. Nunc vel semper ligula. Sed ultrices, odio eu venenatis interdum, ligula velit volutpat nisl, et malesuada eros massa id ante. Sed malesuada non nisl quis imperdiet. Praesent porta fringilla fermentum. Integer id massa at orci mollis accumsan in et dolor. Nullam nisi lectus, dignissim a dapibus id, posuere sed ex. Praesent consequat, dui non imperdiet aliquam, magna diam rhoncus enim, id molestie mauris nunc eget ante. Morbi et laoreet sapien, tempor malesuada tellus. Pellentesque lectus leo, egestas eget faucibus vitae, dapibus non enim. Duis eu leo sit amet augue molestie laoreet eu ut ipsum. Vestibulum nulla enim, tempus id varius ut, egestas non elit.
Sed tincidunt lorem sed tellus lobortis vulputate. Aliquam vel accumsan massa, id ornare arcu. Phasellus non erat ut erat mollis placerat. Aliquam laoreet laoreet eros, in elementum ex maximus quis. Pellentesque in dui at purus efficitur mattis. Etiam consequat, nunc vel feugiat fringilla, ante enim aliquet tellus, nec dapibus dui justo eget nibh. Praesent enim leo, tincidunt a dictum et, mollis at neque.
Fusce maximus, enim sed congue tempus, lorem tellus hendrerit massa, eget eleifend augue nisi eget eros. Aliquam vehicula eu enim et interdum. Nullam sollicitudin nisl sapien, quis euismod dolor vestibulum eget. Curabitur consectetur, nulla quis scelerisque tincidunt, sem turpis sagittis lacus, at tincidunt nunc felis et velit. Quisque nec malesuada lectus. Cras a lorem fermentum, tincidunt dolor a, dictum eros. Suspendisse augue tellus, cursus et ex sit amet, cursus sodales nibh. Pellentesque quis lacus aliquam libero bibendum eleifend. Interdum et malesuada fames ac ante ipsum primis in faucibus. Proin eget justo nec velit ultrices porttitor. Aenean vel accumsan arcu, sit amet finibus eros.
Sed ut convallis tortor, non dictum odio. Cras eu dictum sem. Cras laoreet lectus quis sapien volutpat bibendum. Vivamus ut finibus magna. Nunc aliquet tincidunt blandit. Pellentesque nisl tortor, malesuada eu est sed, congue fermentum nibh. Curabitur eu tellus nibh. Mauris quis eleifend lacus, id lacinia erat. Suspendisse id purus mauris. Cras ornare neque ac nulla blandit, eget faucibus turpis dictum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum mattis faucibus massa. Ut dignissim justo eget malesuada iaculis. Integer venenatis malesuada euismod. Nulla sollicitudin justo non consequat pharetra. Donec ultrices mi at neque tincidunt, in scelerisque sem vehicula.
Integer ac consectetur enim. Nunc sed fringilla magna. Nullam fermentum nisl nec venenatis condimentum. Mauris leo metus, convallis ut sem eu, tincidunt malesuada nunc. Cras metus lacus, sagittis ut convallis non, tempor vel turpis. Sed ultricies tristique odio id cursus. Praesent auctor ac ipsum faucibus ultrices. Donec id metus a sem aliquet suscipit. Maecenas mi sem, posuere non turpis id, vehicula placerat arcu. Curabitur tincidunt viverra neque ac pharetra. Curabitur vitae massa vehicula lorem tristique tempor. Duis congue nunc id lacus suscipit, ut laoreet enim malesuada.
Ut velit tellus, rhoncus a gravida id, aliquam quis dolor. Nam elementum purus non leo porttitor tempus. Curabitur tempor feugiat magna ac tempus. Ut cursus ultricies rutrum. Duis a feugiat arcu. Nullam bibendum metus sed nulla feugiat scelerisque vitae nec sem. Mauris aliquam vestibulum dui a commodo. Cras vel molestie metus. Quisque ac arcu odio. Phasellus pretium a leo non lacinia. Mauris et odio dui. Praesent commodo lorem eu erat pulvinar tincidunt. Praesent sagittis interdum mauris, eu egestas dolor volutpat dignissim. Duis posuere, arcu nec placerat ullamcorper, lectus nunc tempor mauris, vitae congue lacus arcu at enim.
Quisque eu massa sit amet dui accumsan pulvinar. Ut fermentum lectus eros, at iaculis enim consectetur quis. Ut semper, mi in vehicula lacinia, purus mi sagittis orci, rhoncus tristique magna leo vel purus. In congue feugiat arcu consequat pretium. Vestibulum sit amet pellentesque neque, a dignissim nisl. Maecenas ac dolor id justo feugiat varius vel sed turpis. Donec quis mi id nibh condimentum dictum. Mauris dapibus justo quam, ut fermentum diam ultrices et. Cras lobortis leo et finibus congue. Integer sed dui id mi efficitur efficitur. Quisque id gravida magna. Duis pharetra cursus metus vel pellentesque. Integer at magna ante. Donec aliquam nulla sem, at rhoncus ex tincidunt aliquam. Vestibulum sit amet hendrerit diam.
Mauris imperdiet dui eget massa malesuada mollis. Integer consectetur varius justo sit amet posuere. Aenean semper est at justo pulvinar finibus. Nunc ac maximus dui, a euismod orci. Mauris congue orci in ullamcorper pellentesque. Etiam tincidunt lorem id diam maximus elementum. Etiam in erat libero. Curabitur vehicula sodales mi, quis iaculis nulla consequat nec. Sed cursus lectus sed velit commodo, eu ultricies sapien pulvinar.
Nulla rutrum lacus est, vel lacinia ipsum euismod congue. Nunc vel vehicula orci. Sed eget nibh in dolor volutpat scelerisque. Ut porta viverra est, sed sollicitudin lorem euismod id. Proin interdum, lorem in luctus gravida, justo elit laoreet ante, nec malesuada diam mi ut lacus. Nunc nisl mi, hendrerit rutrum ligula id, auctor commodo ligula. Donec ullamcorper scelerisque sapien, vel feugiat justo molestie sed. Curabitur faucibus dignissim urna. Cras at sodales ante.
In varius, odio et feugiat hendrerit, lectus mauris faucibus mauris, at vulputate quam tellus vel sem. Fusce posuere turpis sem, porta imperdiet lorem feugiat a. Morbi iaculis dui nec accumsan scelerisque. Duis elit diam, fermentum non diam pretium, molestie venenatis nisl. Suspendisse faucibus dapibus ipsum nec placerat. Nulla sed pretium enim. Cras semper iaculis lacinia. Cras id vulputate orci, quis tristique ante. Phasellus nec suscipit tortor, viverra elementum augue.
Duis sed finibus dui. Nunc molestie vestibulum egestas. Sed in nisi dapibus, vehicula sem in, mattis orci. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque ut interdum lacus, id pulvinar risus. Donec blandit non sapien vitae gravida. Interdum et malesuada fames ac ante ipsum primis in faucibus.
Sed sit amet odio ut nulla consequat consectetur quis ut ipsum. Donec mollis sed neque quis luctus. Sed malesuada hendrerit tempor. Sed interdum maximus maximus. Cras placerat vel leo non fringilla. Praesent tincidunt semper malesuada. Vestibulum at tellus massa. Nulla nec lobortis urna. Duis lobortis pharetra odio, sed mattis quam congue non. Fusce elementum nisl metus, eget ultricies ex aliquet vel. Praesent fermentum tellus imperdiet rutrum fermentum. Donec mauris sapien, convallis non condimentum id, vehicula in diam. Nunc odio nisi, vehicula eu metus eu, lobortis faucibus sapien. Integer pulvinar maximus mauris, vel commodo est fringilla rhoncus.
Nam rutrum egestas molestie. Praesent urna odio, egestas quis ante in, rhoncus fermentum nisi. Ut pulvinar diam id tortor bibendum, mattis luctus nulla vulputate. Mauris arcu augue, imperdiet quis metus non, porttitor fringilla erat. Nulla vel venenatis elit, in placerat lectus. Fusce dui ante, commodo sit amet laoreet at, luctus quis ligula. In feugiat nibh a augue sollicitudin, eget pellentesque massa maximus. Aenean a velit id est cursus aliquam nec vel leo. Vestibulum non efficitur libero, non sodales felis. Cras a mauris eu metus mattis mollis. Integer ac nibh congue, iaculis arcu et, vestibulum ex. Sed vel orci blandit, blandit leo id, viverra enim. In lobortis diam sit amet risus cursus ultricies. Aliquam molestie porttitor velit, pellentesque placerat ligula pulvinar in. Vestibulum porta, est vitae elementum ultricies, turpis dolor lacinia nunc, id facilisis ante sem vehicula justo.
Nullam interdum sagittis ligula, id fringilla quam dignissim in. Vestibulum ac massa et lectus hendrerit finibus nec a lorem. Aenean at elementum enim, eu rhoncus purus. Maecenas porttitor sapien nec tristique rhoncus. Donec tortor velit, ultricies at posuere sed, laoreet sit amet nunc. In nulla magna, imperdiet ut ipsum eu, vehicula bibendum turpis. Etiam sed magna quis lectus tristique elementum. Aliquam felis nisi, varius eget turpis nec, volutpat tincidunt lectus. Donec elit massa, dapibus id velit eget, sodales vehicula ligula. Vestibulum varius libero lacinia auctor rhoncus. Aliquam placerat urna dolor, sit amet fringilla velit vehicula at. Nam quis nisl cursus, tempor eros quis, venenatis lorem.
Quisque a lectus in velit tincidunt sollicitudin a non sem. Proin feugiat orci et semper tempor. Nulla vulputate orci eu consectetur sagittis. Morbi auctor dui sit amet eros varius volutpat. Quisque in neque elit. Integer sollicitudin felis mattis, efficitur lorem et, vulputate odio. Etiam at augue ut libero tempus dapibus vitae varius purus. Sed in ipsum a neque faucibus placerat at ut eros. Etiam euismod eros nunc, sed vulputate purus dignissim id. Quisque egestas purus turpis, sed cursus sapien porttitor eget. Aliquam placerat neque eget nisl consectetur, et lobortis dolor congue. Vivamus tellus sapien, convallis quis vehicula at, ultricies nec quam. Phasellus arcu lacus, malesuada id est accumsan, ultricies viverra massa. Ut lorem sapien, lacinia sit amet metus id, vehicula vulputate eros. Aliquam lorem sapien, semper ac vehicula sit amet, efficitur sagittis lectus. Integer vel sapien aliquet, tempor augue ut, molestie libero.
</div>
Aside: How do I get percentages?
You would simply modify the above formula from:
scrollHeight - height
To:
scrollTop / ( scrollHeight - height) * 100
Percentage Example:
demo.addEventListener("scroll", function(e) {
let {scrollTop, scrollHeight} = e.currentTarget,
height = +getComputedStyle(e.currentTarget)["height"].slice(0,-2);
console.log("Scrolled " + parseInt((parseInt(scrollTop) / parseInt(scrollHeight - height)) * 100) + "% / 100% ");
});
html, body {
overflow: hidden;
}
div {
position: relative;
width: 50%;
left: calc(50% - 25%);
overflow: auto;
height: 101vh;
background: rgba(20,20,100, .3);
padding: 0px;
margin: 0px;
}
<div id="demo">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tellus mauris, molestie eu vehicula quis, suscipit quis nisl. Fusce lorem purus, rhoncus eget dui nec, sagittis tincidunt odio. Interdum et malesuada fames ac ante ipsum primis in faucibus. Etiam eget odio vitae nulla porttitor maximus a eget neque. Pellentesque dictum mollis ligula, a consequat tellus feugiat vitae. Donec rutrum elementum odio, vitae egestas tellus volutpat nec. Proin tempor, odio quis molestie iaculis, lectus nibh volutpat turpis, luctus rutrum ex felis sit amet velit. Donec blandit cursus tortor in malesuada. Vestibulum faucibus, lectus vel accumsan molestie, ligula velit pharetra leo, ac imperdiet nibh quam quis mi.
Pellentesque ac dui augue. Fusce sit amet condimentum dui. Donec sodales urna nec nisl commodo, ac porta magna consectetur. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec tincidunt tellus nunc, at accumsan orci scelerisque sed. Suspendisse facilisis feugiat massa, quis egestas sapien tempus nec. Curabitur nunc ipsum, ultricies sit amet nibh sed, tincidunt tristique diam. Cras sit amet scelerisque leo, a blandit dolor. Cras lobortis leo nec est luctus molestie. Curabitur non arcu malesuada, tincidunt dolor quis, bibendum orci. Vestibulum lobortis tortor ac erat consequat, ut consequat ex consectetur. Maecenas finibus efficitur orci, sit amet gravida ipsum vestibulum a. Aliquam quis dictum mi. Vivamus sagittis fringilla quam, sed feugiat libero lobortis nec. Praesent suscipit nulla at mollis rutrum. Sed et lacus at quam feugiat varius vitae et lectus.
Suspendisse feugiat lacus eget risus elementum convallis. Vestibulum fringilla mi ac mollis sagittis. Suspendisse vel sem tincidunt, condimentum urna at, dignissim magna. Curabitur pulvinar lectus eu massa pharetra facilisis. Quisque est nisl, feugiat vitae pellentesque vel, hendrerit sed enim. Ut at dui eget eros rhoncus venenatis malesuada sit amet ligula. Pellentesque cursus vulputate egestas. Sed euismod sem vel felis sollicitudin faucibus. Cras aliquet viverra turpis sit amet pulvinar. Aliquam pellentesque dolor a pulvinar egestas. Curabitur in sagittis sapien. Vestibulum nec ipsum a risus porttitor rhoncus vitae id ex. Ut mollis, ligula eu sollicitudin commodo, nibh nibh bibendum mi, vel luctus tellus est eget eros.
Aenean congue diam id urna tincidunt consectetur. Nunc vel semper ligula. Sed ultrices, odio eu venenatis interdum, ligula velit volutpat nisl, et malesuada eros massa id ante. Sed malesuada non nisl quis imperdiet. Praesent porta fringilla fermentum. Integer id massa at orci mollis accumsan in et dolor. Nullam nisi lectus, dignissim a dapibus id, posuere sed ex. Praesent consequat, dui non imperdiet aliquam, magna diam rhoncus enim, id molestie mauris nunc eget ante. Morbi et laoreet sapien, tempor malesuada tellus. Pellentesque lectus leo, egestas eget faucibus vitae, dapibus non enim. Duis eu leo sit amet augue molestie laoreet eu ut ipsum. Vestibulum nulla enim, tempus id varius ut, egestas non elit.
Sed tincidunt lorem sed tellus lobortis vulputate. Aliquam vel accumsan massa, id ornare arcu. Phasellus non erat ut erat mollis placerat. Aliquam laoreet laoreet eros, in elementum ex maximus quis. Pellentesque in dui at purus efficitur mattis. Etiam consequat, nunc vel feugiat fringilla, ante enim aliquet tellus, nec dapibus dui justo eget nibh. Praesent enim leo, tincidunt a dictum et, mollis at neque.
Fusce maximus, enim sed congue tempus, lorem tellus hendrerit massa, eget eleifend augue nisi eget eros. Aliquam vehicula eu enim et interdum. Nullam sollicitudin nisl sapien, quis euismod dolor vestibulum eget. Curabitur consectetur, nulla quis scelerisque tincidunt, sem turpis sagittis lacus, at tincidunt nunc felis et velit. Quisque nec malesuada lectus. Cras a lorem fermentum, tincidunt dolor a, dictum eros. Suspendisse augue tellus, cursus et ex sit amet, cursus sodales nibh. Pellentesque quis lacus aliquam libero bibendum eleifend. Interdum et malesuada fames ac ante ipsum primis in faucibus. Proin eget justo nec velit ultrices porttitor. Aenean vel accumsan arcu, sit amet finibus eros.
Sed ut convallis tortor, non dictum odio. Cras eu dictum sem. Cras laoreet lectus quis sapien volutpat bibendum. Vivamus ut finibus magna. Nunc aliquet tincidunt blandit. Pellentesque nisl tortor, malesuada eu est sed, congue fermentum nibh. Curabitur eu tellus nibh. Mauris quis eleifend lacus, id lacinia erat. Suspendisse id purus mauris. Cras ornare neque ac nulla blandit, eget faucibus turpis dictum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum mattis faucibus massa. Ut dignissim justo eget malesuada iaculis. Integer venenatis malesuada euismod. Nulla sollicitudin justo non consequat pharetra. Donec ultrices mi at neque tincidunt, in scelerisque sem vehicula.
Integer ac consectetur enim. Nunc sed fringilla magna. Nullam fermentum nisl nec venenatis condimentum. Mauris leo metus, convallis ut sem eu, tincidunt malesuada nunc. Cras metus lacus, sagittis ut convallis non, tempor vel turpis. Sed ultricies tristique odio id cursus. Praesent auctor ac ipsum faucibus ultrices. Donec id metus a sem aliquet suscipit. Maecenas mi sem, posuere non turpis id, vehicula placerat arcu. Curabitur tincidunt viverra neque ac pharetra. Curabitur vitae massa vehicula lorem tristique tempor. Duis congue nunc id lacus suscipit, ut laoreet enim malesuada.
Ut velit tellus, rhoncus a gravida id, aliquam quis dolor. Nam elementum purus non leo porttitor tempus. Curabitur tempor feugiat magna ac tempus. Ut cursus ultricies rutrum. Duis a feugiat arcu. Nullam bibendum metus sed nulla feugiat scelerisque vitae nec sem. Mauris aliquam vestibulum dui a commodo. Cras vel molestie metus. Quisque ac arcu odio. Phasellus pretium a leo non lacinia. Mauris et odio dui. Praesent commodo lorem eu erat pulvinar tincidunt. Praesent sagittis interdum mauris, eu egestas dolor volutpat dignissim. Duis posuere, arcu nec placerat ullamcorper, lectus nunc tempor mauris, vitae congue lacus arcu at enim.
Quisque eu massa sit amet dui accumsan pulvinar. Ut fermentum lectus eros, at iaculis enim consectetur quis. Ut semper, mi in vehicula lacinia, purus mi sagittis orci, rhoncus tristique magna leo vel purus. In congue feugiat arcu consequat pretium. Vestibulum sit amet pellentesque neque, a dignissim nisl. Maecenas ac dolor id justo feugiat varius vel sed turpis. Donec quis mi id nibh condimentum dictum. Mauris dapibus justo quam, ut fermentum diam ultrices et. Cras lobortis leo et finibus congue. Integer sed dui id mi efficitur efficitur. Quisque id gravida magna. Duis pharetra cursus metus vel pellentesque. Integer at magna ante. Donec aliquam nulla sem, at rhoncus ex tincidunt aliquam. Vestibulum sit amet hendrerit diam.
Mauris imperdiet dui eget massa malesuada mollis. Integer consectetur varius justo sit amet posuere. Aenean semper est at justo pulvinar finibus. Nunc ac maximus dui, a euismod orci. Mauris congue orci in ullamcorper pellentesque. Etiam tincidunt lorem id diam maximus elementum. Etiam in erat libero. Curabitur vehicula sodales mi, quis iaculis nulla consequat nec. Sed cursus lectus sed velit commodo, eu ultricies sapien pulvinar.
Nulla rutrum lacus est, vel lacinia ipsum euismod congue. Nunc vel vehicula orci. Sed eget nibh in dolor volutpat scelerisque. Ut porta viverra est, sed sollicitudin lorem euismod id. Proin interdum, lorem in luctus gravida, justo elit laoreet ante, nec malesuada diam mi ut lacus. Nunc nisl mi, hendrerit rutrum ligula id, auctor commodo ligula. Donec ullamcorper scelerisque sapien, vel feugiat justo molestie sed. Curabitur faucibus dignissim urna. Cras at sodales ante.
In varius, odio et feugiat hendrerit, lectus mauris faucibus mauris, at vulputate quam tellus vel sem. Fusce posuere turpis sem, porta imperdiet lorem feugiat a. Morbi iaculis dui nec accumsan scelerisque. Duis elit diam, fermentum non diam pretium, molestie venenatis nisl. Suspendisse faucibus dapibus ipsum nec placerat. Nulla sed pretium enim. Cras semper iaculis lacinia. Cras id vulputate orci, quis tristique ante. Phasellus nec suscipit tortor, viverra elementum augue.
Duis sed finibus dui. Nunc molestie vestibulum egestas. Sed in nisi dapibus, vehicula sem in, mattis orci. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque ut interdum lacus, id pulvinar risus. Donec blandit non sapien vitae gravida. Interdum et malesuada fames ac ante ipsum primis in faucibus.
Sed sit amet odio ut nulla consequat consectetur quis ut ipsum. Donec mollis sed neque quis luctus. Sed malesuada hendrerit tempor. Sed interdum maximus maximus. Cras placerat vel leo non fringilla. Praesent tincidunt semper malesuada. Vestibulum at tellus massa. Nulla nec lobortis urna. Duis lobortis pharetra odio, sed mattis quam congue non. Fusce elementum nisl metus, eget ultricies ex aliquet vel. Praesent fermentum tellus imperdiet rutrum fermentum. Donec mauris sapien, convallis non condimentum id, vehicula in diam. Nunc odio nisi, vehicula eu metus eu, lobortis faucibus sapien. Integer pulvinar maximus mauris, vel commodo est fringilla rhoncus.
Nam rutrum egestas molestie. Praesent urna odio, egestas quis ante in, rhoncus fermentum nisi. Ut pulvinar diam id tortor bibendum, mattis luctus nulla vulputate. Mauris arcu augue, imperdiet quis metus non, porttitor fringilla erat. Nulla vel venenatis elit, in placerat lectus. Fusce dui ante, commodo sit amet laoreet at, luctus quis ligula. In feugiat nibh a augue sollicitudin, eget pellentesque massa maximus. Aenean a velit id est cursus aliquam nec vel leo. Vestibulum non efficitur libero, non sodales felis. Cras a mauris eu metus mattis mollis. Integer ac nibh congue, iaculis arcu et, vestibulum ex. Sed vel orci blandit, blandit leo id, viverra enim. In lobortis diam sit amet risus cursus ultricies. Aliquam molestie porttitor velit, pellentesque placerat ligula pulvinar in. Vestibulum porta, est vitae elementum ultricies, turpis dolor lacinia nunc, id facilisis ante sem vehicula justo.
Nullam interdum sagittis ligula, id fringilla quam dignissim in. Vestibulum ac massa et lectus hendrerit finibus nec a lorem. Aenean at elementum enim, eu rhoncus purus. Maecenas porttitor sapien nec tristique rhoncus. Donec tortor velit, ultricies at posuere sed, laoreet sit amet nunc. In nulla magna, imperdiet ut ipsum eu, vehicula bibendum turpis. Etiam sed magna quis lectus tristique elementum. Aliquam felis nisi, varius eget turpis nec, volutpat tincidunt lectus. Donec elit massa, dapibus id velit eget, sodales vehicula ligula. Vestibulum varius libero lacinia auctor rhoncus. Aliquam placerat urna dolor, sit amet fringilla velit vehicula at. Nam quis nisl cursus, tempor eros quis, venenatis lorem.
Quisque a lectus in velit tincidunt sollicitudin a non sem. Proin feugiat orci et semper tempor. Nulla vulputate orci eu consectetur sagittis. Morbi auctor dui sit amet eros varius volutpat. Quisque in neque elit. Integer sollicitudin felis mattis, efficitur lorem et, vulputate odio. Etiam at augue ut libero tempus dapibus vitae varius purus. Sed in ipsum a neque faucibus placerat at ut eros. Etiam euismod eros nunc, sed vulputate purus dignissim id. Quisque egestas purus turpis, sed cursus sapien porttitor eget. Aliquam placerat neque eget nisl consectetur, et lobortis dolor congue. Vivamus tellus sapien, convallis quis vehicula at, ultricies nec quam. Phasellus arcu lacus, malesuada id est accumsan, ultricies viverra massa. Ut lorem sapien, lacinia sit amet metus id, vehicula vulputate eros. Aliquam lorem sapien, semper ac vehicula sit amet, efficitur sagittis lectus. Integer vel sapien aliquet, tempor augue ut, molestie libero.
</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;">HTML5</div>
<div class="skillbar-bar" style="background: #e67e22;"></div>
<div class="skill-bar-percent">0%</div>
</div>
 
 
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.

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 disable mousewheel scroll in chrome with javascript/jquery [duplicate]

This question already has answers here:
Disabling mouse scrolling
(4 answers)
Closed 3 years ago.
I used
$('body').bind("mousewheel", function() {
return false;
});
It's working at first. but suddenly it wasn't working at all.
On chrome console wrote the issue:
"[Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive.
https://www.chromestatus.com/features/6662647093133312"
Is there other way to disable mousewheel?
https://jsfiddle.net/7b0rzaL4/10/

There's a simpler way - just use onwheel. Try scrolling in the snippet below - you can't unless you use the scroll bar:
window.onwheel = () => false;
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent lacinia est quam, in varius ipsum vulputate vitae. Nunc porttitor vulputate augue, a feugiat lorem rutrum a. Sed ac mi ultrices, tristique felis sit amet, lacinia libero. Pellentesque viverra
quis purus eget facilisis. Donec sit amet eros pellentesque orci pulvinar egestas et quis mauris. Nam suscipit nec orci congue ultricies. Cras eleifend sem enim, a pellentesque leo tempor vel. Suspendisse potenti. Vestibulum non auctor felis, eu aliquet
sem. Nullam ut urna sed lectus malesuada accumsan. Aliquam consectetur purus id ligula lacinia rhoncus. In a feugiat est.
Donec ut porttitor nunc, et tempus lectus. Mauris fringilla id nisi vitae lobortis. Morbi malesuada sem non mollis volutpat. Maecenas rutrum nulla nisl. Curabitur iaculis lacinia congue. Cras tortor neque, ultrices vel finibus sit amet, porttitor in metus.
Integer eget fringilla massa. Donec dignissim nunc a sagittis vestibulum. Mauris eget nibh ut neque feugiat suscipit a nec orci.
Nam aliquam malesuada metus, in viverra dolor pellentesque a. Maecenas blandit rutrum diam non lacinia. Etiam magna justo, laoreet pulvinar odio eget, tristique elementum lorem. Pellentesque aliquam lacinia velit, vitae sollicitudin massa rutrum sed.
Ut a sagittis leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent iaculis, nisl non cursus consequat, lectus quam bibendum mi, in finibus sapien magna vel nibh. Vivamus rhoncus nisi non ex fringilla,
eget tincidunt arcu condimentum. Aenean lobortis orci venenatis risus semper, sed malesuada ex maximus. Sed non placerat quam. Donec pulvinar neque et enim blandit, nec dignissim felis ultricies. Nulla a lacus scelerisque leo aliquet malesuada.
Aliquam odio erat, facilisis pharetra diam ac, tincidunt volutpat orci. Nam a nibh dapibus, dignissim mi non, bibendum libero. Duis sit amet iaculis lorem. Aenean fringilla, massa id tempor blandit, nunc diam efficitur ligula, sed luctus ligula purus
sed erat. Etiam lacinia, velit ut tempor condimentum, sapien mi molestie risus, ornare cursus ex lorem sit amet purus. Vestibulum nibh mauris, elementum pretium vehicula quis, volutpat porttitor leo. In imperdiet, ligula id tempus euismod, nunc lectus
bibendum purus, eget facilisis tellus nisi sit amet dui. Donec at pretium risus, sed maximus turpis. Morbi rhoncus urna erat, in sagittis velit condimentum in. Pellentesque vel facilisis lectus. Phasellus quis molestie ligula, in sodales lacus.
Sed scelerisque eros at metus molestie, quis molestie ex placerat. Quisque vitae feugiat lectus, sed volutpat risus. Nulla facilisi. Nunc finibus vel mi elementum aliquet. Duis vehicula lectus dui, ut rutrum lectus porttitor vulputate. Sed quis dapibus
turpis. Maecenas volutpat lorem ut velit tempor sagittis.
Aenean ultricies sapien at elit tempor ornare. Sed felis mauris, dictum eget sollicitudin vel, cursus quis sem. Quisque pharetra aliquet ligula, vitae ornare lectus rhoncus in. Duis et sapien consectetur, eleifend sem volutpat, vestibulum dolor. Sed feugiat
maximus augue, eget scelerisque nisi posuere eget. Donec egestas, dui non pellentesque bibendum, augue quam consequat augue, vel malesuada turpis lectus in nunc. Curabitur non lacinia dui.
In hac habitasse platea dictumst. In venenatis ipsum at nunc blandit sagittis. Vestibulum consectetur eu ipsum at semper. Nulla a eros elit. Phasellus ut elit quis leo mollis feugiat eget id mi. Fusce dignissim ultrices nibh, sit amet euismod odio vulputate
eget. Morbi velit ante, interdum a ante id, facilisis bibendum elit. Fusce ac massa bibendum, suscipit quam quis, vestibulum ante. Nunc sit amet magna vel dui commodo pellentesque vel vitae lacus.
Nam lobortis diam eget magna aliquet pretium. Donec tincidunt tristique erat a tincidunt. Nam ac lectus et dolor rutrum consequat. Integer sed nunc suscipit erat venenatis malesuada et gravida turpis. Phasellus nec felis quis lectus sollicitudin finibus.
Aliquam bibendum eu nibh ut tincidunt. In pharetra nisl quis metus aliquet lobortis. Donec consequat elit sit amet velit rutrum tempor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc tincidunt justo nec
metus aliquet, in pretium magna venenatis. Mauris id tellus pharetra felis dapibus dictum a in elit. In eu viverra purus, id bibendum dolor. Nunc eleifend metus eu tortor accumsan, at ullamcorper leo tincidunt. Suspendisse sit amet posuere magna. Sed
vitae ullamcorper libero, eu volutpat orci. Sed viverra placerat nunc, sit amet efficitur dolor aliquet ac.
Nulla facilisis non eros vel aliquet. Morbi finibus libero tincidunt nisl porta feugiat. In ut suscipit orci. Nunc vulputate, diam nec blandit lobortis, tortor diam facilisis turpis, non volutpat sapien massa nec augue. Phasellus et dolor in elit cursus
consequat. Etiam auctor, eros at blandit consequat, nisi neque ultricies justo, id rutrum urna lacus at velit. Aliquam hendrerit maximus ligula sed laoreet. Donec ultrices dignissim lectus, quis rhoncus massa viverra ut.
Fusce tristique sapien vitae nibh sodales hendrerit. Proin tincidunt iaculis ante ac dignissim. Vestibulum a finibus dui. Pellentesque at eleifend lorem. Fusce in magna imperdiet, dignissim enim sit amet, auctor nisl. Aliquam pharetra orci non vulputate
convallis. Donec a ante semper, dapibus lectus a, pulvinar lorem. Morbi ut bibendum ligula.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent lacinia est quam, in varius ipsum vulputate vitae. Nunc porttitor vulputate augue, a feugiat lorem rutrum a. Sed ac mi ultrices, tristique felis sit amet, lacinia libero. Pellentesque viverra
quis purus eget facilisis. Donec sit amet eros pellentesque orci pulvinar egestas et quis mauris. Nam suscipit nec orci congue ultricies. Cras eleifend sem enim, a pellentesque leo tempor vel. Suspendisse potenti. Vestibulum non auctor felis, eu aliquet
sem. Nullam ut urna sed lectus malesuada accumsan. Aliquam consectetur purus id ligula lacinia rhoncus. In a feugiat est.
Donec ut porttitor nunc, et tempus lectus. Mauris fringilla id nisi vitae lobortis. Morbi malesuada sem non mollis volutpat. Maecenas rutrum nulla nisl. Curabitur iaculis lacinia congue. Cras tortor neque, ultrices vel finibus sit amet, porttitor in metus.
Integer eget fringilla massa. Donec dignissim nunc a sagittis vestibulum. Mauris eget nibh ut neque feugiat suscipit a nec orci.
Nam aliquam malesuada metus, in viverra dolor pellentesque a. Maecenas blandit rutrum diam non lacinia. Etiam magna justo, laoreet pulvinar odio eget, tristique elementum lorem. Pellentesque aliquam lacinia velit, vitae sollicitudin massa rutrum sed.
Ut a sagittis leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent iaculis, nisl non cursus consequat, lectus quam bibendum mi, in finibus sapien magna vel nibh. Vivamus rhoncus nisi non ex fringilla,
eget tincidunt arcu condimentum. Aenean lobortis orci venenatis risus semper, sed malesuada ex maximus. Sed non placerat quam. Donec pulvinar neque et enim blandit, nec dignissim felis ultricies. Nulla a lacus scelerisque leo aliquet malesuada.
Aliquam odio erat, facilisis pharetra diam ac, tincidunt volutpat orci. Nam a nibh dapibus, dignissim mi non, bibendum libero. Duis sit amet iaculis lorem. Aenean fringilla, massa id tempor blandit, nunc diam efficitur ligula, sed luctus ligula purus
sed erat. Etiam lacinia, velit ut tempor condimentum, sapien mi molestie risus, ornare cursus ex lorem sit amet purus. Vestibulum nibh mauris, elementum pretium vehicula quis, volutpat porttitor leo. In imperdiet, ligula id tempus euismod, nunc lectus
bibendum purus, eget facilisis tellus nisi sit amet dui. Donec at pretium risus, sed maximus turpis. Morbi rhoncus urna erat, in sagittis velit condimentum in. Pellentesque vel facilisis lectus. Phasellus quis molestie ligula, in sodales lacus.
Sed scelerisque eros at metus molestie, quis molestie ex placerat. Quisque vitae feugiat lectus, sed volutpat risus. Nulla facilisi. Nunc finibus vel mi elementum aliquet. Duis vehicula lectus dui, ut rutrum lectus porttitor vulputate. Sed quis dapibus
turpis. Maecenas volutpat lorem ut velit tempor sagittis.
Aenean ultricies sapien at elit tempor ornare. Sed felis mauris, dictum eget sollicitudin vel, cursus quis sem. Quisque pharetra aliquet ligula, vitae ornare lectus rhoncus in. Duis et sapien consectetur, eleifend sem volutpat, vestibulum dolor. Sed feugiat
maximus augue, eget scelerisque nisi posuere eget. Donec egestas, dui non pellentesque bibendum, augue quam consequat augue, vel malesuada turpis lectus in nunc. Curabitur non lacinia dui.
In hac habitasse platea dictumst. In venenatis ipsum at nunc blandit sagittis. Vestibulum consectetur eu ipsum at semper. Nulla a eros elit. Phasellus ut elit quis leo mollis feugiat eget id mi. Fusce dignissim ultrices nibh, sit amet euismod odio vulputate
eget. Morbi velit ante, interdum a ante id, facilisis bibendum elit. Fusce ac massa bibendum, suscipit quam quis, vestibulum ante. Nunc sit amet magna vel dui commodo pellentesque vel vitae lacus.
Nam lobortis diam eget magna aliquet pretium. Donec tincidunt tristique erat a tincidunt. Nam ac lectus et dolor rutrum consequat. Integer sed nunc suscipit erat venenatis malesuada et gravida turpis. Phasellus nec felis quis lectus sollicitudin finibus.
Aliquam bibendum eu nibh ut tincidunt. In pharetra nisl quis metus aliquet lobortis. Donec consequat elit sit amet velit rutrum tempor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc tincidunt justo nec
metus aliquet, in pretium magna venenatis. Mauris id tellus pharetra felis dapibus dictum a in elit. In eu viverra purus, id bibendum dolor. Nunc eleifend metus eu tortor accumsan, at ullamcorper leo tincidunt. Suspendisse sit amet posuere magna. Sed
vitae ullamcorper libero, eu volutpat orci. Sed viverra placerat nunc, sit amet efficitur dolor aliquet ac.
Nulla facilisis non eros vel aliquet. Morbi finibus libero tincidunt nisl porta feugiat. In ut suscipit orci. Nunc vulputate, diam nec blandit lobortis, tortor diam facilisis turpis, non volutpat sapien massa nec augue. Phasellus et dolor in elit cursus
consequat. Etiam auctor, eros at blandit consequat, nisi neque ultricies justo, id rutrum urna lacus at velit. Aliquam hendrerit maximus ligula sed laoreet. Donec ultrices dignissim lectus, quis rhoncus massa viverra ut.
Fusce tristique sapien vitae nibh sodales hendrerit. Proin tincidunt iaculis ante ac dignissim. Vestibulum a finibus dui. Pellentesque at eleifend lorem. Fusce in magna imperdiet, dignissim enim sit amet, auctor nisl. Aliquam pharetra orci non vulputate
convallis. Donec a ante semper, dapibus lectus a, pulvinar lorem. Morbi ut bibendum ligula.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent lacinia est quam, in varius ipsum vulputate vitae. Nunc porttitor vulputate augue, a feugiat lorem rutrum a. Sed ac mi ultrices, tristique felis sit amet, lacinia libero. Pellentesque viverra
quis purus eget facilisis. Donec sit amet eros pellentesque orci pulvinar egestas et quis mauris. Nam suscipit nec orci congue ultricies. Cras eleifend sem enim, a pellentesque leo tempor vel. Suspendisse potenti. Vestibulum non auctor felis, eu aliquet
sem. Nullam ut urna sed lectus malesuada accumsan. Aliquam consectetur purus id ligula lacinia rhoncus. In a feugiat est.
Donec ut porttitor nunc, et tempus lectus. Mauris fringilla id nisi vitae lobortis. Morbi malesuada sem non mollis volutpat. Maecenas rutrum nulla nisl. Curabitur iaculis lacinia congue. Cras tortor neque, ultrices vel finibus sit amet, porttitor in metus.
Integer eget fringilla massa. Donec dignissim nunc a sagittis vestibulum. Mauris eget nibh ut neque feugiat suscipit a nec orci.
Nam aliquam malesuada metus, in viverra dolor pellentesque a. Maecenas blandit rutrum diam non lacinia. Etiam magna justo, laoreet pulvinar odio eget, tristique elementum lorem. Pellentesque aliquam lacinia velit, vitae sollicitudin massa rutrum sed.
Ut a sagittis leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent iaculis, nisl non cursus consequat, lectus quam bibendum mi, in finibus sapien magna vel nibh. Vivamus rhoncus nisi non ex fringilla,
eget tincidunt arcu condimentum. Aenean lobortis orci venenatis risus semper, sed malesuada ex maximus. Sed non placerat quam. Donec pulvinar neque et enim blandit, nec dignissim felis ultricies. Nulla a lacus scelerisque leo aliquet malesuada.
Aliquam odio erat, facilisis pharetra diam ac, tincidunt volutpat orci. Nam a nibh dapibus, dignissim mi non, bibendum libero. Duis sit amet iaculis lorem. Aenean fringilla, massa id tempor blandit, nunc diam efficitur ligula, sed luctus ligula purus
sed erat. Etiam lacinia, velit ut tempor condimentum, sapien mi molestie risus, ornare cursus ex lorem sit amet purus. Vestibulum nibh mauris, elementum pretium vehicula quis, volutpat porttitor leo. In imperdiet, ligula id tempus euismod, nunc lectus
bibendum purus, eget facilisis tellus nisi sit amet dui. Donec at pretium risus, sed maximus turpis. Morbi rhoncus urna erat, in sagittis velit condimentum in. Pellentesque vel facilisis lectus. Phasellus quis molestie ligula, in sodales lacus.
Sed scelerisque eros at metus molestie, quis molestie ex placerat. Quisque vitae feugiat lectus, sed volutpat risus. Nulla facilisi. Nunc finibus vel mi elementum aliquet. Duis vehicula lectus dui, ut rutrum lectus porttitor vulputate. Sed quis dapibus
turpis. Maecenas volutpat lorem ut velit tempor sagittis.
Aenean ultricies sapien at elit tempor ornare. Sed felis mauris, dictum eget sollicitudin vel, cursus quis sem. Quisque pharetra aliquet ligula, vitae ornare lectus rhoncus in. Duis et sapien consectetur, eleifend sem volutpat, vestibulum dolor. Sed feugiat
maximus augue, eget scelerisque nisi posuere eget. Donec egestas, dui non pellentesque bibendum, augue quam consequat augue, vel malesuada turpis lectus in nunc. Curabitur non lacinia dui.
In hac habitasse platea dictumst. In venenatis ipsum at nunc blandit sagittis. Vestibulum consectetur eu ipsum at semper. Nulla a eros elit. Phasellus ut elit quis leo mollis feugiat eget id mi. Fusce dignissim ultrices nibh, sit amet euismod odio vulputate
eget. Morbi velit ante, interdum a ante id, facilisis bibendum elit. Fusce ac massa bibendum, suscipit quam quis, vestibulum ante. Nunc sit amet magna vel dui commodo pellentesque vel vitae lacus.
Nam lobortis diam eget magna aliquet pretium. Donec tincidunt tristique erat a tincidunt. Nam ac lectus et dolor rutrum consequat. Integer sed nunc suscipit erat venenatis malesuada et gravida turpis. Phasellus nec felis quis lectus sollicitudin finibus.
Aliquam bibendum eu nibh ut tincidunt. In pharetra nisl quis metus aliquet lobortis. Donec consequat elit sit amet velit rutrum tempor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc tincidunt justo nec
metus aliquet, in pretium magna venenatis. Mauris id tellus pharetra felis dapibus dictum a in elit. In eu viverra purus, id bibendum dolor. Nunc eleifend metus eu tortor accumsan, at ullamcorper leo tincidunt. Suspendisse sit amet posuere magna. Sed
vitae ullamcorper libero, eu volutpat orci. Sed viverra placerat nunc, sit amet efficitur dolor aliquet ac.
Nulla facilisis non eros vel aliquet. Morbi finibus libero tincidunt nisl porta feugiat. In ut suscipit orci. Nunc vulputate, diam nec blandit lobortis, tortor diam facilisis turpis, non volutpat sapien massa nec augue. Phasellus et dolor in elit cursus
consequat. Etiam auctor, eros at blandit consequat, nisi neque ultricies justo, id rutrum urna lacus at velit. Aliquam hendrerit maximus ligula sed laoreet. Donec ultrices dignissim lectus, quis rhoncus massa viverra ut.
Fusce tristique sapien vitae nibh sodales hendrerit. Proin tincidunt iaculis ante ac dignissim. Vestibulum a finibus dui. Pellentesque at eleifend lorem. Fusce in magna imperdiet, dignissim enim sit amet, auctor nisl. Aliquam pharetra orci non vulputate
convallis. Donec a ante semper, dapibus lectus a, pulvinar lorem. Morbi ut bibendum ligula.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent lacinia est quam, in varius ipsum vulputate vitae. Nunc porttitor vulputate augue, a feugiat lorem rutrum a. Sed ac mi ultrices, tristique felis sit amet, lacinia libero. Pellentesque viverra
quis purus eget facilisis. Donec sit amet eros pellentesque orci pulvinar egestas et quis mauris. Nam suscipit nec orci congue ultricies. Cras eleifend sem enim, a pellentesque leo tempor vel. Suspendisse potenti. Vestibulum non auctor felis, eu aliquet
sem. Nullam ut urna sed lectus malesuada accumsan. Aliquam consectetur purus id ligula lacinia rhoncus. In a feugiat est.
Donec ut porttitor nunc, et tempus lectus. Mauris fringilla id nisi vitae lobortis. Morbi malesuada sem non mollis volutpat. Maecenas rutrum nulla nisl. Curabitur iaculis lacinia congue. Cras tortor neque, ultrices vel finibus sit amet, porttitor in metus.
Integer eget fringilla massa. Donec dignissim nunc a sagittis vestibulum. Mauris eget nibh ut neque feugiat suscipit a nec orci.
Nam aliquam malesuada metus, in viverra dolor pellentesque a. Maecenas blandit rutrum diam non lacinia. Etiam magna justo, laoreet pulvinar odio eget, tristique elementum lorem. Pellentesque aliquam lacinia velit, vitae sollicitudin massa rutrum sed.
Ut a sagittis leo. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Praesent iaculis, nisl non cursus consequat, lectus quam bibendum mi, in finibus sapien magna vel nibh. Vivamus rhoncus nisi non ex fringilla,
eget tincidunt arcu condimentum. Aenean lobortis orci venenatis risus semper, sed malesuada ex maximus. Sed non placerat quam. Donec pulvinar neque et enim blandit, nec dignissim felis ultricies. Nulla a lacus scelerisque leo aliquet malesuada.
Aliquam odio erat, facilisis pharetra diam ac, tincidunt volutpat orci. Nam a nibh dapibus, dignissim mi non, bibendum libero. Duis sit amet iaculis lorem. Aenean fringilla, massa id tempor blandit, nunc diam efficitur ligula, sed luctus ligula purus
sed erat. Etiam lacinia, velit ut tempor condimentum, sapien mi molestie risus, ornare cursus ex lorem sit amet purus. Vestibulum nibh mauris, elementum pretium vehicula quis, volutpat porttitor leo. In imperdiet, ligula id tempus euismod, nunc lectus
bibendum purus, eget facilisis tellus nisi sit amet dui. Donec at pretium risus, sed maximus turpis. Morbi rhoncus urna erat, in sagittis velit condimentum in. Pellentesque vel facilisis lectus. Phasellus quis molestie ligula, in sodales lacus.
Sed scelerisque eros at metus molestie, quis molestie ex placerat. Quisque vitae feugiat lectus, sed volutpat risus. Nulla facilisi. Nunc finibus vel mi elementum aliquet. Duis vehicula lectus dui, ut rutrum lectus porttitor vulputate. Sed quis dapibus
turpis. Maecenas volutpat lorem ut velit tempor sagittis.
Aenean ultricies sapien at elit tempor ornare. Sed felis mauris, dictum eget sollicitudin vel, cursus quis sem. Quisque pharetra aliquet ligula, vitae ornare lectus rhoncus in. Duis et sapien consectetur, eleifend sem volutpat, vestibulum dolor. Sed feugiat
maximus augue, eget scelerisque nisi posuere eget. Donec egestas, dui non pellentesque bibendum, augue quam consequat augue, vel malesuada turpis lectus in nunc. Curabitur non lacinia dui.
In hac habitasse platea dictumst. In venenatis ipsum at nunc blandit sagittis. Vestibulum consectetur eu ipsum at semper. Nulla a eros elit. Phasellus ut elit quis leo mollis feugiat eget id mi. Fusce dignissim ultrices nibh, sit amet euismod odio vulputate
eget. Morbi velit ante, interdum a ante id, facilisis bibendum elit. Fusce ac massa bibendum, suscipit quam quis, vestibulum ante. Nunc sit amet magna vel dui commodo pellentesque vel vitae lacus.
Nam lobortis diam eget magna aliquet pretium. Donec tincidunt tristique erat a tincidunt. Nam ac lectus et dolor rutrum consequat. Integer sed nunc suscipit erat venenatis malesuada et gravida turpis. Phasellus nec felis quis lectus sollicitudin finibus.
Aliquam bibendum eu nibh ut tincidunt. In pharetra nisl quis metus aliquet lobortis. Donec consequat elit sit amet velit rutrum tempor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc tincidunt justo nec
metus aliquet, in pretium magna venenatis. Mauris id tellus pharetra felis dapibus dictum a in elit. In eu viverra purus, id bibendum dolor. Nunc eleifend metus eu tortor accumsan, at ullamcorper leo tincidunt. Suspendisse sit amet posuere magna. Sed
vitae ullamcorper libero, eu volutpat orci. Sed viverra placerat nunc, sit amet efficitur dolor aliquet ac.
Nulla facilisis non eros vel aliquet. Morbi finibus libero tincidunt nisl porta feugiat. In ut suscipit orci. Nunc vulputate, diam nec blandit lobortis, tortor diam facilisis turpis, non volutpat sapien massa nec augue. Phasellus et dolor in elit cursus
consequat. Etiam auctor, eros at blandit consequat, nisi neque ultricies justo, id rutrum urna lacus at velit. Aliquam hendrerit maximus ligula sed laoreet. Donec ultrices dignissim lectus, quis rhoncus massa viverra ut.
Fusce tristique sapien vitae nibh sodales hendrerit. Proin tincidunt iaculis ante ac dignissim. Vestibulum a finibus dui. Pellentesque at eleifend lorem. Fusce in magna imperdiet, dignissim enim sit amet, auctor nisl. Aliquam pharetra orci non vulputate
convallis. Donec a ante semper, dapibus lectus a, pulvinar lorem. Morbi ut bibendum ligula.

You can check this
$(window).on("mousewheel", function(e){
if(e.originalEvent.deltaY > 0) {
e.preventDefault();
return;
} else if (e.originalEvent.wheelDeltaY < 0) {
e.preventDefault();
return;
}
});

Compare old document height to new document height using javascript

Please i want to compare my div with id = message old document height to new document height.
If there is a difference, then it should scroll to bottom automatically, else nothing should happen. I wish to do this in pure javascript.
This is what i have so far but confused on how to get things done.I know there is surely a way but not succeeding.
function Scroll(){
var elem = document.getElementById('message');
elem.scrollTop = elem.scrollHeight;
}
Thanks for quick response.

If you just want a one-step 'jump' scroll, you can use
window.scrollTo(0, document.body.scrollHeight):
function Scroll() {
var elem = document.getElementById('message');
if (elem.scrollHeight > window.innerHeight) {
window.scrollTo(0, document.body.scrollHeight);
}
}
Scroll();
<div id="message">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam non lorem efficitur eros fringilla vestibulum vel in nisl. Nullam porttitor auctor euismod. Duis efficitur eu ipsum sit amet porta. Etiam sagittis velit id urna ultricies, id semper nisi
ornare. Donec ullamcorper orci dui, et eleifend metus dictum quis. Donec libero nisl, sodales at odio sit amet, dignissim egestas enim. Pellentesque consectetur erat eget tellus vehicula efficitur. Interdum et malesuada fames ac ante ipsum primis in
faucibus. Vivamus suscipit, lacus id maximus fermentum, erat velit venenatis diam, ac viverra mi erat in nunc. Aenean eu urna dignissim, elementum dui quis, elementum eros. Duis eleifend metus sed risus sodales efficitur. Fusce sit amet ipsum et magna
luctus tristique. Mauris vitae libero et odio aliquet rhoncus. Donec sed dui ac massa volutpat elementum. Nullam et nibh sit amet nisl accumsan placerat. Morbi at tortor non metus tempor euismod. Nam eget mi at diam sodales tristique non et lacus. Aenean
non nunc imperdiet, consectetur nibh egestas, semper orci. Sed tristique sem odio. Phasellus ultrices lorem venenatis purus pellentesque, in vestibulum augue congue. Vestibulum eu maximus mauris. Nulla facilisi. Etiam in semper velit, nec accumsan nunc.
Curabitur vel fermentum velit, quis blandit velit. Cras eu scelerisque est. Nunc vel dictum ipsum. Maecenas eleifend efficitur metus nec auctor. Donec ut enim hendrerit, gravida urna eu, hendrerit mauris. Proin orci nulla, tristique vitae pharetra ut,
blandit eget erat. Sed lectus mauris, fringilla ut felis nec, feugiat faucibus sapien. Morbi est felis, suscipit at tellus pharetra, interdum gravida lectus. Praesent molestie euismod sagittis. Sed blandit dictum magna, ac ornare elit dignissim eget.
Morbi varius libero sit amet est fermentum, id convallis quam interdum. Praesent posuere eros id dignissim euismod. Sed urna quam, facilisis quis lacinia sit amet, pellentesque et lacus. Vivamus faucibus sagittis dictum. Duis posuere, ipsum elementum
molestie pulvinar, elit odio lobortis ipsum, non finibus velit urna vel neque. Aliquam vehicula augue non sapien fringilla varius. Suspendisse at pellentesque nibh. Vestibulum sollicitudin lacus quis lectus hendrerit venenatis at ut lacus. Donec condimentum
fringilla tellus id bibendum. Donec facilisis elit erat, at varius velit dictum vel. Vivamus bibendum tincidunt justo, lobortis euismod tortor semper vel. Morbi non felis tortor. Aliquam vitae elementum ligula. Praesent sem risus, gravida vitae neque
iaculis, interdum maximus nibh. Etiam eu ullamcorper dui. Etiam mauris lectus, bibendum quis semper eget, egestas a nunc. Maecenas maximus pharetra mi id egestas.</div>
Hope this helps!

Develop Reference

JavaScript is the programming language of the Web.