I have the following sticky header that appears when you scroll down the page past 100px.
var scrollpos = window.scrollY;
var header = document.getElementById("masthead");
function add_class_on_scroll() {
header.classList.add("slide-in");
}
function remove_class_on_scroll() {
header.classList.remove("slide-in");
}
window.addEventListener('scroll', function(){
scrollpos = window.scrollY;
if(scrollpos > 188) {
add_class_on_scroll();
}
else {
remove_class_on_scroll();
}
});
html {
box-sizing: border-box;
}
body {
margin: 0;
}
.site {
position: relative;
}
.site-header {
position: relative;
top: -100px;
height: 100px;
background-color: #f5f5f5;
transition: top ease-in-out 1s;
display: flex;
justify-content: center;
align-items: center;
}
.slide-in {
position: sticky;
top: 0;
}
<div class="site">
<header id="masthead" class="site-header">
<p>I'm the site header</p>
</header>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce consectetur diam dui. Curabitur egestas augue non arcu tincidunt, ut fermentum mi lacinia. Sed vehicula non lectus at efficitur. Sed bibendum ipsum sed cursus condimentum. Maecenas non leo semper nisl consequat vestibulum. Maecenas vestibulum sodales metus, in varius ante efficitur a. Integer ipsum orci, ultrices facilisis mi sed, bibendum egestas ipsum. Maecenas nec elit non libero bibendum condimentum.</p>
<p>Suspendisse potenti. Vestibulum vestibulum, diam eleifend mattis dictum, ante nulla semper est, at fermentum leo ligula sit amet nunc. Nullam gravida sem et urna maximus, eu efficitur eros hendrerit. Aliquam convallis facilisis mi sed congue. Praesent pulvinar vehicula urna, quis iaculis nisi vestibulum non. Aliquam pulvinar risus id blandit malesuada. Proin pharetra, nibh nec consequat fringilla, erat quam sollicitudin orci, id tincidunt ex justo in diam. Vestibulum eleifend metus urna, at interdum arcu venenatis ac. Nam euismod, lorem ac fringilla bibendum, dui massa volutpat nulla, non aliquam nisi ligula id ligula. Sed iaculis viverra nisi eget mattis.</p>
<p>Phasellus ac lacus tincidunt, vestibulum dolor eget, dictum massa. Fusce fringilla lorem sed ex placerat ornare. Aenean in consequat mauris, in dapibus enim. Sed commodo posuere est ut lobortis. Nulla elementum pretium ante eu elementum. Nulla facilisi. Curabitur quam velit, varius nec leo vitae, scelerisque dignissim justo.</p>
<p>Donec nec rutrum tortor, ac semper dolor. Maecenas id laoreet orci. Vivamus tincidunt commodo nisi sit amet posuere. Vestibulum pretium risus ante, non mattis ex eleifend quis. Ut id scelerisque tortor, quis ullamcorper orci. Sed vestibulum pharetra nibh. Donec ultricies nibh neque, vitae ullamcorper elit rhoncus a. Nunc odio turpis, euismod at tempus vitae, aliquet in lectus. Praesent vehicula lectus et enim fringilla feugiat.</p>
<p>Quisque eleifend libero a mi sodales vehicula. Aliquam erat volutpat. Maecenas dignissim rutrum auctor. Vestibulum pretium lacus quis vehicula placerat. Cras placerat leo non libero imperdiet, ac tristique ligula feugiat. Aliquam semper aliquam ligula, sed fermentum erat sagittis eget. Donec lorem urna, tristique at suscipit sed, euismod nec odio.</p>
<p>Aliquam lobortis lorem non libero varius, in ultricies ipsum ornare. Sed imperdiet elementum ligula, non blandit nunc imperdiet quis. Vivamus ut dictum est, quis euismod orci. Sed eget magna ac massa gravida porta. Donec nibh massa, scelerisque ac tempus a, fringilla vel nunc. Aenean malesuada pulvinar quam sed pretium. Aenean id dui a neque lobortis dictum vitae ac ipsum. Donec interdum ligula mattis enim facilisis vehicula facilisis id eros. Donec eu dolor sit amet neque ultricies faucibus nec et arcu. Proin vulputate elementum dui nec gravida. Nunc odio justo, consequat non tortor ut, rutrum mollis magna. Donec ac leo elit. Fusce hendrerit maximus est mattis porta. Praesent malesuada interdum orci nec viverra. Mauris porta ligula in auctor tincidunt. Suspendisse potenti.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse aliquet purus quis enim egestas tincidunt. Maecenas mattis ut metus eget viverra. Praesent hendrerit odio tincidunt, feugiat metus quis, gravida turpis. Aenean sed mauris commodo libero placerat malesuada eu accumsan lacus. Mauris mi tortor, fringilla nec velit tristique, eleifend pulvinar nunc. Integer nec accumsan mauris. Maecenas mattis, est sit amet congue consectetur, mi massa dignissim urna, ut efficitur orci est et ex. In ac lorem viverra, dictum libero at, pellentesque neque. Cras congue volutpat diam ac luctus. Etiam iaculis augue enim, eget pharetra ligula posuere ac.</p>
<p>Curabitur elementum malesuada nulla, nec semper lectus pretium eget. Proin tempor tortor sed lectus sollicitudin bibendum. Donec non sodales nibh. Suspendisse gravida, purus eget fringilla sagittis, quam ex tempus nisl, quis consectetur orci elit in nisi. Nam tincidunt finibus leo sed consectetur. Etiam sit amet ex aliquet, varius augue ac, consequat nisl. Integer ac dignissim lacus. Ut at facilisis ligula, vel viverra mauris. Phasellus ut egestas turpis. Phasellus sit amet quam ut dui hendrerit tincidunt eget et nisi. Donec tempor dapibus enim. Etiam eget nunc eleifend, hendrerit diam vitae, fringilla mi. Nunc a condimentum felis.</p>
<p>Vestibulum pharetra ultricies ultrices. Vestibulum cursus ante felis. Sed aliquet, elit eget posuere consequat, mauris arcu tincidunt dolor, at porta erat orci a felis. In quis viverra diam. Vestibulum porta nisi purus, lacinia placerat ligula posuere et. Ut aliquet commodo sem non luctus. Mauris suscipit justo eget turpis interdum blandit eu eu purus. Integer condimentum blandit sapien id pellentesque. In convallis odio in neque accumsan, vitae volutpat mi ornare. Vivamus a augue quis tellus facilisis luctus. Integer laoreet, tortor vel interdum blandit, arcu arcu ornare nunc, in cursus mi tellus vitae mauris. Etiam molestie nibh sapien, id auctor nulla ullamcorper in. Maecenas vel justo est. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Pellentesque porttitor lacinia ipsum ultricies rutrum.</p>
<p>Quisque varius tempor tellus. Morbi eleifend venenatis nunc, sed sodales tortor vulputate a. Quisque non risus ut nunc viverra suscipit non rhoncus neque. Aliquam at efficitur ligula. Ut diam tortor, feugiat ut rutrum ac, imperdiet in nibh. Proin at odio nec mi aliquet efficitur lobortis vitae turpis. Curabitur molestie odio nec laoreet luctus. Praesent vel ligula at felis convallis accumsan. Fusce cursus nisi orci, in placerat lorem congue convallis. Praesent pellentesque consequat elit, nec interdum velit tincidunt a.</p>
<p>Nullam efficitur est ligula, non fringilla massa pulvinar at. Aliquam non porta tortor. Aenean sit amet mollis turpis. Curabitur convallis sollicitudin leo a aliquam. Praesent vitae semper odio. Curabitur condimentum lorem eget dapibus volutpat. Vivamus id tortor erat. Cras mollis varius dolor. Donec laoreet, ipsum sed sollicitudin placerat, nulla diam consequat nibh, sit amet lobortis diam turpis vitae dui. Aliquam dapibus diam nec porttitor egestas. Nam eu tristique orci, in tristique tortor. Sed est ex, scelerisque sed ligula a, condimentum maximus augue. Phasellus malesuada augue libero, eu consectetur magna rhoncus a. Sed ipsum tellus, viverra ut suscipit id, efficitur eu est.</p>
<p>Proin sagittis magna ac enim varius maximus. Quisque vel neque tincidunt, malesuada diam ut, bibendum tortor. Praesent feugiat ante egestas, convallis nisi at, ornare lacus. Nunc non sem vel orci posuere efficitur. Morbi accumsan ipsum ut turpis rhoncus, id ultricies nulla mollis. Sed purus diam, pellentesque vitae quam ac, hendrerit suscipit eros. Quisque euismod, nunc sit amet varius fermentum, sapien purus condimentum nunc, sit amet ultricies lacus turpis eu ante. Donec pulvinar iaculis blandit. Morbi quis ligula lorem. In in bibendum libero. Integer convallis elit eu ex lobortis, nec luctus libero ultrices. Nam ullamcorper posuere cursus. Ut feugiat, mauris scelerisque facilisis eleifend, magna massa maximus mi, at porttitor ex leo sit amet nisl. Praesent ligula purus, aliquet in commodo sit amet, porttitor ac velit. Nunc sodales elementum arcu, et fringilla libero ultricies ut. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae;</p>
<p>Ut nec interdum magna. Aenean sit amet vehicula neque. Nunc tincidunt ultrices tellus vitae pretium. Pellentesque posuere ultricies diam, ullamcorper hendrerit nibh ullamcorper in. Maecenas ut est et elit venenatis vestibulum. Vestibulum id hendrerit eros. Aliquam efficitur est elit, nec malesuada purus posuere ac. Morbi eu est porttitor, condimentum arcu eget, pretium nisi. Aliquam viverra enim vitae vulputate viverra. Nullam vitae metus sodales, finibus justo vel, efficitur neque. Morbi euismod rutrum tempus. Donec cursus lectus sed commodo vestibulum. Vivamus eu ligula consequat, cursus neque ac, tempus sapien.</p>
<p>Donec vel urna ac lacus consectetur cursus. Donec tempor justo ornare libero eleifend, id ultrices nisi tincidunt. Donec ac orci eget ligula auctor pretium sit amet eu purus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc ac luctus elit. Sed consectetur, elit at consequat mollis, justo lectus pellentesque lectus, malesuada congue erat velit eu tortor. Donec ullamcorper nibh a dui convallis venenatis. In a ullamcorper nulla, id porttitor nunc. Praesent elit orci, aliquam vel nunc sed, scelerisque tincidunt ex. Duis consequat dignissim lacus, id porttitor libero fringilla quis. Fusce libero dolor, consectetur id pharetra at, tristique eget sem. Donec et mollis nunc, in aliquet ligula.</p>
<p>Cras pellentesque imperdiet laoreet. Aliquam erat volutpat. Pellentesque ultrices aliquet pretium. Integer auctor sem magna, eget condimentum sapien elementum ac. Nunc finibus feugiat aliquet. Quisque libero ligula, congue sit amet vestibulum at, euismod a elit. Vivamus eget augue et nunc lobortis hendrerit sed ut turpis. Donec et ante commodo, faucibus felis in, viverra libero. Aliquam erat volutpat. Duis euismod magna eget metus tincidunt dapibus. Curabitur malesuada efficitur venenatis. Fusce eu nisi sed purus hendrerit consectetur et ac tellus. Cras placerat dignissim mauris, egestas bibendum eros pulvinar non. Quisque finibus eget elit eu placerat. Mauris diam metus, imperdiet et libero sit amet, venenatis finibus libero. Cras eget laoreet justo.</p>
<p>Proin sit amet orci nec magna tincidunt vehicula. Praesent mauris elit, ullamcorper eget odio sed, pulvinar luctus tellus. Mauris tempus, magna tempus vulputate efficitur, elit lectus accumsan est, ultricies volutpat nulla ante in sapien. Morbi condimentum erat sit amet mattis ullamcorper. Nullam tincidunt nunc vel leo vulputate porttitor. Donec efficitur hendrerit nunc, non viverra libero scelerisque ac. Ut gravida nec ante vitae facilisis. Pellentesque sagittis urna sit amet egestas vestibulum.</p>
<p>Duis tempus dui in interdum ullamcorper. Curabitur vulputate laoreet est, dictum condimentum sapien vehicula eget. Pellentesque ac dictum mi. Sed metus arcu, sodales lobortis urna vel, feugiat ullamcorper est. Integer lacinia, lacus ac tristique convallis, nunc purus bibendum arcu, at eleifend enim est non ipsum. Nam iaculis elementum convallis. Nulla tempus odio vel porta ullamcorper. Donec dignissim ut elit vestibulum faucibus.</p>
<p>Aenean a pulvinar ante. Nunc rutrum volutpat tincidunt. Aenean ultricies sodales mauris eget suscipit. Proin rhoncus ornare lacus in auctor. Duis nec urna sit amet tortor ullamcorper sagittis non nec massa. Nullam dolor sem, laoreet sit amet elit in, iaculis consequat turpis. Morbi semper nulla vel egestas ultrices. Suspendisse id est iaculis, facilisis metus non, accumsan augue. Vestibulum arcu nulla, porta euismod felis et, sollicitudin vehicula ligula. Pellentesque ac dolor ac eros gravida tempus. Etiam sed sem ultrices, tincidunt purus eget, porttitor eros. Vivamus ut tempor sem. Donec interdum efficitur mollis.</p>
<p>In a laoreet ante. Suspendisse potenti. In sit amet enim elit. In arcu mauris, luctus a urna eget, aliquet accumsan tellus. Maecenas egestas, sem nec commodo tincidunt, metus tortor volutpat libero, eget tristique metus velit sed eros. Fusce bibendum lacus id lectus semper, id volutpat turpis dictum. Vestibulum eu elit eget eros dictum cursus. Mauris consectetur dolor eu ligula condimentum aliquam at id dui. Vestibulum non dolor ante. Morbi a dapibus erat. Nulla placerat mi id neque rhoncus, et semper dolor hendrerit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas quam sem, dapibus non aliquet iaculis, mollis id urna.</p>
<p>Integer pellentesque enim a justo venenatis sodales. Etiam in nisl ipsum. Vestibulum fringilla dignissim faucibus. Nam pellentesque, mi ac accumsan mattis, elit velit bibendum lacus, id scelerisque ligula sapien id diam. Sed condimentum rutrum metus, in sollicitudin quam ultricies ut. Phasellus at lobortis arcu. Duis auctor, arcu id hendrerit faucibus, odio turpis finibus mi, molestie tempus ex lorem suscipit enim. Nam pretium laoreet ipsum. Donec eu mauris euismod, varius mi id, elementum leo. Integer ultricies nulla massa, in consequat lectus pellentesque ut. Ut eu risus mi. Pellentesque id ligula sodales, maximus lorem at, bibendum velit. Etiam vitae eros vitae quam lacinia egestas. Sed ullamcorper egestas magna, eget suscipit nulla euismod a. Morbi accumsan arcu a vulputate iaculis.</p>
</div>
The problem I'm having is when I scroll back up and the .slide-in class is removed, the header snaps back into position without a transition. This looks a little buggy.
I've used transition: top ease-in-out 1s; on .site-header but this doesn't have an effect when the class is removed. Is there a way to apply a transition in reverse for when the class is removed?
I'm using position: relative; instead of fixed position: fixed; because I want the header to be hidden when you're at the top.
This is because you used position relative & sticky in two different situation.
relative is related to it's parent div
static is related to it's screen
var scrollpos = window.scrollY;
var header = document.getElementById("masthead");
function add_class_on_scroll() {
header.classList.add("slide-in");
}
function remove_class_on_scroll() {
header.classList.remove("slide-in");
}
window.addEventListener('scroll', function(){
scrollpos = window.scrollY;
if(scrollpos > 188) {
add_class_on_scroll();
}
else {
remove_class_on_scroll();
}
});
html {
box-sizing: border-box;
}
body {
margin: 0;
}
.site {
position: relative;
overflow:hidden;
}
.site-header {
position: fixed;
height: 100px;
top: -100px;
background-color: #f5f5f5;
transition: top ease-in-out 1s;
display: flex;
justify-content: center;
align-items: center;
Width:100%;
overflow: hidden;
}
.slide-in {
position: fixed;
top: 0px;
}
<div class="site">
<header id="masthead" class="site-header">
<p>I'm the site header</p>
</header>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce consectetur diam dui. Curabitur egestas augue non arcu tincidunt, ut fermentum mi lacinia. Sed vehicula non lectus at efficitur. Sed bibendum ipsum sed cursus condimentum. Maecenas non leo semper nisl consequat vestibulum. Maecenas vestibulum sodales metus, in varius ante efficitur a. Integer ipsum orci, ultrices facilisis mi sed, bibendum egestas ipsum. Maecenas nec elit non libero bibendum condimentum.</p>
<p>Suspendisse potenti. Vestibulum vestibulum, diam eleifend mattis dictum, ante nulla semper est, at fermentum leo ligula sit amet nunc. Nullam gravida sem et urna maximus, eu efficitur eros hendrerit. Aliquam convallis facilisis mi sed congue. Praesent pulvinar vehicula urna, quis iaculis nisi vestibulum non. Aliquam pulvinar risus id blandit malesuada. Proin pharetra, nibh nec consequat fringilla, erat quam sollicitudin orci, id tincidunt ex justo in diam. Vestibulum eleifend metus urna, at interdum arcu venenatis ac. Nam euismod, lorem ac fringilla bibendum, dui massa volutpat nulla, non aliquam nisi ligula id ligula. Sed iaculis viverra nisi eget mattis.</p>
<p>Phasellus ac lacus tincidunt, vestibulum dolor eget, dictum massa. Fusce fringilla lorem sed ex placerat ornare. Aenean in consequat mauris, in dapibus enim. Sed commodo posuere est ut lobortis. Nulla elementum pretium ante eu elementum. Nulla facilisi. Curabitur quam velit, varius nec leo vitae, scelerisque dignissim justo.</p>
<p>Donec nec rutrum tortor, ac semper dolor. Maecenas id laoreet orci. Vivamus tincidunt commodo nisi sit amet posuere. Vestibulum pretium risus ante, non mattis ex eleifend quis. Ut id scelerisque tortor, quis ullamcorper orci. Sed vestibulum pharetra nibh. Donec ultricies nibh neque, vitae ullamcorper elit rhoncus a. Nunc odio turpis, euismod at tempus vitae, aliquet in lectus. Praesent vehicula lectus et enim fringilla feugiat.</p>
<p>Quisque eleifend libero a mi sodales vehicula. Aliquam erat volutpat. Maecenas dignissim rutrum auctor. Vestibulum pretium lacus quis vehicula placerat. Cras placerat leo non libero imperdiet, ac tristique ligula feugiat. Aliquam semper aliquam ligula, sed fermentum erat sagittis eget. Donec lorem urna, tristique at suscipit sed, euismod nec odio.</p>
<p>Aliquam lobortis lorem non libero varius, in ultricies ipsum ornare. Sed imperdiet elementum ligula, non blandit nunc imperdiet quis. Vivamus ut dictum est, quis euismod orci. Sed eget magna ac massa gravida porta. Donec nibh massa, scelerisque ac tempus a, fringilla vel nunc. Aenean malesuada pulvinar quam sed pretium. Aenean id dui a neque lobortis dictum vitae ac ipsum. Donec interdum ligula mattis enim facilisis vehicula facilisis id eros. Donec eu dolor sit amet neque ultricies faucibus nec et arcu. Proin vulputate elementum dui nec gravida. Nunc odio justo, consequat non tortor ut, rutrum mollis magna. Donec ac leo elit. Fusce hendrerit maximus est mattis porta. Praesent malesuada interdum orci nec viverra. Mauris porta ligula in auctor tincidunt. Suspendisse potenti.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse aliquet purus quis enim egestas tincidunt. Maecenas mattis ut metus eget viverra. Praesent hendrerit odio tincidunt, feugiat metus quis, gravida turpis. Aenean sed mauris commodo libero placerat malesuada eu accumsan lacus. Mauris mi tortor, fringilla nec velit tristique, eleifend pulvinar nunc. Integer nec accumsan mauris. Maecenas mattis, est sit amet congue consectetur, mi massa dignissim urna, ut efficitur orci est et ex. In ac lorem viverra, dictum libero at, pellentesque neque. Cras congue volutpat diam ac luctus. Etiam iaculis augue enim, eget pharetra ligula posuere ac.</p>
<p>Curabitur elementum malesuada nulla, nec semper lectus pretium eget. Proin tempor tortor sed lectus sollicitudin bibendum. Donec non sodales nibh. Suspendisse gravida, purus eget fringilla sagittis, quam ex tempus nisl, quis consectetur orci elit in nisi. Nam tincidunt finibus leo sed consectetur. Etiam sit amet ex aliquet, varius augue ac, consequat nisl. Integer ac dignissim lacus. Ut at facilisis ligula, vel viverra mauris. Phasellus ut egestas turpis. Phasellus sit amet quam ut dui hendrerit tincidunt eget et nisi. Donec tempor dapibus enim. Etiam eget nunc eleifend, hendrerit diam vitae, fringilla mi. Nunc a condimentum felis.</p>
<p>Vestibulum pharetra ultricies ultrices. Vestibulum cursus ante felis. Sed aliquet, elit eget posuere consequat, mauris arcu tincidunt dolor, at porta erat orci a felis. In quis viverra diam. Vestibulum porta nisi purus, lacinia placerat ligula posuere et. Ut aliquet commodo sem non luctus. Mauris suscipit justo eget turpis interdum blandit eu eu purus. Integer condimentum blandit sapien id pellentesque. In convallis odio in neque accumsan, vitae volutpat mi ornare. Vivamus a augue quis tellus facilisis luctus. Integer laoreet, tortor vel interdum blandit, arcu arcu ornare nunc, in cursus mi tellus vitae mauris. Etiam molestie nibh sapien, id auctor nulla ullamcorper in. Maecenas vel justo est. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Pellentesque porttitor lacinia ipsum ultricies rutrum.</p>
<p>Quisque varius tempor tellus. Morbi eleifend venenatis nunc, sed sodales tortor vulputate a. Quisque non risus ut nunc viverra suscipit non rhoncus neque. Aliquam at efficitur ligula. Ut diam tortor, feugiat ut rutrum ac, imperdiet in nibh. Proin at odio nec mi aliquet efficitur lobortis vitae turpis. Curabitur molestie odio nec laoreet luctus. Praesent vel ligula at felis convallis accumsan. Fusce cursus nisi orci, in placerat lorem congue convallis. Praesent pellentesque consequat elit, nec interdum velit tincidunt a.</p>
<p>Nullam efficitur est ligula, non fringilla massa pulvinar at. Aliquam non porta tortor. Aenean sit amet mollis turpis. Curabitur convallis sollicitudin leo a aliquam. Praesent vitae semper odio. Curabitur condimentum lorem eget dapibus volutpat. Vivamus id tortor erat. Cras mollis varius dolor. Donec laoreet, ipsum sed sollicitudin placerat, nulla diam consequat nibh, sit amet lobortis diam turpis vitae dui. Aliquam dapibus diam nec porttitor egestas. Nam eu tristique orci, in tristique tortor. Sed est ex, scelerisque sed ligula a, condimentum maximus augue. Phasellus malesuada augue libero, eu consectetur magna rhoncus a. Sed ipsum tellus, viverra ut suscipit id, efficitur eu est.</p>
<p>Proin sagittis magna ac enim varius maximus. Quisque vel neque tincidunt, malesuada diam ut, bibendum tortor. Praesent feugiat ante egestas, convallis nisi at, ornare lacus. Nunc non sem vel orci posuere efficitur. Morbi accumsan ipsum ut turpis rhoncus, id ultricies nulla mollis. Sed purus diam, pellentesque vitae quam ac, hendrerit suscipit eros. Quisque euismod, nunc sit amet varius fermentum, sapien purus condimentum nunc, sit amet ultricies lacus turpis eu ante. Donec pulvinar iaculis blandit. Morbi quis ligula lorem. In in bibendum libero. Integer convallis elit eu ex lobortis, nec luctus libero ultrices. Nam ullamcorper posuere cursus. Ut feugiat, mauris scelerisque facilisis eleifend, magna massa maximus mi, at porttitor ex leo sit amet nisl. Praesent ligula purus, aliquet in commodo sit amet, porttitor ac velit. Nunc sodales elementum arcu, et fringilla libero ultricies ut. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae;</p>
<p>Ut nec interdum magna. Aenean sit amet vehicula neque. Nunc tincidunt ultrices tellus vitae pretium. Pellentesque posuere ultricies diam, ullamcorper hendrerit nibh ullamcorper in. Maecenas ut est et elit venenatis vestibulum. Vestibulum id hendrerit eros. Aliquam efficitur est elit, nec malesuada purus posuere ac. Morbi eu est porttitor, condimentum arcu eget, pretium nisi. Aliquam viverra enim vitae vulputate viverra. Nullam vitae metus sodales, finibus justo vel, efficitur neque. Morbi euismod rutrum tempus. Donec cursus lectus sed commodo vestibulum. Vivamus eu ligula consequat, cursus neque ac, tempus sapien.</p>
<p>Donec vel urna ac lacus consectetur cursus. Donec tempor justo ornare libero eleifend, id ultrices nisi tincidunt. Donec ac orci eget ligula auctor pretium sit amet eu purus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc ac luctus elit. Sed consectetur, elit at consequat mollis, justo lectus pellentesque lectus, malesuada congue erat velit eu tortor. Donec ullamcorper nibh a dui convallis venenatis. In a ullamcorper nulla, id porttitor nunc. Praesent elit orci, aliquam vel nunc sed, scelerisque tincidunt ex. Duis consequat dignissim lacus, id porttitor libero fringilla quis. Fusce libero dolor, consectetur id pharetra at, tristique eget sem. Donec et mollis nunc, in aliquet ligula.</p>
<p>Cras pellentesque imperdiet laoreet. Aliquam erat volutpat. Pellentesque ultrices aliquet pretium. Integer auctor sem magna, eget condimentum sapien elementum ac. Nunc finibus feugiat aliquet. Quisque libero ligula, congue sit amet vestibulum at, euismod a elit. Vivamus eget augue et nunc lobortis hendrerit sed ut turpis. Donec et ante commodo, faucibus felis in, viverra libero. Aliquam erat volutpat. Duis euismod magna eget metus tincidunt dapibus. Curabitur malesuada efficitur venenatis. Fusce eu nisi sed purus hendrerit consectetur et ac tellus. Cras placerat dignissim mauris, egestas bibendum eros pulvinar non. Quisque finibus eget elit eu placerat. Mauris diam metus, imperdiet et libero sit amet, venenatis finibus libero. Cras eget laoreet justo.</p>
<p>Proin sit amet orci nec magna tincidunt vehicula. Praesent mauris elit, ullamcorper eget odio sed, pulvinar luctus tellus. Mauris tempus, magna tempus vulputate efficitur, elit lectus accumsan est, ultricies volutpat nulla ante in sapien. Morbi condimentum erat sit amet mattis ullamcorper. Nullam tincidunt nunc vel leo vulputate porttitor. Donec efficitur hendrerit nunc, non viverra libero scelerisque ac. Ut gravida nec ante vitae facilisis. Pellentesque sagittis urna sit amet egestas vestibulum.</p>
<p>Duis tempus dui in interdum ullamcorper. Curabitur vulputate laoreet est, dictum condimentum sapien vehicula eget. Pellentesque ac dictum mi. Sed metus arcu, sodales lobortis urna vel, feugiat ullamcorper est. Integer lacinia, lacus ac tristique convallis, nunc purus bibendum arcu, at eleifend enim est non ipsum. Nam iaculis elementum convallis. Nulla tempus odio vel porta ullamcorper. Donec dignissim ut elit vestibulum faucibus.</p>
<p>Aenean a pulvinar ante. Nunc rutrum volutpat tincidunt. Aenean ultricies sodales mauris eget suscipit. Proin rhoncus ornare lacus in auctor. Duis nec urna sit amet tortor ullamcorper sagittis non nec massa. Nullam dolor sem, laoreet sit amet elit in, iaculis consequat turpis. Morbi semper nulla vel egestas ultrices. Suspendisse id est iaculis, facilisis metus non, accumsan augue. Vestibulum arcu nulla, porta euismod felis et, sollicitudin vehicula ligula. Pellentesque ac dolor ac eros gravida tempus. Etiam sed sem ultrices, tincidunt purus eget, porttitor eros. Vivamus ut tempor sem. Donec interdum efficitur mollis.</p>
<p>In a laoreet ante. Suspendisse potenti. In sit amet enim elit. In arcu mauris, luctus a urna eget, aliquet accumsan tellus. Maecenas egestas, sem nec commodo tincidunt, metus tortor volutpat libero, eget tristique metus velit sed eros. Fusce bibendum lacus id lectus semper, id volutpat turpis dictum. Vestibulum eu elit eget eros dictum cursus. Mauris consectetur dolor eu ligula condimentum aliquam at id dui. Vestibulum non dolor ante. Morbi a dapibus erat. Nulla placerat mi id neque rhoncus, et semper dolor hendrerit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas quam sem, dapibus non aliquet iaculis, mollis id urna.</p>
<p>Integer pellentesque enim a justo venenatis sodales. Etiam in nisl ipsum. Vestibulum fringilla dignissim faucibus. Nam pellentesque, mi ac accumsan mattis, elit velit bibendum lacus, id scelerisque ligula sapien id diam. Sed condimentum rutrum metus, in sollicitudin quam ultricies ut. Phasellus at lobortis arcu. Duis auctor, arcu id hendrerit faucibus, odio turpis finibus mi, molestie tempus ex lorem suscipit enim. Nam pretium laoreet ipsum. Donec eu mauris euismod, varius mi id, elementum leo. Integer ultricies nulla massa, in consequat lectus pellentesque ut. Ut eu risus mi. Pellentesque id ligula sodales, maximus lorem at, bibendum velit. Etiam vitae eros vitae quam lacinia egestas. Sed ullamcorper egestas magna, eget suscipit nulla euismod a. Morbi accumsan arcu a vulputate iaculis.</p>
</div>
The problem you are facing is due to a position change, you are having its one position to another and that is causing this issue. Try to have same position, either sticky or fixed.
var scrollpos = window.scrollY;
var header = document.getElementById("masthead");
function add_class_on_scroll() {
header.classList.add("slide-in");
}
function remove_class_on_scroll() {
header.classList.remove("slide-in");
}
window.addEventListener('scroll', function(){
scrollpos = window.scrollY;
if(scrollpos > 188) {
add_class_on_scroll();
}
else {
remove_class_on_scroll();
}
});
html {
box-sizing: border-box;
}
body {
margin: 0;
}
.site {
position: relative;
overflow:hidden;
}
.site-header {
position: fixed;
top: -100px;
height: 0;
background-color: #f5f5f5;
transition: all ease-in-out 1s;
display: flex;
justify-content: center;
align-items: center;
Width:100%;
left: 0;
}
.slide-in {
position: fixed;
height:100px;
top: 0;
}
<div class="site">
<header id="masthead" class="site-header">
<p>I'm the site header</p>
</header>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce consectetur diam dui. Curabitur egestas augue non arcu tincidunt, ut fermentum mi lacinia. Sed vehicula non lectus at efficitur. Sed bibendum ipsum sed cursus condimentum. Maecenas non leo semper nisl consequat vestibulum. Maecenas vestibulum sodales metus, in varius ante efficitur a. Integer ipsum orci, ultrices facilisis mi sed, bibendum egestas ipsum. Maecenas nec elit non libero bibendum condimentum.</p>
<p>Suspendisse potenti. Vestibulum vestibulum, diam eleifend mattis dictum, ante nulla semper est, at fermentum leo ligula sit amet nunc. Nullam gravida sem et urna maximus, eu efficitur eros hendrerit. Aliquam convallis facilisis mi sed congue. Praesent pulvinar vehicula urna, quis iaculis nisi vestibulum non. Aliquam pulvinar risus id blandit malesuada. Proin pharetra, nibh nec consequat fringilla, erat quam sollicitudin orci, id tincidunt ex justo in diam. Vestibulum eleifend metus urna, at interdum arcu venenatis ac. Nam euismod, lorem ac fringilla bibendum, dui massa volutpat nulla, non aliquam nisi ligula id ligula. Sed iaculis viverra nisi eget mattis.</p>
<p>Phasellus ac lacus tincidunt, vestibulum dolor eget, dictum massa. Fusce fringilla lorem sed ex placerat ornare. Aenean in consequat mauris, in dapibus enim. Sed commodo posuere est ut lobortis. Nulla elementum pretium ante eu elementum. Nulla facilisi. Curabitur quam velit, varius nec leo vitae, scelerisque dignissim justo.</p>
<p>Donec nec rutrum tortor, ac semper dolor. Maecenas id laoreet orci. Vivamus tincidunt commodo nisi sit amet posuere. Vestibulum pretium risus ante, non mattis ex eleifend quis. Ut id scelerisque tortor, quis ullamcorper orci. Sed vestibulum pharetra nibh. Donec ultricies nibh neque, vitae ullamcorper elit rhoncus a. Nunc odio turpis, euismod at tempus vitae, aliquet in lectus. Praesent vehicula lectus et enim fringilla feugiat.</p>
<p>Quisque eleifend libero a mi sodales vehicula. Aliquam erat volutpat. Maecenas dignissim rutrum auctor. Vestibulum pretium lacus quis vehicula placerat. Cras placerat leo non libero imperdiet, ac tristique ligula feugiat. Aliquam semper aliquam ligula, sed fermentum erat sagittis eget. Donec lorem urna, tristique at suscipit sed, euismod nec odio.</p>
<p>Aliquam lobortis lorem non libero varius, in ultricies ipsum ornare. Sed imperdiet elementum ligula, non blandit nunc imperdiet quis. Vivamus ut dictum est, quis euismod orci. Sed eget magna ac massa gravida porta. Donec nibh massa, scelerisque ac tempus a, fringilla vel nunc. Aenean malesuada pulvinar quam sed pretium. Aenean id dui a neque lobortis dictum vitae ac ipsum. Donec interdum ligula mattis enim facilisis vehicula facilisis id eros. Donec eu dolor sit amet neque ultricies faucibus nec et arcu. Proin vulputate elementum dui nec gravida. Nunc odio justo, consequat non tortor ut, rutrum mollis magna. Donec ac leo elit. Fusce hendrerit maximus est mattis porta. Praesent malesuada interdum orci nec viverra. Mauris porta ligula in auctor tincidunt. Suspendisse potenti.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse aliquet purus quis enim egestas tincidunt. Maecenas mattis ut metus eget viverra. Praesent hendrerit odio tincidunt, feugiat metus quis, gravida turpis. Aenean sed mauris commodo libero placerat malesuada eu accumsan lacus. Mauris mi tortor, fringilla nec velit tristique, eleifend pulvinar nunc. Integer nec accumsan mauris. Maecenas mattis, est sit amet congue consectetur, mi massa dignissim urna, ut efficitur orci est et ex. In ac lorem viverra, dictum libero at, pellentesque neque. Cras congue volutpat diam ac luctus. Etiam iaculis augue enim, eget pharetra ligula posuere ac.</p>
<p>Curabitur elementum malesuada nulla, nec semper lectus pretium eget. Proin tempor tortor sed lectus sollicitudin bibendum. Donec non sodales nibh. Suspendisse gravida, purus eget fringilla sagittis, quam ex tempus nisl, quis consectetur orci elit in nisi. Nam tincidunt finibus leo sed consectetur. Etiam sit amet ex aliquet, varius augue ac, consequat nisl. Integer ac dignissim lacus. Ut at facilisis ligula, vel viverra mauris. Phasellus ut egestas turpis. Phasellus sit amet quam ut dui hendrerit tincidunt eget et nisi. Donec tempor dapibus enim. Etiam eget nunc eleifend, hendrerit diam vitae, fringilla mi. Nunc a condimentum felis.</p>
<p>Vestibulum pharetra ultricies ultrices. Vestibulum cursus ante felis. Sed aliquet, elit eget posuere consequat, mauris arcu tincidunt dolor, at porta erat orci a felis. In quis viverra diam. Vestibulum porta nisi purus, lacinia placerat ligula posuere et. Ut aliquet commodo sem non luctus. Mauris suscipit justo eget turpis interdum blandit eu eu purus. Integer condimentum blandit sapien id pellentesque. In convallis odio in neque accumsan, vitae volutpat mi ornare. Vivamus a augue quis tellus facilisis luctus. Integer laoreet, tortor vel interdum blandit, arcu arcu ornare nunc, in cursus mi tellus vitae mauris. Etiam molestie nibh sapien, id auctor nulla ullamcorper in. Maecenas vel justo est. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Pellentesque porttitor lacinia ipsum ultricies rutrum.</p>
<p>Quisque varius tempor tellus. Morbi eleifend venenatis nunc, sed sodales tortor vulputate a. Quisque non risus ut nunc viverra suscipit non rhoncus neque. Aliquam at efficitur ligula. Ut diam tortor, feugiat ut rutrum ac, imperdiet in nibh. Proin at odio nec mi aliquet efficitur lobortis vitae turpis. Curabitur molestie odio nec laoreet luctus. Praesent vel ligula at felis convallis accumsan. Fusce cursus nisi orci, in placerat lorem congue convallis. Praesent pellentesque consequat elit, nec interdum velit tincidunt a.</p>
<p>Nullam efficitur est ligula, non fringilla massa pulvinar at. Aliquam non porta tortor. Aenean sit amet mollis turpis. Curabitur convallis sollicitudin leo a aliquam. Praesent vitae semper odio. Curabitur condimentum lorem eget dapibus volutpat. Vivamus id tortor erat. Cras mollis varius dolor. Donec laoreet, ipsum sed sollicitudin placerat, nulla diam consequat nibh, sit amet lobortis diam turpis vitae dui. Aliquam dapibus diam nec porttitor egestas. Nam eu tristique orci, in tristique tortor. Sed est ex, scelerisque sed ligula a, condimentum maximus augue. Phasellus malesuada augue libero, eu consectetur magna rhoncus a. Sed ipsum tellus, viverra ut suscipit id, efficitur eu est.</p>
<p>Proin sagittis magna ac enim varius maximus. Quisque vel neque tincidunt, malesuada diam ut, bibendum tortor. Praesent feugiat ante egestas, convallis nisi at, ornare lacus. Nunc non sem vel orci posuere efficitur. Morbi accumsan ipsum ut turpis rhoncus, id ultricies nulla mollis. Sed purus diam, pellentesque vitae quam ac, hendrerit suscipit eros. Quisque euismod, nunc sit amet varius fermentum, sapien purus condimentum nunc, sit amet ultricies lacus turpis eu ante. Donec pulvinar iaculis blandit. Morbi quis ligula lorem. In in bibendum libero. Integer convallis elit eu ex lobortis, nec luctus libero ultrices. Nam ullamcorper posuere cursus. Ut feugiat, mauris scelerisque facilisis eleifend, magna massa maximus mi, at porttitor ex leo sit amet nisl. Praesent ligula purus, aliquet in commodo sit amet, porttitor ac velit. Nunc sodales elementum arcu, et fringilla libero ultricies ut. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae;</p>
<p>Ut nec interdum magna. Aenean sit amet vehicula neque. Nunc tincidunt ultrices tellus vitae pretium. Pellentesque posuere ultricies diam, ullamcorper hendrerit nibh ullamcorper in. Maecenas ut est et elit venenatis vestibulum. Vestibulum id hendrerit eros. Aliquam efficitur est elit, nec malesuada purus posuere ac. Morbi eu est porttitor, condimentum arcu eget, pretium nisi. Aliquam viverra enim vitae vulputate viverra. Nullam vitae metus sodales, finibus justo vel, efficitur neque. Morbi euismod rutrum tempus. Donec cursus lectus sed commodo vestibulum. Vivamus eu ligula consequat, cursus neque ac, tempus sapien.</p>
<p>Donec vel urna ac lacus consectetur cursus. Donec tempor justo ornare libero eleifend, id ultrices nisi tincidunt. Donec ac orci eget ligula auctor pretium sit amet eu purus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nunc ac luctus elit. Sed consectetur, elit at consequat mollis, justo lectus pellentesque lectus, malesuada congue erat velit eu tortor. Donec ullamcorper nibh a dui convallis venenatis. In a ullamcorper nulla, id porttitor nunc. Praesent elit orci, aliquam vel nunc sed, scelerisque tincidunt ex. Duis consequat dignissim lacus, id porttitor libero fringilla quis. Fusce libero dolor, consectetur id pharetra at, tristique eget sem. Donec et mollis nunc, in aliquet ligula.</p>
<p>Cras pellentesque imperdiet laoreet. Aliquam erat volutpat. Pellentesque ultrices aliquet pretium. Integer auctor sem magna, eget condimentum sapien elementum ac. Nunc finibus feugiat aliquet. Quisque libero ligula, congue sit amet vestibulum at, euismod a elit. Vivamus eget augue et nunc lobortis hendrerit sed ut turpis. Donec et ante commodo, faucibus felis in, viverra libero. Aliquam erat volutpat. Duis euismod magna eget metus tincidunt dapibus. Curabitur malesuada efficitur venenatis. Fusce eu nisi sed purus hendrerit consectetur et ac tellus. Cras placerat dignissim mauris, egestas bibendum eros pulvinar non. Quisque finibus eget elit eu placerat. Mauris diam metus, imperdiet et libero sit amet, venenatis finibus libero. Cras eget laoreet justo.</p>
<p>Proin sit amet orci nec magna tincidunt vehicula. Praesent mauris elit, ullamcorper eget odio sed, pulvinar luctus tellus. Mauris tempus, magna tempus vulputate efficitur, elit lectus accumsan est, ultricies volutpat nulla ante in sapien. Morbi condimentum erat sit amet mattis ullamcorper. Nullam tincidunt nunc vel leo vulputate porttitor. Donec efficitur hendrerit nunc, non viverra libero scelerisque ac. Ut gravida nec ante vitae facilisis. Pellentesque sagittis urna sit amet egestas vestibulum.</p>
<p>Duis tempus dui in interdum ullamcorper. Curabitur vulputate laoreet est, dictum condimentum sapien vehicula eget. Pellentesque ac dictum mi. Sed metus arcu, sodales lobortis urna vel, feugiat ullamcorper est. Integer lacinia, lacus ac tristique convallis, nunc purus bibendum arcu, at eleifend enim est non ipsum. Nam iaculis elementum convallis. Nulla tempus odio vel porta ullamcorper. Donec dignissim ut elit vestibulum faucibus.</p>
<p>Aenean a pulvinar ante. Nunc rutrum volutpat tincidunt. Aenean ultricies sodales mauris eget suscipit. Proin rhoncus ornare lacus in auctor. Duis nec urna sit amet tortor ullamcorper sagittis non nec massa. Nullam dolor sem, laoreet sit amet elit in, iaculis consequat turpis. Morbi semper nulla vel egestas ultrices. Suspendisse id est iaculis, facilisis metus non, accumsan augue. Vestibulum arcu nulla, porta euismod felis et, sollicitudin vehicula ligula. Pellentesque ac dolor ac eros gravida tempus. Etiam sed sem ultrices, tincidunt purus eget, porttitor eros. Vivamus ut tempor sem. Donec interdum efficitur mollis.</p>
<p>In a laoreet ante. Suspendisse potenti. In sit amet enim elit. In arcu mauris, luctus a urna eget, aliquet accumsan tellus. Maecenas egestas, sem nec commodo tincidunt, metus tortor volutpat libero, eget tristique metus velit sed eros. Fusce bibendum lacus id lectus semper, id volutpat turpis dictum. Vestibulum eu elit eget eros dictum cursus. Mauris consectetur dolor eu ligula condimentum aliquam at id dui. Vestibulum non dolor ante. Morbi a dapibus erat. Nulla placerat mi id neque rhoncus, et semper dolor hendrerit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas quam sem, dapibus non aliquet iaculis, mollis id urna.</p>
<p>Integer pellentesque enim a justo venenatis sodales. Etiam in nisl ipsum. Vestibulum fringilla dignissim faucibus. Nam pellentesque, mi ac accumsan mattis, elit velit bibendum lacus, id scelerisque ligula sapien id diam. Sed condimentum rutrum metus, in sollicitudin quam ultricies ut. Phasellus at lobortis arcu. Duis auctor, arcu id hendrerit faucibus, odio turpis finibus mi, molestie tempus ex lorem suscipit enim. Nam pretium laoreet ipsum. Donec eu mauris euismod, varius mi id, elementum leo. Integer ultricies nulla massa, in consequat lectus pellentesque ut. Ut eu risus mi. Pellentesque id ligula sodales, maximus lorem at, bibendum velit. Etiam vitae eros vitae quam lacinia egestas. Sed ullamcorper egestas magna, eget suscipit nulla euismod a. Morbi accumsan arcu a vulputate iaculis.</p>
</div>
Related
The data
I have JSON data that I want to use in a PDF-report. The PDF-report is created from HTML.
[
{
"title": "Chapter 1",
"text": "Some large text"
},
{
"title": "Chapter 2",
"text": "Some large text"
}
]
Format of the report page
All pages has the following format.
What I need
I need to add the text within the content of the page. But when the text is exceeding it has to jump to the next page and keeps the same format. Does anyone have an idea how to accomplish this?
Original idea: https://stackoverflow.com/a/56141110/1543677
The idea is to use CSS-columns to auto-break up the content in the appropriate pages. Do note that this will generate duplicate content and useless DOM nodes, so a) don't use it for a website, b) use a lazy-load approach (don't load a whole book at once).
HTML structure:
<div id="content">
</div>
<div id="container">
</div>
CSS:
body{
background:#ccc;
}
p{
margin-top: 0;
}
.page {
background: #fff;
height: 729px;
width: 535px;
padding: 93px 30px 20px 30px;
margin: 0 auto 10px;
position: relative;
}
.pageContent {
height: 719px;
padding: 0px;
/*border: 1px dotted;*/
position: relative;
overflow: hidden;
}
.innerPage{
width: 535px;
height: 719px;
column-fill: auto;
column-gap: 0;
column-width: 535px;
}
.pageHeader{
/*border: 1px dotted;*/
margin: 30px;
padding: 5px 30px 5px 0px;
position: absolute;
top:0;
left:0;
right:0;
font-weight: bold;
}
.pageHeader .pageCounter{
position: absolute;
right: 0;
top: 0;
margin: 5px 0px;
text-align: right;
}
#content {
margin: 20px auto;
width: 535px;
height: 721px;
overflow: auto;
border: 1px solid #ccc;
column-fill: auto;
column-gap: 0;
column-width: 595px;
}
Sample data:
let data=[
{
"title": "Chapter 1",
"text": `<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sollicitudin urna sapien, ac scelerisque mi vehicula non. Etiam orci elit, volutpat sit amet congue non, blandit quis orci. Aliquam vel nisl commodo, iaculis ante eu, blandit leo. Aliquam id nunc a elit facilisis sodales non vel neque. Curabitur posuere luctus nibh, ac lacinia arcu. Donec tincidunt nunc quis arcu elementum, sed varius lorem rutrum. Donec ligula mauris, malesuada ut facilisis sed, placerat vel orci. Suspendisse et justo quis quam condimentum rhoncus. Quisque fringilla tortor in ipsum maximus, vel molestie ligula suscipit. Donec lobortis diam et elit viverra, non venenatis sapien aliquam. Praesent suscipit libero eu nibh molestie, aliquet feugiat lorem egestas. Vivamus tristique vehicula lobortis. Donec sagittis dolor pretium risus lobortis varius. Vestibulum non leo tempor, finibus quam sodales, sollicitudin augue. Donec at luctus velit.
</p>
<p>
Nam sit amet purus vitae eros cursus semper nec a massa. Aliquam dolor nunc, interdum non ex nec, molestie sagittis felis. Vestibulum diam magna, molestie malesuada nulla vel, pretium lobortis enim. Curabitur consequat nunc quis enim sagittis, vel congue nisl finibus. Fusce ut ex ac nulla vestibulum viverra. Quisque facilisis purus at venenatis efficitur. Nullam maximus quam nec sapien fermentum, ornare volutpat orci rhoncus. Pellentesque cursus molestie sem vel lobortis. Cras iaculis sodales quam, et ornare sapien aliquet quis. Nunc justo felis, mattis auctor lorem id, varius luctus enim. Pellentesque vestibulum facilisis massa quis rutrum. Morbi non erat ac libero pretium ultrices. Donec a eros neque. Phasellus a dolor ullamcorper, euismod sem non, eleifend dolor. Donec iaculis neque in felis imperdiet placerat.
</p>
<p>
Nulla venenatis erat eget turpis sagittis, non suscipit nulla ullamcorper. Aliquam ac erat quis velit sollicitudin mollis. Ut tempus purus odio, id tincidunt purus fringilla nec. Nulla ullamcorper ultricies lorem at euismod. Suspendisse feugiat ex velit, ac sodales mi tempus eget. Suspendisse nec ligula nec nisi eleifend facilisis. Suspendisse neque eros, vestibulum id nisl vel, convallis facilisis nibh. Curabitur nisi neque, pulvinar non feugiat in, tristique sed sapien. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc aliquet nunc ac eros iaculis, et lacinia ex semper. Aenean venenatis varius purus, nec dapibus purus. Donec arcu purus, interdum eget eleifend non, fringilla sed tellus. Duis egestas, sem eget vehicula interdum, ligula magna pellentesque est, nec feugiat purus risus a justo. Donec vehicula viverra purus. Curabitur at commodo elit.
</p>
<p>
Nullam eu libero vulputate purus suscipit gravida. Vestibulum id enim felis. Donec fringilla elit vitae mauris molestie, ac condimentum sem vestibulum. Duis vestibulum ex a porttitor cursus. Ut non augue orci. Etiam accumsan est ut suscipit lobortis. Nulla dolor velit, ultrices eu sollicitudin nec, tincidunt dictum odio. Nam et lacus id elit tincidunt fringilla ut et nulla. Nunc eu elit leo.
</p>
<p>
Suspendisse commodo diam leo, eu consectetur turpis elementum vel. Proin eu hendrerit massa. Quisque commodo ante magna, ac pulvinar dolor consectetur ut. Sed lectus nisi, efficitur in arcu in, pharetra pharetra urna. Cras maximus ultrices convallis. Donec a turpis suscipit, sagittis urna id, aliquet quam. Vestibulum odio metus, lacinia ut hendrerit in, imperdiet quis ex.
</p>
<p>
Morbi ultricies tellus a lacus tempus, et sagittis purus rhoncus. Maecenas consectetur blandit tempus. Curabitur porta ipsum nibh, non pharetra ex semper at. Ut in ex id massa feugiat malesuada ut interdum mauris. Suspendisse potenti. Vestibulum eu maximus odio. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec in felis et arcu sodales dapibus quis a augue. Donec quis porta nunc, a euismod risus. Pellentesque id mi viverra, sagittis ex vel, elementum velit. Phasellus at vehicula risus. Sed dignissim, nisi vitae ornare scelerisque, purus nunc imperdiet neque, id facilisis libero nisl non lorem. Duis convallis leo vitae accumsan pellentesque. Donec aliquam ante vel consectetur congue.
</p>
<p>
Etiam facilisis velit velit, nec commodo eros commodo eget. Duis dapibus non erat nec sodales. Curabitur tempus tincidunt lectus, ac facilisis diam porta sed. Nam a dapibus massa, eget consequat risus. Quisque nibh turpis, sollicitudin sed volutpat ut, vestibulum id turpis. Duis pellentesque, nisi vitae vestibulum convallis, leo nibh scelerisque purus, et sagittis tellus nisl maximus tellus. Nulla euismod massa purus, a dictum metus mollis eu.
</p>
<p>
Cras pulvinar sem in nibh varius, vitae viverra risus dapibus. Donec fringilla commodo euismod. Mauris felis augue, malesuada faucibus nibh eget, hendrerit commodo urna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vitae velit aliquam, tincidunt tortor vitae, convallis massa. Sed lacus quam, mollis in leo a, efficitur venenatis lectus. Maecenas efficitur, metus in auctor tempus, velit nulla sodales odio, vitae tristique felis purus quis erat. Aliquam blandit purus facilisis, iaculis augue nec, ultricies ex. Nunc euismod ipsum arcu, commodo consequat magna blandit nec. Sed mollis porta mi, id sagittis leo accumsan quis. Nam vel odio ut lacus pulvinar placerat. Morbi eu diam sit amet mi molestie lobortis.
</p>
<p>
Morbi ex sem, malesuada a auctor eu, porta a nisi. Cras egestas convallis neque, consectetur tincidunt sapien varius sed. Aliquam vitae odio id purus finibus imperdiet sit amet in turpis. Duis tempor, augue in interdum facilisis, est leo pellentesque dolor, non congue augue risus ac ligula. Pellentesque elementum lacinia massa, in tincidunt ex consequat eu. Cras lobortis nisl id eros cursus, vel auctor tellus aliquam. Cras maximus aliquet vulputate. Fusce elementum vel purus vel tempus. Aenean venenatis dapibus ex sed semper.
</p>
<p>
Donec viverra massa augue. Curabitur ultricies maximus tincidunt. Phasellus eleifend placerat nunc, eu viverra velit efficitur malesuada. Nullam bibendum massa non nisl pretium imperdiet. Cras blandit est turpis, non pharetra sapien lacinia eu. Nulla sodales ornare quam, at mattis nunc scelerisque vel. Praesent varius nibh id mauris laoreet eleifend. Fusce blandit augue vitae lacus laoreet, sit amet consectetur justo tincidunt. Integer vitae orci vulputate, viverra turpis eget, consectetur urna. Proin feugiat diam sem, in commodo ante faucibus sit amet. Quisque imperdiet, ante nec vehicula fringilla, urna mi condimentum enim, a ornare erat lorem sit amet purus.
</p>
<p>
Quisque eu odio ac lectus aliquet eleifend. Quisque varius, libero sed convallis tempus, nisl mi egestas nisi, a efficitur neque est ac augue. Nam pretium interdum ante et pulvinar. Fusce porta tempor leo, quis tincidunt diam tempus nec. Proin egestas vulputate dapibus. Etiam eros nisi, ornare non purus quis, consequat consectetur felis. Aenean non elit at massa vehicula porttitor quis vel nisl. Vestibulum dignissim libero et quam aliquet, vel tristique purus interdum.
</p>
<p>
Cras lacus lacus, euismod in eleifend ut, facilisis ac erat. Morbi eget ligula eget libero mollis dignissim. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nam accumsan aliquam odio sed tempor. Etiam vitae arcu nunc. Mauris odio ipsum, sollicitudin nec lectus in, congue vestibulum lacus. Aliquam porttitor id ex ac rhoncus. Quisque suscipit libero at sapien tincidunt finibus. Nullam quis lacinia ligula. Donec sit amet mauris sem. Proin tempus massa ac mi eleifend, quis vehicula libero placerat. Etiam vel lectus at augue varius eleifend non a ligula. Duis sit amet ex arcu. Nunc sit amet egestas lorem, sit amet malesuada metus.
</p>
<p>
Sed vitae rutrum libero, vel tempor enim. In hac habitasse platea dictumst. Vestibulum semper hendrerit justo ac elementum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ac congue lacus. Proin eleifend enim ut lectus faucibus varius. In vitae euismod nisl. Ut ultricies leo et purus convallis imperdiet. Ut ut massa a nibh placerat porttitor non ut magna. Donec venenatis faucibus mollis. Etiam placerat dui turpis, quis faucibus eros vulputate at.
</p>
<p>
Duis eu justo id ipsum lacinia euismod. In iaculis viverra ipsum id tempus. Ut non luctus tellus, sit amet porta arcu. Quisque sollicitudin porta tortor nec convallis. Donec non diam orci. Nunc sollicitudin viverra dolor sit amet dictum. Quisque venenatis lectus eu urna egestas vehicula. Nam malesuada ipsum non sapien pellentesque congue. Sed id auctor lectus. Sed in quam lectus. Vestibulum accumsan augue ac massa feugiat, eu dignissim justo mattis. Nulla vel sapien eget leo rutrum ultrices.
</p>
<p>
Duis sit amet purus ante. Sed commodo neque felis, ut faucibus lacus porta at. Sed venenatis odio tellus, eget placerat lectus vulputate vel. Maecenas est dui, congue id ultricies non, ornare a urna. Cras laoreet neque velit. Quisque eleifend tellus nunc, a facilisis dui pharetra non. Pellentesque at vehicula nisi. Morbi vel elit dictum, laoreet purus eu, ullamcorper ligula. Maecenas vitae sapien in nulla sagittis laoreet. Phasellus ac velit feugiat, pretium odio a, molestie neque. Nulla in nunc nisl. Quisque congue felis quis quam posuere, sed ultrices lectus suscipit. Donec at ex nec turpis malesuada maximus ac non ex. Sed elementum augue non convallis tempor. Phasellus vel urna placerat, congue urna sit amet, rhoncus justo.
</p>
<p>
Sed venenatis erat sit amet nunc lacinia pulvinar. Vestibulum accumsan sem et augue feugiat sollicitudin. Sed ac augue rhoncus, pellentesque arcu et, consectetur turpis. Pellentesque tristique, enim nec malesuada consectetur, libero diam tristique urna, vel sagittis lacus eros nec enim. Cras hendrerit vitae lorem consectetur laoreet. Sed sit amet tortor magna. Mauris sagittis massa tortor, non efficitur mauris dictum eu. Proin blandit, massa quis malesuada feugiat, felis ligula semper felis, id semper mauris sapien quis velit. Ut pellentesque, massa in laoreet rutrum, turpis felis sodales risus, eget vulputate nulla massa et erat. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam id elementum tellus.
</p>
<p>
Pellentesque arcu quam, fringilla in purus et, aliquam ultrices odio. Proin mauris magna, cursus in pellentesque ut, luctus a purus. Nunc aliquam nulla nec justo pretium porta. Integer vehicula sit amet leo nec aliquam. Donec eu malesuada dolor. Curabitur diam magna, gravida vitae sollicitudin eu, laoreet ut justo. Pellentesque porta laoreet urna, nec varius tortor tincidunt sed. Nullam arcu odio, ultrices a felis nec, imperdiet convallis nisi. Fusce aliquet nisi quam, nec bibendum orci consequat at. Sed nec augue id leo rutrum tempor vel sit amet augue. Etiam massa nibh, lobortis sed urna sed, eleifend finibus nulla. Aenean id vehicula dui.
</p>
<p>
Ut fermentum neque justo, ut tempor turpis mattis sit amet. Nam fringilla placerat viverra. Morbi interdum varius tristique. Phasellus tellus purus, imperdiet non felis eu, aliquam tristique urna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Sed tristique in mauris eu tempor. Etiam tempus nisi mauris, eu volutpat risus suscipit non. Sed eu odio mi. Praesent ac sapien sed diam cursus auctor sed non sapien. Phasellus et aliquet quam. Suspendisse ultrices diam nec varius rutrum. Morbi vehicula ac ex sit amet rutrum. Etiam eget felis placerat, auctor eros eget, aliquet turpis. Mauris facilisis rutrum tempus. Fusce dolor leo, varius eget faucibus sit amet, volutpat sit amet nisl.
</p>
<p>
Vestibulum sit amet nunc et leo accumsan viverra tincidunt et diam. Proin dolor quam, euismod non suscipit eu, vulputate a nulla. Duis convallis justo id vehicula dictum. Sed fringilla elit nec nulla consequat, et euismod justo varius. Vestibulum semper urna ut accumsan porttitor. Pellentesque lobortis pretium tristique. Fusce tempus sapien eget imperdiet egestas. Sed sit amet diam sed felis placerat sollicitudin. Donec est metus, condimentum dapibus leo non, pharetra pharetra leo.
</p>
<p>
Curabitur condimentum gravida nibh, id aliquet turpis fringilla a. Nullam nec neque efficitur, sodales arcu in, tincidunt ante. In non augue urna. Sed sit amet erat justo. Maecenas nec convallis ex. Sed nisl purus, posuere ut nisi sit amet, efficitur placerat ex. Aliquam hendrerit dui sed lectus sagittis, id hendrerit urna dignissim. Vivamus dolor lorem, iaculis et purus nec, vehicula aliquet neque. Proin lobortis fringilla risus quis consequat. Aenean ultricies sapien et ipsum dignissim, nec egestas tortor feugiat. Suspendisse lectus quam, molestie id lacus convallis, egestas vulputate enim. Aliquam ac venenatis turpis. Praesent consequat mollis est, at gravida libero eleifend sit amet. Vivamus et quam augue.
</p>`
},
{
"title": "Chapter 2",
"text": `
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sollicitudin urna sapien, ac scelerisque mi vehicula non. Etiam orci elit, volutpat sit amet congue non, blandit quis orci. Aliquam vel nisl commodo, iaculis ante eu, blandit leo. Aliquam id nunc a elit facilisis sodales non vel neque. Curabitur posuere luctus nibh, ac lacinia arcu. Donec tincidunt nunc quis arcu elementum, sed varius lorem rutrum. Donec ligula mauris, malesuada ut facilisis sed, placerat vel orci. Suspendisse et justo quis quam condimentum rhoncus. Quisque fringilla tortor in ipsum maximus, vel molestie ligula suscipit. Donec lobortis diam et elit viverra, non venenatis sapien aliquam. Praesent suscipit libero eu nibh molestie, aliquet feugiat lorem egestas. Vivamus tristique vehicula lobortis. Donec sagittis dolor pretium risus lobortis varius. Vestibulum non leo tempor, finibus quam sodales, sollicitudin augue. Donec at luctus velit.
</p>
<p>
Nam sit amet purus vitae eros cursus semper nec a massa. Aliquam dolor nunc, interdum non ex nec, molestie sagittis felis. Vestibulum diam magna, molestie malesuada nulla vel, pretium lobortis enim. Curabitur consequat nunc quis enim sagittis, vel congue nisl finibus. Fusce ut ex ac nulla vestibulum viverra. Quisque facilisis purus at venenatis efficitur. Nullam maximus quam nec sapien fermentum, ornare volutpat orci rhoncus. Pellentesque cursus molestie sem vel lobortis. Cras iaculis sodales quam, et ornare sapien aliquet quis. Nunc justo felis, mattis auctor lorem id, varius luctus enim. Pellentesque vestibulum facilisis massa quis rutrum. Morbi non erat ac libero pretium ultrices. Donec a eros neque. Phasellus a dolor ullamcorper, euismod sem non, eleifend dolor. Donec iaculis neque in felis imperdiet placerat.
</p>
<p>
Nulla venenatis erat eget turpis sagittis, non suscipit nulla ullamcorper. Aliquam ac erat quis velit sollicitudin mollis. Ut tempus purus odio, id tincidunt purus fringilla nec. Nulla ullamcorper ultricies lorem at euismod. Suspendisse feugiat ex velit, ac sodales mi tempus eget. Suspendisse nec ligula nec nisi eleifend facilisis. Suspendisse neque eros, vestibulum id nisl vel, convallis facilisis nibh. Curabitur nisi neque, pulvinar non feugiat in, tristique sed sapien. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc aliquet nunc ac eros iaculis, et lacinia ex semper. Aenean venenatis varius purus, nec dapibus purus. Donec arcu purus, interdum eget eleifend non, fringilla sed tellus. Duis egestas, sem eget vehicula interdum, ligula magna pellentesque est, nec feugiat purus risus a justo. Donec vehicula viverra purus. Curabitur at commodo elit.
</p>
<p>
Nullam eu libero vulputate purus suscipit gravida. Vestibulum id enim felis. Donec fringilla elit vitae mauris molestie, ac condimentum sem vestibulum. Duis vestibulum ex a porttitor cursus. Ut non augue orci. Etiam accumsan est ut suscipit lobortis. Nulla dolor velit, ultrices eu sollicitudin nec, tincidunt dictum odio. Nam et lacus id elit tincidunt fringilla ut et nulla. Nunc eu elit leo.
</p>
<p>
Suspendisse commodo diam leo, eu consectetur turpis elementum vel. Proin eu hendrerit massa. Quisque commodo ante magna, ac pulvinar dolor consectetur ut. Sed lectus nisi, efficitur in arcu in, pharetra pharetra urna. Cras maximus ultrices convallis. Donec a turpis suscipit, sagittis urna id, aliquet quam. Vestibulum odio metus, lacinia ut hendrerit in, imperdiet quis ex.
</p>
<p>
Morbi ultricies tellus a lacus tempus, et sagittis purus rhoncus. Maecenas consectetur blandit tempus. Curabitur porta ipsum nibh, non pharetra ex semper at. Ut in ex id massa feugiat malesuada ut interdum mauris. Suspendisse potenti. Vestibulum eu maximus odio. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec in felis et arcu sodales dapibus quis a augue. Donec quis porta nunc, a euismod risus. Pellentesque id mi viverra, sagittis ex vel, elementum velit. Phasellus at vehicula risus. Sed dignissim, nisi vitae ornare scelerisque, purus nunc imperdiet neque, id facilisis libero nisl non lorem. Duis convallis leo vitae accumsan pellentesque. Donec aliquam ante vel consectetur congue.
</p>
<p>
Etiam facilisis velit velit, nec commodo eros commodo eget. Duis dapibus non erat nec sodales. Curabitur tempus tincidunt lectus, ac facilisis diam porta sed. Nam a dapibus massa, eget consequat risus. Quisque nibh turpis, sollicitudin sed volutpat ut, vestibulum id turpis. Duis pellentesque, nisi vitae vestibulum convallis, leo nibh scelerisque purus, et sagittis tellus nisl maximus tellus. Nulla euismod massa purus, a dictum metus mollis eu.
</p>
<p>
Cras pulvinar sem in nibh varius, vitae viverra risus dapibus. Donec fringilla commodo euismod. Mauris felis augue, malesuada faucibus nibh eget, hendrerit commodo urna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vitae velit aliquam, tincidunt tortor vitae, convallis massa. Sed lacus quam, mollis in leo a, efficitur venenatis lectus. Maecenas efficitur, metus in auctor tempus, velit nulla sodales odio, vitae tristique felis purus quis erat. Aliquam blandit purus facilisis, iaculis augue nec, ultricies ex. Nunc euismod ipsum arcu, commodo consequat magna blandit nec. Sed mollis porta mi, id sagittis leo accumsan quis. Nam vel odio ut lacus pulvinar placerat. Morbi eu diam sit amet mi molestie lobortis.
</p>
<p>
Morbi ex sem, malesuada a auctor eu, porta a nisi. Cras egestas convallis neque, consectetur tincidunt sapien varius sed. Aliquam vitae odio id purus finibus imperdiet sit amet in turpis. Duis tempor, augue in interdum facilisis, est leo pellentesque dolor, non congue augue risus ac ligula. Pellentesque elementum lacinia massa, in tincidunt ex consequat eu. Cras lobortis nisl id eros cursus, vel auctor tellus aliquam. Cras maximus aliquet vulputate. Fusce elementum vel purus vel tempus. Aenean venenatis dapibus ex sed semper.
</p>
<p>
Donec viverra massa augue. Curabitur ultricies maximus tincidunt. Phasellus eleifend placerat nunc, eu viverra velit efficitur malesuada. Nullam bibendum massa non nisl pretium imperdiet. Cras blandit est turpis, non pharetra sapien lacinia eu. Nulla sodales ornare quam, at mattis nunc scelerisque vel. Praesent varius nibh id mauris laoreet eleifend. Fusce blandit augue vitae lacus laoreet, sit amet consectetur justo tincidunt. Integer vitae orci vulputate, viverra turpis eget, consectetur urna. Proin feugiat diam sem, in commodo ante faucibus sit amet. Quisque imperdiet, ante nec vehicula fringilla, urna mi condimentum enim, a ornare erat lorem sit amet purus.
</p>
<p>
Quisque eu odio ac lectus aliquet eleifend. Quisque varius, libero sed convallis tempus, nisl mi egestas nisi, a efficitur neque est ac augue. Nam pretium interdum ante et pulvinar. Fusce porta tempor leo, quis tincidunt diam tempus nec. Proin egestas vulputate dapibus. Etiam eros nisi, ornare non purus quis, consequat consectetur felis. Aenean non elit at massa vehicula porttitor quis vel nisl. Vestibulum dignissim libero et quam aliquet, vel tristique purus interdum.
</p>
<p>
Cras lacus lacus, euismod in eleifend ut, facilisis ac erat. Morbi eget ligula eget libero mollis dignissim. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nam accumsan aliquam odio sed tempor. Etiam vitae arcu nunc. Mauris odio ipsum, sollicitudin nec lectus in, congue vestibulum lacus. Aliquam porttitor id ex ac rhoncus. Quisque suscipit libero at sapien tincidunt finibus. Nullam quis lacinia ligula. Donec sit amet mauris sem. Proin tempus massa ac mi eleifend, quis vehicula libero placerat. Etiam vel lectus at augue varius eleifend non a ligula. Duis sit amet ex arcu. Nunc sit amet egestas lorem, sit amet malesuada metus.
</p>
<p>
Sed vitae rutrum libero, vel tempor enim. In hac habitasse platea dictumst. Vestibulum semper hendrerit justo ac elementum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ac congue lacus. Proin eleifend enim ut lectus faucibus varius. In vitae euismod nisl. Ut ultricies leo et purus convallis imperdiet. Ut ut massa a nibh placerat porttitor non ut magna. Donec venenatis faucibus mollis. Etiam placerat dui turpis, quis faucibus eros vulputate at.
</p>
<p>
Duis eu justo id ipsum lacinia euismod. In iaculis viverra ipsum id tempus. Ut non luctus tellus, sit amet porta arcu. Quisque sollicitudin porta tortor nec convallis. Donec non diam orci. Nunc sollicitudin viverra dolor sit amet dictum. Quisque venenatis lectus eu urna egestas vehicula. Nam malesuada ipsum non sapien pellentesque congue. Sed id auctor lectus. Sed in quam lectus. Vestibulum accumsan augue ac massa feugiat, eu dignissim justo mattis. Nulla vel sapien eget leo rutrum ultrices.
</p>
<p>
Duis sit amet purus ante. Sed commodo neque felis, ut faucibus lacus porta at. Sed venenatis odio tellus, eget placerat lectus vulputate vel. Maecenas est dui, congue id ultricies non, ornare a urna. Cras laoreet neque velit. Quisque eleifend tellus nunc, a facilisis dui pharetra non. Pellentesque at vehicula nisi. Morbi vel elit dictum, laoreet purus eu, ullamcorper ligula. Maecenas vitae sapien in nulla sagittis laoreet. Phasellus ac velit feugiat, pretium odio a, molestie neque. Nulla in nunc nisl. Quisque congue felis quis quam posuere, sed ultrices lectus suscipit. Donec at ex nec turpis malesuada maximus ac non ex. Sed elementum augue non convallis tempor. Phasellus vel urna placerat, congue urna sit amet, rhoncus justo.
</p>
<p>
Sed venenatis erat sit amet nunc lacinia pulvinar. Vestibulum accumsan sem et augue feugiat sollicitudin. Sed ac augue rhoncus, pellentesque arcu et, consectetur turpis. Pellentesque tristique, enim nec malesuada consectetur, libero diam tristique urna, vel sagittis lacus eros nec enim. Cras hendrerit vitae lorem consectetur laoreet. Sed sit amet tortor magna. Mauris sagittis massa tortor, non efficitur mauris dictum eu. Proin blandit, massa quis malesuada feugiat, felis ligula semper felis, id semper mauris sapien quis velit. Ut pellentesque, massa in laoreet rutrum, turpis felis sodales risus, eget vulputate nulla massa et erat. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam id elementum tellus.
</p>
<p>
Pellentesque arcu quam, fringilla in purus et, aliquam ultrices odio. Proin mauris magna, cursus in pellentesque ut, luctus a purus. Nunc aliquam nulla nec justo pretium porta. Integer vehicula sit amet leo nec aliquam. Donec eu malesuada dolor. Curabitur diam magna, gravida vitae sollicitudin eu, laoreet ut justo. Pellentesque porta laoreet urna, nec varius tortor tincidunt sed. Nullam arcu odio, ultrices a felis nec, imperdiet convallis nisi. Fusce aliquet nisi quam, nec bibendum orci consequat at. Sed nec augue id leo rutrum tempor vel sit amet augue. Etiam massa nibh, lobortis sed urna sed, eleifend finibus nulla. Aenean id vehicula dui.
</p>
<p>
Ut fermentum neque justo, ut tempor turpis mattis sit amet. Nam fringilla placerat viverra. Morbi interdum varius tristique. Phasellus tellus purus, imperdiet non felis eu, aliquam tristique urna. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Sed tristique in mauris eu tempor. Etiam tempus nisi mauris, eu volutpat risus suscipit non. Sed eu odio mi. Praesent ac sapien sed diam cursus auctor sed non sapien. Phasellus et aliquet quam. Suspendisse ultrices diam nec varius rutrum. Morbi vehicula ac ex sit amet rutrum. Etiam eget felis placerat, auctor eros eget, aliquet turpis. Mauris facilisis rutrum tempus. Fusce dolor leo, varius eget faucibus sit amet, volutpat sit amet nisl.
</p>
<p>
Vestibulum sit amet nunc et leo accumsan viverra tincidunt et diam. Proin dolor quam, euismod non suscipit eu, vulputate a nulla. Duis convallis justo id vehicula dictum. Sed fringilla elit nec nulla consequat, et euismod justo varius. Vestibulum semper urna ut accumsan porttitor. Pellentesque lobortis pretium tristique. Fusce tempus sapien eget imperdiet egestas. Sed sit amet diam sed felis placerat sollicitudin. Donec est metus, condimentum dapibus leo non, pharetra pharetra leo.
</p>
`
}
];
JS:
function generatePages(){
const pageWidth = 535;
const content = document.getElementById('content');
const container = document.getElementById('container');
let counter=1;
for (let i=0;i<data.length;i++){
content.innerHTML=data[i].text;
let totalWidth = content.scrollWidth;
let totalPages = totalWidth / pageWidth;
for (let p = 0; p < totalPages; p++) {
let pageHeader = document.createElement('div');
pageHeader.innerHTML = data[i].title;
pageHeader.className = 'pageHeader';
let pageCounter = document.createElement('span');
pageCounter.innerHTML = "p. "+counter;
pageCounter.className='pageCounter';
pageHeader.appendChild(pageCounter);
let innerPage = document.createElement('div');
innerPage.innerHTML = data[i].text;
innerPage.className = 'innerPage';
innerPage.style.cssText = `
width: ${totalWidth}px;
transform: translateX(-${p * pageWidth}px);
`;
const pageContent = document.createElement('div');
pageContent.className = 'pageContent';
pageContent.appendChild(innerPage);
const page = document.createElement('div');
page.className = 'page';
page.appendChild(pageHeader);
page.appendChild(pageContent);
container.appendChild(page);
counter++;
}
}
content.remove();
}
generatePages();
Fiddle: https://jsfiddle.net/xsyb7h9g/
There is a new element in HTML5 that is similar to iframe, but it is more useful and you can use it to read pdf:
<embed src="Your link" type="application/pdf">
For more information about this element, you can read This passage
Also, I write a similar pdf-like page, the script may have small problems, but it can scroll.
<body style="background:rgba(100,100,100,0.5);">
<button style="position:fixed; width:20; height:20; left:80%; top:10%" onclick="Ms()">
X
</button>
<p style="position:fixed; width:60%; height:80%; left:20%; top:10% ;overflow:scroll; background:rgba(100,100,100,0.8)" id="p1">
test-overflow1234567890-=-0987654321234567890-=-0987654321<br><br>test-overflow1234567890-=-0987654321234567890-=-0987654321<br><br>test-overflow1234567890-=-0987654321234567890-=-0987654321<br><br>test-overflow1234567890-=-0987654321234567890-=-0987654321<br><br>test-overflow1234567890-=-0987654321234567890-=-0987654321<br><br>test-overflow1234567890-=-0987654321234567890-=-0987654321<br><br>test-overflow1234567890-=-0987654321234567890-=-0987654321<br><br>test-overflow1234567890-=-0987654321234567890-=-0987654321<br><br>test-overflow1234567890-=-0987654321234567890-=-0987654321<br><br>test-overflow1234567890-=-0987654321234567890-=-0987654321<br><br>test-overflow1234567890-=-0987654321234567890-=-0987654321<br><br>test-overflow1234567890-=-0987654321234567890-=-0987654321<br><br>test-overflow1234567890-=-0987654321234567890-=-0987654321<br><br>test-overflow1234567890-=-0987654321234567890-=-0987654321<br><br>
</p>
<!--script language="javascript">
function close()
{
document.getElementById("p1").display: none;
}
</script-->
<script language="javascript">
function Ms() //å£°æ˜Žæ ‡è¯†ç¬¦
{
//document.getElementById("p1").visibility=hidden;
document.getElementById("p1").innerHTML="I do not know why it can not be hidden.";
}
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>
I'm trying to say in my code that if the user scrolls down 250px, I want the data-percent to go from 0% to 100% and this is done in "myFunction". I am still new to JS so I'm having trouble understanding why it's not working when I scroll past 250px. Any help would be much appreciated!
var div = document.getElementById('div1');
window.onscroll = myFunction();
function myFunction() {
if (document.body.scrollTop > 250 || document.documentElement.scrollTop > 250) {
div.getAttribute('data-percent').value = "100%";
} else {
div.getAttribute('data-percent').value = "";
}
}
<div id="div1" class="skillbar clearfix " data-percent="100%">
<div class="skillbar-title" style="background: #d35400;"><span>HTML5</span></div>
<div class="skillbar-bar" style="background: #e67e22;"></div>
<div class="skill-bar-percent">100%</div>
</div>
I expect the data-percent attribute to go from 0% to 100% when I scroll past 250px, and then back to 0% when I scroll back up.
I fixed the header to the top of the page so you could see it, and added some filler text to make it scroll, but the issue was that your code only called myFunction as soon as the page loaded - it wasn't doing anything else. You needed to change the call of myFunction into a reference to myFunction by removing the parentheses.
var div = document.getElementById('div1');
window.onscroll = myFunction;
function myFunction() {
if (document.body.scrollTop > 250 || document.documentElement.scrollTop > 250) {
div.getAttribute('data-percent').value = "100%";
div.querySelector(".skill-bar-percent").textContent = "100%";
} else {
div.getAttribute('data-percent').value = "";
div.querySelector(".skill-bar-percent").textContent = "0%";
}
}
<div id="div1" class="skillbar clearfix " data-percent="100%" style="position: fixed; top: 0; background-color: white; display: block;">
<div class="skillbar-title" style="background: #d35400;"><span>HTML5</span></div>
<div class="skillbar-bar" style="background: #e67e22;"></div>
<div class="skill-bar-percent">0%</div>
</div>
<br />
<br />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In maximus facilisis dolor, mollis consequat justo vestibulum in. Pellentesque ac laoreet turpis. Duis eget sodales elit. In eget eros vitae nibh laoreet viverra. Fusce tincidunt tortor id metus iaculis, in pulvinar urna consectetur. Nunc in leo non lacus volutpat rhoncus. Vestibulum aliquet tortor quis vehicula tempor. Vivamus faucibus orci nec condimentum consequat. Vestibulum vestibulum venenatis tincidunt. Donec non velit nulla. Nunc tellus est, feugiat quis interdum luctus, rhoncus non nisi. Aenean sagittis sed nisl sit amet vehicula. Nulla maximus at lacus eget tristique. Curabitur dignissim ligula et massa rhoncus, id lobortis odio dignissim. Sed ut dolor ac libero lacinia laoreet nec eu urna. Morbi justo lectus, ultrices ac tellus ut, lobortis semper risus.</p>
<p>Phasellus tempor dignissim odio, sodales vulputate metus facilisis sit amet. Maecenas vestibulum dapibus ipsum, nec bibendum neque tempor eget. Nunc ullamcorper, libero et semper condimentum, nibh mi pretium nisi, a hendrerit elit nunc sed metus. Duis lacinia quis dui ut interdum. In efficitur vitae magna sit amet aliquam. Pellentesque quis ullamcorper lorem. Etiam id ullamcorper velit. Suspendisse id tristique ante, suscipit facilisis nisl. Ut ac orci quis augue ornare egestas a id eros. Curabitur dictum eros mauris, lacinia vulputate diam dignissim at. Curabitur venenatis posuere lorem, non maximus lectus lobortis in.</p>
<p>Praesent in finibus purus. Maecenas nec rutrum mi. Donec molestie rhoncus ex vel laoreet. Duis id leo sit amet nisi tristique porta non at enim. Suspendisse eu pharetra lorem. Nunc posuere odio nisl, id iaculis felis fringilla ut. Proin aliquam sapien quis tortor vestibulum interdum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque gravida bibendum urna, tincidunt venenatis ligula egestas vitae. Fusce accumsan ligula et diam porta, id finibus felis vulputate.</p>
<p>Ut eleifend venenatis quam, vel ultricies diam vestibulum sit amet. Vestibulum accumsan eu felis et dictum. Cras turpis tellus, sodales ut nibh accumsan, rutrum ullamcorper ligula. Donec mollis sem eros, vitae finibus dui ullamcorper vel. Mauris sodales diam ut dictum mattis. Nam varius nisi ac efficitur dapibus. Nam dignissim, dolor at suscipit dignissim, ipsum eros mollis risus, eget facilisis lacus dolor id nisl. Vivamus dictum rutrum neque, vel accumsan lacus vulputate in. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris vel tortor sed mi faucibus egestas non maximus enim. Suspendisse sed mi sagittis, imperdiet felis sed, tristique nisi. Proin porta nisi at pretium volutpat. Quisque nec nisl dictum, dignissim erat sit amet, vestibulum dui.</p>
<p>Curabitur vitae consectetur felis. In quis ligula metus. Nunc mauris ex, viverra in suscipit in, ultricies id lorem. Sed ac libero at velit iaculis placerat vitae in odio. Sed tortor dui, lobortis nec pretium ut, ullamcorper a dui. Praesent congue erat sed ultrices pretium. Nullam consequat orci at ex aliquet, vitae aliquet lorem suscipit. Maecenas nisi purus, semper eu lorem vel, elementum dapibus quam. Suspendisse potenti. Nulla augue enim, vulputate a fringilla eget, sollicitudin nec turpis. Aenean vitae pulvinar ante. Nam ex dui, gravida a nunc sed, tristique lacinia sapien. Sed auctor laoreet nisl, et maximus risus. Fusce finibus bibendum mauris. Ut cursus euismod eros non dapibus. Sed luctus eleifend lorem venenatis aliquam.</p>
<p>Morbi volutpat velit vitae est molestie, nec porttitor orci tempus. Suspendisse lorem arcu, elementum sit amet diam sit amet, pharetra laoreet metus. Integer posuere sapien porta, placerat odio lobortis, sollicitudin augue. Integer mattis arcu est, gravida porta justo ultrices a. Etiam egestas in ante at interdum. Cras sodales at lectus nec interdum. Donec ac posuere ligula, id dictum lectus. Nullam et elit non nunc convallis pulvinar. Pellentesque vitae pulvinar ex. Etiam a mattis risus, vitae gravida neque.</p>
<p>Nullam vestibulum nisl a faucibus sodales. Interdum et malesuada fames ac ante ipsum primis in faucibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla iaculis gravida sem at aliquam. Vestibulum id enim suscipit, condimentum ipsum ut, egestas libero. Proin et leo ac eros hendrerit tincidunt dapibus ac urna. Integer tincidunt, est et faucibus malesuada, purus ligula ultricies velit, quis rutrum lacus quam non neque. Sed facilisis ipsum eget nisl consectetur sollicitudin. Donec sodales massa non quam ornare tristique. Suspendisse condimentum dui dolor, in ultrices leo laoreet non.</p>
<p>Morbi mattis, mi nec fringilla dignissim, nisl risus pharetra massa, in luctus sem magna at ex. Nullam aliquam ultricies dolor, eget maximus eros auctor sed. Suspendisse sodales orci a elementum dignissim. Maecenas vulputate pharetra nisl vel cursus. Sed sit amet molestie lacus. Etiam fringilla maximus velit at posuere. Vestibulum non metus non sapien molestie tempor. Ut tincidunt faucibus lectus. Aliquam scelerisque ligula vel dictum fermentum. Donec egestas velit consequat vehicula condimentum. Etiam semper rhoncus efficitur. Ut ut leo pretium nisi pharetra pharetra. Nullam elementum, metus at sollicitudin convallis, mauris eros sagittis justo, quis venenatis ante magna dignissim nisl. Donec sit amet tempus tellus, id ultrices quam. Aliquam dui dolor, placerat non metus ut, mattis imperdiet nisi. Maecenas ultrices felis lacus, ut mattis ipsum laoreet vitae.</p>
<p>Fusce commodo faucibus volutpat. Nulla tristique libero at mi ultricies, scelerisque lobortis risus accumsan. Vestibulum iaculis, est a blandit eleifend, lorem justo porttitor arcu, a feugiat arcu magna eget nulla. Mauris posuere massa vitae diam pretium placerat nec ut ex. Ut porttitor nisi sit amet felis eleifend, non fermentum nibh placerat. In molestie mi a mi rutrum tempus. Praesent fringilla semper mi, at accumsan lorem lobortis euismod.</p>
<p>Fusce fermentum interdum leo non auctor. In hac habitasse platea dictumst. Pellentesque lectus ante, vehicula ac blandit dictum, pulvinar non tortor. Ut faucibus erat luctus, convallis magna non, ornare dolor. Sed dictum, nunc non iaculis pharetra, mi nisl pretium libero, at tincidunt massa felis eu mauris. Maecenas sit amet lorem non enim finibus posuere. Ut pulvinar aliquam convallis. Maecenas eu purus nec tortor bibendum maximus in quis enim. Fusce vehicula leo non felis posuere aliquet. Nam aliquet mauris nec felis dictum, non semper diam efficitur. Duis blandit euismod vestibulum. Nulla quis leo venenatis, volutpat ex sit amet, vulputate enim. Morbi varius arcu id tortor egestas ornare. Etiam porttitor et elit et condimentum. Maecenas libero felis, consequat varius pharetra non, tempor eget lacus. Fusce vel volutpat ante, vel feugiat nulla.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In maximus facilisis dolor, mollis consequat justo vestibulum in. Pellentesque ac laoreet turpis. Duis eget sodales elit. In eget eros vitae nibh laoreet viverra. Fusce tincidunt tortor id metus iaculis, in pulvinar urna consectetur. Nunc in leo non lacus volutpat rhoncus. Vestibulum aliquet tortor quis vehicula tempor. Vivamus faucibus orci nec condimentum consequat. Vestibulum vestibulum venenatis tincidunt. Donec non velit nulla. Nunc tellus est, feugiat quis interdum luctus, rhoncus non nisi. Aenean sagittis sed nisl sit amet vehicula. Nulla maximus at lacus eget tristique. Curabitur dignissim ligula et massa rhoncus, id lobortis odio dignissim. Sed ut dolor ac libero lacinia laoreet nec eu urna. Morbi justo lectus, ultrices ac tellus ut, lobortis semper risus.</p>
<p>Phasellus tempor dignissim odio, sodales vulputate metus facilisis sit amet. Maecenas vestibulum dapibus ipsum, nec bibendum neque tempor eget. Nunc ullamcorper, libero et semper condimentum, nibh mi pretium nisi, a hendrerit elit nunc sed metus. Duis lacinia quis dui ut interdum. In efficitur vitae magna sit amet aliquam. Pellentesque quis ullamcorper lorem. Etiam id ullamcorper velit. Suspendisse id tristique ante, suscipit facilisis nisl. Ut ac orci quis augue ornare egestas a id eros. Curabitur dictum eros mauris, lacinia vulputate diam dignissim at. Curabitur venenatis posuere lorem, non maximus lectus lobortis in.</p>
<p>Praesent in finibus purus. Maecenas nec rutrum mi. Donec molestie rhoncus ex vel laoreet. Duis id leo sit amet nisi tristique porta non at enim. Suspendisse eu pharetra lorem. Nunc posuere odio nisl, id iaculis felis fringilla ut. Proin aliquam sapien quis tortor vestibulum interdum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque gravida bibendum urna, tincidunt venenatis ligula egestas vitae. Fusce accumsan ligula et diam porta, id finibus felis vulputate.</p>
<p>Ut eleifend venenatis quam, vel ultricies diam vestibulum sit amet. Vestibulum accumsan eu felis et dictum. Cras turpis tellus, sodales ut nibh accumsan, rutrum ullamcorper ligula. Donec mollis sem eros, vitae finibus dui ullamcorper vel. Mauris sodales diam ut dictum mattis. Nam varius nisi ac efficitur dapibus. Nam dignissim, dolor at suscipit dignissim, ipsum eros mollis risus, eget facilisis lacus dolor id nisl. Vivamus dictum rutrum neque, vel accumsan lacus vulputate in. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris vel tortor sed mi faucibus egestas non maximus enim. Suspendisse sed mi sagittis, imperdiet felis sed, tristique nisi. Proin porta nisi at pretium volutpat. Quisque nec nisl dictum, dignissim erat sit amet, vestibulum dui.</p>
<p>Curabitur vitae consectetur felis. In quis ligula metus. Nunc mauris ex, viverra in suscipit in, ultricies id lorem. Sed ac libero at velit iaculis placerat vitae in odio. Sed tortor dui, lobortis nec pretium ut, ullamcorper a dui. Praesent congue erat sed ultrices pretium. Nullam consequat orci at ex aliquet, vitae aliquet lorem suscipit. Maecenas nisi purus, semper eu lorem vel, elementum dapibus quam. Suspendisse potenti. Nulla augue enim, vulputate a fringilla eget, sollicitudin nec turpis. Aenean vitae pulvinar ante. Nam ex dui, gravida a nunc sed, tristique lacinia sapien. Sed auctor laoreet nisl, et maximus risus. Fusce finibus bibendum mauris. Ut cursus euismod eros non dapibus. Sed luctus eleifend lorem venenatis aliquam.</p>
<p>Morbi volutpat velit vitae est molestie, nec porttitor orci tempus. Suspendisse lorem arcu, elementum sit amet diam sit amet, pharetra laoreet metus. Integer posuere sapien porta, placerat odio lobortis, sollicitudin augue. Integer mattis arcu est, gravida porta justo ultrices a. Etiam egestas in ante at interdum. Cras sodales at lectus nec interdum. Donec ac posuere ligula, id dictum lectus. Nullam et elit non nunc convallis pulvinar. Pellentesque vitae pulvinar ex. Etiam a mattis risus, vitae gravida neque.</p>
<p>Nullam vestibulum nisl a faucibus sodales. Interdum et malesuada fames ac ante ipsum primis in faucibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla iaculis gravida sem at aliquam. Vestibulum id enim suscipit, condimentum ipsum ut, egestas libero. Proin et leo ac eros hendrerit tincidunt dapibus ac urna. Integer tincidunt, est et faucibus malesuada, purus ligula ultricies velit, quis rutrum lacus quam non neque. Sed facilisis ipsum eget nisl consectetur sollicitudin. Donec sodales massa non quam ornare tristique. Suspendisse condimentum dui dolor, in ultrices leo laoreet non.</p>
<p>Morbi mattis, mi nec fringilla dignissim, nisl risus pharetra massa, in luctus sem magna at ex. Nullam aliquam ultricies dolor, eget maximus eros auctor sed. Suspendisse sodales orci a elementum dignissim. Maecenas vulputate pharetra nisl vel cursus. Sed sit amet molestie lacus. Etiam fringilla maximus velit at posuere. Vestibulum non metus non sapien molestie tempor. Ut tincidunt faucibus lectus. Aliquam scelerisque ligula vel dictum fermentum. Donec egestas velit consequat vehicula condimentum. Etiam semper rhoncus efficitur. Ut ut leo pretium nisi pharetra pharetra. Nullam elementum, metus at sollicitudin convallis, mauris eros sagittis justo, quis venenatis ante magna dignissim nisl. Donec sit amet tempus tellus, id ultrices quam. Aliquam dui dolor, placerat non metus ut, mattis imperdiet nisi. Maecenas ultrices felis lacus, ut mattis ipsum laoreet vitae.</p>
<p>Fusce commodo faucibus volutpat. Nulla tristique libero at mi ultricies, scelerisque lobortis risus accumsan. Vestibulum iaculis, est a blandit eleifend, lorem justo porttitor arcu, a feugiat arcu magna eget nulla. Mauris posuere massa vitae diam pretium placerat nec ut ex. Ut porttitor nisi sit amet felis eleifend, non fermentum nibh placerat. In molestie mi a mi rutrum tempus. Praesent fringilla semper mi, at accumsan lorem lobortis euismod.</p>
<p>Fusce fermentum interdum leo non auctor. In hac habitasse platea dictumst. Pellentesque lectus ante, vehicula ac blandit dictum, pulvinar non tortor. Ut faucibus erat luctus, convallis magna non, ornare dolor. Sed dictum, nunc non iaculis pharetra, mi nisl pretium libero, at tincidunt massa felis eu mauris. Maecenas sit amet lorem non enim finibus posuere. Ut pulvinar aliquam convallis. Maecenas eu purus nec tortor bibendum maximus in quis enim. Fusce vehicula leo non felis posuere aliquet. Nam aliquet mauris nec felis dictum, non semper diam efficitur. Duis blandit euismod vestibulum. Nulla quis leo venenatis, volutpat ex sit amet, vulputate enim. Morbi varius arcu id tortor egestas ornare. Etiam porttitor et elit et condimentum. Maecenas libero felis, consequat varius pharetra non, tempor eget lacus. Fusce vel volutpat ante, vel feugiat nulla.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In maximus facilisis dolor, mollis consequat justo vestibulum in. Pellentesque ac laoreet turpis. Duis eget sodales elit. In eget eros vitae nibh laoreet viverra. Fusce tincidunt tortor id metus iaculis, in pulvinar urna consectetur. Nunc in leo non lacus volutpat rhoncus. Vestibulum aliquet tortor quis vehicula tempor. Vivamus faucibus orci nec condimentum consequat. Vestibulum vestibulum venenatis tincidunt. Donec non velit nulla. Nunc tellus est, feugiat quis interdum luctus, rhoncus non nisi. Aenean sagittis sed nisl sit amet vehicula. Nulla maximus at lacus eget tristique. Curabitur dignissim ligula et massa rhoncus, id lobortis odio dignissim. Sed ut dolor ac libero lacinia laoreet nec eu urna. Morbi justo lectus, ultrices ac tellus ut, lobortis semper risus.</p>
<p>Phasellus tempor dignissim odio, sodales vulputate metus facilisis sit amet. Maecenas vestibulum dapibus ipsum, nec bibendum neque tempor eget. Nunc ullamcorper, libero et semper condimentum, nibh mi pretium nisi, a hendrerit elit nunc sed metus. Duis lacinia quis dui ut interdum. In efficitur vitae magna sit amet aliquam. Pellentesque quis ullamcorper lorem. Etiam id ullamcorper velit. Suspendisse id tristique ante, suscipit facilisis nisl. Ut ac orci quis augue ornare egestas a id eros. Curabitur dictum eros mauris, lacinia vulputate diam dignissim at. Curabitur venenatis posuere lorem, non maximus lectus lobortis in.</p>
<p>Praesent in finibus purus. Maecenas nec rutrum mi. Donec molestie rhoncus ex vel laoreet. Duis id leo sit amet nisi tristique porta non at enim. Suspendisse eu pharetra lorem. Nunc posuere odio nisl, id iaculis felis fringilla ut. Proin aliquam sapien quis tortor vestibulum interdum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Pellentesque gravida bibendum urna, tincidunt venenatis ligula egestas vitae. Fusce accumsan ligula et diam porta, id finibus felis vulputate.</p>
<p>Ut eleifend venenatis quam, vel ultricies diam vestibulum sit amet. Vestibulum accumsan eu felis et dictum. Cras turpis tellus, sodales ut nibh accumsan, rutrum ullamcorper ligula. Donec mollis sem eros, vitae finibus dui ullamcorper vel. Mauris sodales diam ut dictum mattis. Nam varius nisi ac efficitur dapibus. Nam dignissim, dolor at suscipit dignissim, ipsum eros mollis risus, eget facilisis lacus dolor id nisl. Vivamus dictum rutrum neque, vel accumsan lacus vulputate in. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris vel tortor sed mi faucibus egestas non maximus enim. Suspendisse sed mi sagittis, imperdiet felis sed, tristique nisi. Proin porta nisi at pretium volutpat. Quisque nec nisl dictum, dignissim erat sit amet, vestibulum dui.</p>
<p>Curabitur vitae consectetur felis. In quis ligula metus. Nunc mauris ex, viverra in suscipit in, ultricies id lorem. Sed ac libero at velit iaculis placerat vitae in odio. Sed tortor dui, lobortis nec pretium ut, ullamcorper a dui. Praesent congue erat sed ultrices pretium. Nullam consequat orci at ex aliquet, vitae aliquet lorem suscipit. Maecenas nisi purus, semper eu lorem vel, elementum dapibus quam. Suspendisse potenti. Nulla augue enim, vulputate a fringilla eget, sollicitudin nec turpis. Aenean vitae pulvinar ante. Nam ex dui, gravida a nunc sed, tristique lacinia sapien. Sed auctor laoreet nisl, et maximus risus. Fusce finibus bibendum mauris. Ut cursus euismod eros non dapibus. Sed luctus eleifend lorem venenatis aliquam.</p>
<p>Morbi volutpat velit vitae est molestie, nec porttitor orci tempus. Suspendisse lorem arcu, elementum sit amet diam sit amet, pharetra laoreet metus. Integer posuere sapien porta, placerat odio lobortis, sollicitudin augue. Integer mattis arcu est, gravida porta justo ultrices a. Etiam egestas in ante at interdum. Cras sodales at lectus nec interdum. Donec ac posuere ligula, id dictum lectus. Nullam et elit non nunc convallis pulvinar. Pellentesque vitae pulvinar ex. Etiam a mattis risus, vitae gravida neque.</p>
<p>Nullam vestibulum nisl a faucibus sodales. Interdum et malesuada fames ac ante ipsum primis in faucibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla iaculis gravida sem at aliquam. Vestibulum id enim suscipit, condimentum ipsum ut, egestas libero. Proin et leo ac eros hendrerit tincidunt dapibus ac urna. Integer tincidunt, est et faucibus malesuada, purus ligula ultricies velit, quis rutrum lacus quam non neque. Sed facilisis ipsum eget nisl consectetur sollicitudin. Donec sodales massa non quam ornare tristique. Suspendisse condimentum dui dolor, in ultrices leo laoreet non.</p>
<p>Morbi mattis, mi nec fringilla dignissim, nisl risus pharetra massa, in luctus sem magna at ex. Nullam aliquam ultricies dolor, eget maximus eros auctor sed. Suspendisse sodales orci a elementum dignissim. Maecenas vulputate pharetra nisl vel cursus. Sed sit amet molestie lacus. Etiam fringilla maximus velit at posuere. Vestibulum non metus non sapien molestie tempor. Ut tincidunt faucibus lectus. Aliquam scelerisque ligula vel dictum fermentum. Donec egestas velit consequat vehicula condimentum. Etiam semper rhoncus efficitur. Ut ut leo pretium nisi pharetra pharetra. Nullam elementum, metus at sollicitudin convallis, mauris eros sagittis justo, quis venenatis ante magna dignissim nisl. Donec sit amet tempus tellus, id ultrices quam. Aliquam dui dolor, placerat non metus ut, mattis imperdiet nisi. Maecenas ultrices felis lacus, ut mattis ipsum laoreet vitae.</p>
<p>Fusce commodo faucibus volutpat. Nulla tristique libero at mi ultricies, scelerisque lobortis risus accumsan. Vestibulum iaculis, est a blandit eleifend, lorem justo porttitor arcu, a feugiat arcu magna eget nulla. Mauris posuere massa vitae diam pretium placerat nec ut ex. Ut porttitor nisi sit amet felis eleifend, non fermentum nibh placerat. In molestie mi a mi rutrum tempus. Praesent fringilla semper mi, at accumsan lorem lobortis euismod.</p>
<p>Fusce fermentum interdum leo non auctor. In hac habitasse platea dictumst. Pellentesque lectus ante, vehicula ac blandit dictum, pulvinar non tortor. Ut faucibus erat luctus, convallis magna non, ornare dolor. Sed dictum, nunc non iaculis pharetra, mi nisl pretium libero, at tincidunt massa felis eu mauris. Maecenas sit amet lorem non enim finibus posuere. Ut pulvinar aliquam convallis. Maecenas eu purus nec tortor bibendum maximus in quis enim. Fusce vehicula leo non felis posuere aliquet. Nam aliquet mauris nec felis dictum, non semper diam efficitur. Duis blandit euismod vestibulum. Nulla quis leo venenatis, volutpat ex sit amet, vulputate enim. Morbi varius arcu id tortor egestas ornare. Etiam porttitor et elit et condimentum. Maecenas libero felis, consequat varius pharetra non, tempor eget lacus. Fusce vel volutpat ante, vel feugiat nulla.</p>
You need to change:
window.onscroll = myFunction();
Into
window.onscroll = function() {myFunction()};
Why? because the onscroll is an Event that executes a function after something had happened (Scroll Event in our case).
But when you use use the the code like window.onscroll = myFunction(); the JS engine will immediately invoke the function regardless to the scroll event as soon as he sees this line of code.
You need to do two changes to achive what you are looking :
First as Shahar mentioned, you need to change the way you run the function :
window.onscroll = function() {myFunction()};
And the other thing, you are using getAttribute method to update the value of your attribute, you need to use setAttribute instead :
div.setAttribute('data-percent', '100%');
And maybe add a height to your div with css to actually be able to scroll :
#div1{height:700px}
https://jsfiddle.net/odpzLtec/
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;
<p>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.</p>
<p>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.</p>
<p>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.</p>
<p>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.</p>
<p>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.</p>
<p>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.</p>
<p>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.</p>
<p>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.</p>
<p>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.</p>
<p>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.</p>
<p>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.</p>
<p>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.</p>
<p>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.</p>
<p>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.</p>
<p>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.</p>
<p>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.</p>
<p>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.</p>
<p>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.</p>
<p>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.</p>
<p>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.</p>
<p>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.</p>
<p>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.</p>
<p>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.</p>
<p>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.</p>
<p>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.</p>
<p>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.</p>
<p>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.</p>
<p>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.</p>
<p>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.</p>
<p>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.</p>
<p>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.</p>
<p>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.</p>
<p>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.</p>
<p>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.</p>
<p>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.</p>
<p>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.</p>
<p>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.</p>
<p>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.</p>
<p>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.</p>
<p>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.</p>
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;
}
});
I have my layout exactly where I want it. However there is one item I am trying to add and I can't figure out how to do it.
As you can see I have a fixed sidebar that spans 100% of the page, fixed top header, fixed bottom footer, and then a scrollable content section. The goal is that the user can always see the sidebar, header, footer at all times.
I would like to add a subheader div with a height of 80px. This subheader should be right under the primary header. It will be used to display page title and any other page actions. It should be visible at all times when scrolling content section.
I am not sure if the div should be placed outside of #wrapper-content or inside of it. And additionally not sure what the css class should look like for it.
html, body {
height: 100vh;
}
#app-sidebar {
width: 50px;
height: 100%;
background: #102027;
float: left;
}
#app-wrapper {
margin-left: 50px;
height: 100%;
background: lightblue;
}
#wrapper-header {
overflow: hidden;
background-color: #333;
position: fixed;
top: 0;
width: 100%;
height: 50px;
}
#wrapper-content {
position:fixed;
overflow:auto;
background-color: grey;
margin-top: 50px;
margin-bottom: 20px;
height: calc(100% - 70px);
}
#wrapper-footer {
overflow: hidden;
background-color: #333;
position: fixed;
bottom: 0;
width: 100%;
height: 20px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<body>
<div id="app-sidebar"></div>
<div id="app-wrapper">
<div id="wrapper-header"></div>
<div id="wrapper-content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tincidunt maximus tristique. In id sapien imperdiet, auctor
tortor quis, ultrices justo. Integer nisi arcu, accumsan nec laoreet non, efficitur a mi. Integer ultricies
leo non rutrum posuere. Vestibulum mattis sollicitudin rhoncus. Nullam elementum lacus velit, eu consequat
dolor suscipit a. Sed nec varius risus, quis eleifend nunc. Nullam hendrerit tellus a sem malesuada luctus.
Proin ornare mi nec nulla tristique, iaculis gravida ipsum fermentum. Sed eget massa sed erat mattis maximus
eget in sem. Donec imperdiet dictum cursus. Duis vel magna volutpat, ornare quam lobortis, pellentesque sem.
Sed arcu risus, pretium vel mauris eu, porta faucibus enim. Sed nec nibh est. Suspendisse volutpat ac risus
quis rhoncus. Pellentesque sed semper neque. Nam id risus tristique, viverra mauris vitae, eleifend enim.
Donec suscipit luctus odio, sed bibendum sem viverra id. Donec fringilla feugiat felis, quis imperdiet nisl
egestas eget. Nam lacinia ligula quis quam cursus, quis fermentum mauris aliquam. Donec blandit orci id mauris
condimentum tempus. Phasellus molestie odio felis, nec feugiat lacus bibendum eget. Vivamus molestie pellentesque
lacinia. Nam est leo, efficitur ac risus ac, placerat commodo nisi. Aenean non tincidunt massa. In sollicitudin
ultrices risus at ornare. Ut et lacus massa. Fusce et ultricies odio. Nullam mattis risus quis sapien iaculis,
in consequat libero congue. Donec feugiat volutpat velit sed porttitor. Mauris dui mi, ullamcorper non porta
vel, consectetur eget quam. Mauris dolor quam, vulputate interdum auctor eget, tincidunt id enim. Vivamus
aliquam consectetur magna. Morbi porta tortor ex, quis varius ex tincidunt non. Proin dapibus non lacus eget
vestibulum. Morbi efficitur nulla in turpis venenatis, eget ornare mauris tristique. Pellentesque auctor
fringilla rhoncus. Donec auctor in neque non rhoncus. Nunc consequat, ipsum a hendrerit aliquet, odio tortor
bibendum nunc, quis feugiat purus purus et libero. Nulla leo nisi, laoreet nec vulputate accumsan, lobortis
nec sapien. Donec blandit purus ut tempor hendrerit. Phasellus sed massa velit. Integer fringilla at arcu
ac venenatis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Maecenas sit amet varius enim.
Curabitur quis sagittis dolor. Phasellus scelerisque leo ante, ac bibendum ante placerat in. Aenean volutpat
tempus massa vel mollis. Quisque et lacus ac augue tincidunt eleifend. Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Duis blandit arcu sed ligula maximus, ac commodo sapien lobortis. Pellentesque hendrerit
mauris nibh, a semper libero maximus in. Suspendisse non arcu leo. Aliquam eget orci id elit consectetur
maximus ac vitae lacus. Nam tristique elit ac urna tempor, quis convallis mauris lobortis. Nulla dictum lorem
ac dolor rhoncus blandit eget vitae neque. Nunc quis elit sit amet sem iaculis vestibulum. Proin viverra
orci non nulla tempus congue. Nam vitae faucibus massa. Nullam vulputate dolor sit amet luctus molestie.
Nunc mattis blandit ligula eu tincidunt. Pellentesque sit amet magna a tellus molestie fringilla sed placerat
tortor.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tincidunt maximus tristique. In id sapien imperdiet, auctor
tortor quis, ultrices justo. Integer nisi arcu, accumsan nec laoreet non, efficitur a mi. Integer ultricies
leo non rutrum posuere. Vestibulum mattis sollicitudin rhoncus. Nullam elementum lacus velit, eu consequat
dolor suscipit a. Sed nec varius risus, quis eleifend nunc. Nullam hendrerit tellus a sem malesuada luctus.
Proin ornare mi nec nulla tristique, iaculis gravida ipsum fermentum. Sed eget massa sed erat mattis maximus
eget in sem. Donec imperdiet dictum cursus. Duis vel magna volutpat, ornare quam lobortis, pellentesque sem.
Sed arcu risus, pretium vel mauris eu, porta faucibus enim. Sed nec nibh est. Suspendisse volutpat ac risus
quis rhoncus. Pellentesque sed semper neque. Nam id risus tristique, viverra mauris vitae, eleifend enim.
Donec suscipit luctus odio, sed bibendum sem viverra id. Donec fringilla feugiat felis, quis imperdiet nisl
egestas eget. Nam lacinia ligula quis quam cursus, quis fermentum mauris aliquam. Donec blandit orci id mauris
condimentum tempus. Phasellus molestie odio felis, nec feugiat lacus bibendum eget. Vivamus molestie pellentesque
lacinia. Nam est leo, efficitur ac risus ac, placerat commodo nisi. Aenean non tincidunt massa. In sollicitudin
ultrices risus at ornare. Ut et lacus massa. Fusce et ultricies odio. Nullam mattis risus quis sapien iaculis,
in consequat libero congue. Donec feugiat volutpat velit sed porttitor. Mauris dui mi, ullamcorper non porta
vel, consectetur eget quam. Mauris dolor quam, vulputate interdum auctor eget, tincidunt id enim. Vivamus
aliquam consectetur magna. Morbi porta tortor ex, quis varius ex tincidunt non. Proin dapibus non lacus eget
vestibulum. Morbi efficitur nulla in turpis venenatis, eget ornare mauris tristique. Pellentesque auctor
fringilla rhoncus. Donec auctor in neque non rhoncus. Nunc consequat, ipsum a hendrerit aliquet, odio tortor
bibendum nunc, quis feugiat purus purus et libero. Nulla leo nisi, laoreet nec vulputate accumsan, lobortis
nec sapien. Donec blandit purus ut tempor hendrerit. Phasellus sed massa velit. Integer fringilla at arcu
ac venenatis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Maecenas sit amet varius enim.
Curabitur quis sagittis dolor. Phasellus scelerisque leo ante, ac bibendum ante placerat in. Aenean volutpat
tempus massa vel mollis. Quisque et lacus ac augue tincidunt eleifend. Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Duis blandit arcu sed ligula maximus, ac commodo sapien lobortis. Pellentesque hendrerit
mauris nibh, a semper libero maximus in. Suspendisse non arcu leo. Aliquam eget orci id elit consectetur
maximus ac vitae lacus. Nam tristique elit ac urna tempor, quis convallis mauris lobortis. Nulla dictum lorem
ac dolor rhoncus blandit eget vitae neque. Nunc quis elit sit amet sem iaculis vestibulum. Proin viverra
orci non nulla tempus congue. Nam vitae faucibus massa. Nullam vulputate dolor sit amet luctus molestie.
Nunc mattis blandit ligula eu tincidunt. Pellentesque sit amet magna a tellus molestie fringilla sed placerat
tortor.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tincidunt maximus tristique. In id sapien imperdiet, auctor
tortor quis, ultrices justo. Integer nisi arcu, accumsan nec laoreet non, efficitur a mi. Integer ultricies
leo non rutrum posuere. Vestibulum mattis sollicitudin rhoncus. Nullam elementum lacus velit, eu consequat
dolor suscipit a. Sed nec varius risus, quis eleifend nunc. Nullam hendrerit tellus a sem malesuada luctus.
Proin ornare mi nec nulla tristique, iaculis gravida ipsum fermentum. Sed eget massa sed erat mattis maximus
eget in sem. Donec imperdiet dictum cursus. Duis vel magna volutpat, ornare quam lobortis, pellentesque sem.
Sed arcu risus, pretium vel mauris eu, porta faucibus enim. Sed nec nibh est. Suspendisse volutpat ac risus
quis rhoncus. Pellentesque sed semper neque. Nam id risus tristique, viverra mauris vitae, eleifend enim.
Donec suscipit luctus odio, sed bibendum sem viverra id. Donec fringilla feugiat felis, quis imperdiet nisl
egestas eget. Nam lacinia ligula quis quam cursus, quis fermentum mauris aliquam. Donec blandit orci id mauris
condimentum tempus. Phasellus molestie odio felis, nec feugiat lacus bibendum eget. Vivamus molestie pellentesque
lacinia. Nam est leo, efficitur ac risus ac, placerat commodo nisi. Aenean non tincidunt massa. In sollicitudin
ultrices risus at ornare. Ut et lacus massa. Fusce et ultricies odio. Nullam mattis risus quis sapien iaculis,
in consequat libero congue. Donec feugiat volutpat velit sed porttitor. Mauris dui mi, ullamcorper non porta
vel, consectetur eget quam. Mauris dolor quam, vulputate interdum auctor eget, tincidunt id enim. Vivamus
aliquam consectetur magna. Morbi porta tortor ex, quis varius ex tincidunt non. Proin dapibus non lacus eget
vestibulum. Morbi efficitur nulla in turpis venenatis, eget ornare mauris tristique. Pellentesque auctor
fringilla rhoncus. Donec auctor in neque non rhoncus. Nunc consequat, ipsum a hendrerit aliquet, odio tortor
bibendum nunc, quis feugiat purus purus et libero. Nulla leo nisi, laoreet nec vulputate accumsan, lobortis
nec sapien. Donec blandit purus ut tempor hendrerit. Phasellus sed massa velit. Integer fringilla at arcu
ac venenatis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Maecenas sit amet varius enim.
Curabitur quis sagittis dolor. Phasellus scelerisque leo ante, ac bibendum ante placerat in. Aenean volutpat
tempus massa vel mollis. Quisque et lacus ac augue tincidunt eleifend. Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Duis blandit arcu sed ligula maximus, ac commodo sapien lobortis. Pellentesque hendrerit
mauris nibh, a semper libero maximus in. Suspendisse non arcu leo. Aliquam eget orci id elit consectetur
maximus ac vitae lacus. Nam tristique elit ac urna tempor, quis convallis mauris lobortis. Nulla dictum lorem
ac dolor rhoncus blandit eget vitae neque. Nunc quis elit sit amet sem iaculis vestibulum. Proin viverra
orci non nulla tempus congue. Nam vitae faucibus massa. Nullam vulputate dolor sit amet luctus molestie.
Nunc mattis blandit ligula eu tincidunt. Pellentesque sit amet magna a tellus molestie fringilla sed placerat
tortor.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tincidunt maximus tristique. In id sapien imperdiet, auctor
tortor quis, ultrices justo. Integer nisi arcu, accumsan nec laoreet non, efficitur a mi. Integer ultricies
leo non rutrum posuere. Vestibulum mattis sollicitudin rhoncus. Nullam elementum lacus velit, eu consequat
dolor suscipit a. Sed nec varius risus, quis eleifend nunc. Nullam hendrerit tellus a sem malesuada luctus.
Proin ornare mi nec nulla tristique, iaculis gravida ipsum fermentum. Sed eget massa sed erat mattis maximus
eget in sem. Donec imperdiet dictum cursus. Duis vel magna volutpat, ornare quam lobortis, pellentesque sem.
Sed arcu risus, pretium vel mauris eu, porta faucibus enim. Sed nec nibh est. Suspendisse volutpat ac risus
quis rhoncus. Pellentesque sed semper neque. Nam id risus tristique, viverra mauris vitae, eleifend enim.
Donec suscipit luctus odio, sed bibendum sem viverra id. Donec fringilla feugiat felis, quis imperdiet nisl
egestas eget. Nam lacinia ligula quis quam cursus, quis fermentum mauris aliquam. Donec blandit orci id mauris
condimentum tempus. Phasellus molestie odio felis, nec feugiat lacus bibendum eget. Vivamus molestie pellentesque
lacinia. Nam est leo, efficitur ac risus ac, placerat commodo nisi. Aenean non tincidunt massa. In sollicitudin
ultrices risus at ornare. Ut et lacus massa. Fusce et ultricies odio. Nullam mattis risus quis sapien iaculis,
in consequat libero congue. Donec feugiat volutpat velit sed porttitor. Mauris dui mi, ullamcorper non porta
vel, consectetur eget quam. Mauris dolor quam, vulputate interdum auctor eget, tincidunt id enim. Vivamus
aliquam consectetur magna. Morbi porta tortor ex, quis varius ex tincidunt non. Proin dapibus non lacus eget
vestibulum. Morbi efficitur nulla in turpis venenatis, eget ornare mauris tristique. Pellentesque auctor
fringilla rhoncus. Donec auctor in neque non rhoncus. Nunc consequat, ipsum a hendrerit aliquet, odio tortor
bibendum nunc, quis feugiat purus purus et libero. Nulla leo nisi, laoreet nec vulputate accumsan, lobortis
nec sapien. Donec blandit purus ut tempor hendrerit. Phasellus sed massa velit. Integer fringilla at arcu
ac venenatis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Maecenas sit amet varius enim.
Curabitur quis sagittis dolor. Phasellus scelerisque leo ante, ac bibendum ante placerat in. Aenean volutpat
tempus massa vel mollis. Quisque et lacus ac augue tincidunt eleifend. Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Duis blandit arcu sed ligula maximus, ac commodo sapien lobortis. Pellentesque hendrerit
mauris nibh, a semper libero maximus in. Suspendisse non arcu leo. Aliquam eget orci id elit consectetur
maximus ac vitae lacus. Nam tristique elit ac urna tempor, quis convallis mauris lobortis. Nulla dictum lorem
ac dolor rhoncus blandit eget vitae neque. Nunc quis elit sit amet sem iaculis vestibulum. Proin viverra
orci non nulla tempus congue. Nam vitae faucibus massa. Nullam vulputate dolor sit amet luctus molestie.
Nunc mattis blandit ligula eu tincidunt. Pellentesque sit amet magna a tellus molestie fringilla sed placerat
tortor.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tincidunt maximus tristique. In id sapien imperdiet, auctor
tortor quis, ultrices justo. Integer nisi arcu, accumsan nec laoreet non, efficitur a mi. Integer ultricies
leo non rutrum posuere. Vestibulum mattis sollicitudin rhoncus. Nullam elementum lacus velit, eu consequat
dolor suscipit a. Sed nec varius risus, quis eleifend nunc. Nullam hendrerit tellus a sem malesuada luctus.
Proin ornare mi nec nulla tristique, iaculis gravida ipsum fermentum. Sed eget massa sed erat mattis maximus
eget in sem. Donec imperdiet dictum cursus. Duis vel magna volutpat, ornare quam lobortis, pellentesque sem.
Sed arcu risus, pretium vel mauris eu, porta faucibus enim. Sed nec nibh est. Suspendisse volutpat ac risus
quis rhoncus. Pellentesque sed semper neque. Nam id risus tristique, viverra mauris vitae, eleifend enim.
Donec suscipit luctus odio, sed bibendum sem viverra id. Donec fringilla feugiat felis, quis imperdiet nisl
egestas eget. Nam lacinia ligula quis quam cursus, quis fermentum mauris aliquam. Donec blandit orci id mauris
condimentum tempus. Phasellus molestie odio felis, nec feugiat lacus bibendum eget. Vivamus molestie pellentesque
lacinia. Nam est leo, efficitur ac risus ac, placerat commodo nisi. Aenean non tincidunt massa. In sollicitudin
ultrices risus at ornare. Ut et lacus massa. Fusce et ultricies odio. Nullam mattis risus quis sapien iaculis,
in consequat libero congue. Donec feugiat volutpat velit sed porttitor. Mauris dui mi, ullamcorper non porta
vel, consectetur eget quam. Mauris dolor quam, vulputate interdum auctor eget, tincidunt id enim. Vivamus
aliquam consectetur magna. Morbi porta tortor ex, quis varius ex tincidunt non. Proin dapibus non lacus eget
vestibulum. Morbi efficitur nulla in turpis venenatis, eget ornare mauris tristique. Pellentesque auctor
fringilla rhoncus. Donec auctor in neque non rhoncus. Nunc consequat, ipsum a hendrerit aliquet, odio tortor
bibendum nunc, quis feugiat purus purus et libero. Nulla leo nisi, laoreet nec vulputate accumsan, lobortis
nec sapien. Donec blandit purus ut tempor hendrerit. Phasellus sed massa velit. Integer fringilla at arcu
ac venenatis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Maecenas sit amet varius enim.
Curabitur quis sagittis dolor. Phasellus scelerisque leo ante, ac bibendum ante placerat in. Aenean volutpat
tempus massa vel mollis. Quisque et lacus ac augue tincidunt eleifend. Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Duis blandit arcu sed ligula maximus, ac commodo sapien lobortis. Pellentesque hendrerit
mauris nibh, a semper libero maximus in. Suspendisse non arcu leo. Aliquam eget orci id elit consectetur
maximus ac vitae lacus. Nam tristique elit ac urna tempor, quis convallis mauris lobortis. Nulla dictum lorem
ac dolor rhoncus blandit eget vitae neque. Nunc quis elit sit amet sem iaculis vestibulum. Proin viverra
orci non nulla tempus congue. Nam vitae faucibus massa. Nullam vulputate dolor sit amet luctus molestie.
Nunc mattis blandit ligula eu tincidunt. Pellentesque sit amet magna a tellus molestie fringilla sed placerat
tortor.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tincidunt maximus tristique. In id sapien imperdiet, auctor
tortor quis, ultrices justo. Integer nisi arcu, accumsan nec laoreet non, efficitur a mi. Integer ultricies
leo non rutrum posuere. Vestibulum mattis sollicitudin rhoncus. Nullam elementum lacus velit, eu consequat
dolor suscipit a. Sed nec varius risus, quis eleifend nunc. Nullam hendrerit tellus a sem malesuada luctus.
Proin ornare mi nec nulla tristique, iaculis gravida ipsum fermentum. Sed eget massa sed erat mattis maximus
eget in sem. Donec imperdiet dictum cursus. Duis vel magna volutpat, ornare quam lobortis, pellentesque sem.
Sed arcu risus, pretium vel mauris eu, porta faucibus enim. Sed nec nibh est. Suspendisse volutpat ac risus
quis rhoncus. Pellentesque sed semper neque. Nam id risus tristique, viverra mauris vitae, eleifend enim.
Donec suscipit luctus odio, sed bibendum sem viverra id. Donec fringilla feugiat felis, quis imperdiet nisl
egestas eget. Nam lacinia ligula quis quam cursus, quis fermentum mauris aliquam. Donec blandit orci id mauris
condimentum tempus. Phasellus molestie odio felis, nec feugiat lacus bibendum eget. Vivamus molestie pellentesque
lacinia. Nam est leo, efficitur ac risus ac, placerat commodo nisi. Aenean non tincidunt massa. In sollicitudin
ultrices risus at ornare. Ut et lacus massa. Fusce et ultricies odio. Nullam mattis risus quis sapien iaculis,
in consequat libero congue. Donec feugiat volutpat velit sed porttitor. Mauris dui mi, ullamcorper non porta
vel, consectetur eget quam. Mauris dolor quam, vulputate interdum auctor eget, tincidunt id enim. Vivamus
aliquam consectetur magna. Morbi porta tortor ex, quis varius ex tincidunt non. Proin dapibus non lacus eget
vestibulum. Morbi efficitur nulla in turpis venenatis, eget ornare mauris tristique. Pellentesque auctor
fringilla rhoncus. Donec auctor in neque non rhoncus. Nunc consequat, ipsum a hendrerit aliquet, odio tortor
bibendum nunc, quis feugiat purus purus et libero. Nulla leo nisi, laoreet nec vulputate accumsan, lobortis
nec sapien. Donec blandit purus ut tempor hendrerit. Phasellus sed massa velit. Integer fringilla at arcu
ac venenatis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Maecenas sit amet varius enim.
Curabitur quis sagittis dolor. Phasellus scelerisque leo ante, ac bibendum ante placerat in. Aenean volutpat
tempus massa vel mollis. Quisque et lacus ac augue tincidunt eleifend. Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Duis blandit arcu sed ligula maximus, ac commodo sapien lobortis. Pellentesque hendrerit
mauris nibh, a semper libero maximus in. Suspendisse non arcu leo. Aliquam eget orci id elit consectetur
maximus ac vitae lacus. Nam tristique elit ac urna tempor, quis convallis mauris lobortis. Nulla dictum lorem
ac dolor rhoncus blandit eget vitae neque. Nunc quis elit sit amet sem iaculis vestibulum. Proin viverra
orci non nulla tempus congue. Nam vitae faucibus massa. Nullam vulputate dolor sit amet luctus molestie.
Nunc mattis blandit ligula eu tincidunt. Pellentesque sit amet magna a tellus molestie fringilla sed placerat
tortor.
</p>
</div>
<div id="wrapper-footer"></div>
</div>
</body>
you can make a a new div after header div and give it top equal to the height of header and make this div fixed too. you can keep it outside #wrapper-content and just after #wrapper-header. Something like this:
html, body {
height: 100vh;
}
#app-sidebar {
width: 50px;
height: 100%;
background: #102027;
float: left;
}
#app-wrapper {
margin-left: 50px;
height: 100%;
background: lightblue;
}
#wrapper-header {
overflow: hidden;
background-color: #333;
position: fixed;
top: 0;
width: 100%;
height: 50px;
}
#wrapper-subheader {
overflow: hidden;
background-color: #555;
position: fixed;
top: 50px;
width: 100%;
height: 80px;
}
#wrapper-content {
position:fixed;
overflow:auto;
background-color: grey;
top: 130px;
bottom: 20px;
}
#wrapper-footer {
overflow: hidden;
background-color: #333;
position: fixed;
bottom: 0;
width: 100%;
height: 20px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<body>
<div id="app-sidebar"></div>
<div id="app-wrapper">
<div id="wrapper-header"></div>
<div id="wrapper-subheader"></div>
<div id="wrapper-content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tincidunt maximus tristique. In id sapien imperdiet, auctor
tortor quis, ultrices justo. Integer nisi arcu, accumsan nec laoreet non, efficitur a mi. Integer ultricies
leo non rutrum posuere. Vestibulum mattis sollicitudin rhoncus. Nullam elementum lacus velit, eu consequat
dolor suscipit a. Sed nec varius risus, quis eleifend nunc. Nullam hendrerit tellus a sem malesuada luctus.
Proin ornare mi nec nulla tristique, iaculis gravida ipsum fermentum. Sed eget massa sed erat mattis maximus
eget in sem. Donec imperdiet dictum cursus. Duis vel magna volutpat, ornare quam lobortis, pellentesque sem.
Sed arcu risus, pretium vel mauris eu, porta faucibus enim. Sed nec nibh est. Suspendisse volutpat ac risus
quis rhoncus. Pellentesque sed semper neque. Nam id risus tristique, viverra mauris vitae, eleifend enim.
Donec suscipit luctus odio, sed bibendum sem viverra id. Donec fringilla feugiat felis, quis imperdiet nisl
egestas eget. Nam lacinia ligula quis quam cursus, quis fermentum mauris aliquam. Donec blandit orci id mauris
condimentum tempus. Phasellus molestie odio felis, nec feugiat lacus bibendum eget. Vivamus molestie pellentesque
lacinia. Nam est leo, efficitur ac risus ac, placerat commodo nisi. Aenean non tincidunt massa. In sollicitudin
ultrices risus at ornare. Ut et lacus massa. Fusce et ultricies odio. Nullam mattis risus quis sapien iaculis,
in consequat libero congue. Donec feugiat volutpat velit sed porttitor. Mauris dui mi, ullamcorper non porta
vel, consectetur eget quam. Mauris dolor quam, vulputate interdum auctor eget, tincidunt id enim. Vivamus
aliquam consectetur magna. Morbi porta tortor ex, quis varius ex tincidunt non. Proin dapibus non lacus eget
vestibulum. Morbi efficitur nulla in turpis venenatis, eget ornare mauris tristique. Pellentesque auctor
fringilla rhoncus. Donec auctor in neque non rhoncus. Nunc consequat, ipsum a hendrerit aliquet, odio tortor
bibendum nunc, quis feugiat purus purus et libero. Nulla leo nisi, laoreet nec vulputate accumsan, lobortis
nec sapien. Donec blandit purus ut tempor hendrerit. Phasellus sed massa velit. Integer fringilla at arcu
ac venenatis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Maecenas sit amet varius enim.
Curabitur quis sagittis dolor. Phasellus scelerisque leo ante, ac bibendum ante placerat in. Aenean volutpat
tempus massa vel mollis. Quisque et lacus ac augue tincidunt eleifend. Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Duis blandit arcu sed ligula maximus, ac commodo sapien lobortis. Pellentesque hendrerit
mauris nibh, a semper libero maximus in. Suspendisse non arcu leo. Aliquam eget orci id elit consectetur
maximus ac vitae lacus. Nam tristique elit ac urna tempor, quis convallis mauris lobortis. Nulla dictum lorem
ac dolor rhoncus blandit eget vitae neque. Nunc quis elit sit amet sem iaculis vestibulum. Proin viverra
orci non nulla tempus congue. Nam vitae faucibus massa. Nullam vulputate dolor sit amet luctus molestie.
Nunc mattis blandit ligula eu tincidunt. Pellentesque sit amet magna a tellus molestie fringilla sed placerat
tortor.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tincidunt maximus tristique. In id sapien imperdiet, auctor
tortor quis, ultrices justo. Integer nisi arcu, accumsan nec laoreet non, efficitur a mi. Integer ultricies
leo non rutrum posuere. Vestibulum mattis sollicitudin rhoncus. Nullam elementum lacus velit, eu consequat
dolor suscipit a. Sed nec varius risus, quis eleifend nunc. Nullam hendrerit tellus a sem malesuada luctus.
Proin ornare mi nec nulla tristique, iaculis gravida ipsum fermentum. Sed eget massa sed erat mattis maximus
eget in sem. Donec imperdiet dictum cursus. Duis vel magna volutpat, ornare quam lobortis, pellentesque sem.
Sed arcu risus, pretium vel mauris eu, porta faucibus enim. Sed nec nibh est. Suspendisse volutpat ac risus
quis rhoncus. Pellentesque sed semper neque. Nam id risus tristique, viverra mauris vitae, eleifend enim.
Donec suscipit luctus odio, sed bibendum sem viverra id. Donec fringilla feugiat felis, quis imperdiet nisl
egestas eget. Nam lacinia ligula quis quam cursus, quis fermentum mauris aliquam. Donec blandit orci id mauris
condimentum tempus. Phasellus molestie odio felis, nec feugiat lacus bibendum eget. Vivamus molestie pellentesque
lacinia. Nam est leo, efficitur ac risus ac, placerat commodo nisi. Aenean non tincidunt massa. In sollicitudin
ultrices risus at ornare. Ut et lacus massa. Fusce et ultricies odio. Nullam mattis risus quis sapien iaculis,
in consequat libero congue. Donec feugiat volutpat velit sed porttitor. Mauris dui mi, ullamcorper non porta
vel, consectetur eget quam. Mauris dolor quam, vulputate interdum auctor eget, tincidunt id enim. Vivamus
aliquam consectetur magna. Morbi porta tortor ex, quis varius ex tincidunt non. Proin dapibus non lacus eget
vestibulum. Morbi efficitur nulla in turpis venenatis, eget ornare mauris tristique. Pellentesque auctor
fringilla rhoncus. Donec auctor in neque non rhoncus. Nunc consequat, ipsum a hendrerit aliquet, odio tortor
bibendum nunc, quis feugiat purus purus et libero. Nulla leo nisi, laoreet nec vulputate accumsan, lobortis
nec sapien. Donec blandit purus ut tempor hendrerit. Phasellus sed massa velit. Integer fringilla at arcu
ac venenatis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Maecenas sit amet varius enim.
Curabitur quis sagittis dolor. Phasellus scelerisque leo ante, ac bibendum ante placerat in. Aenean volutpat
tempus massa vel mollis. Quisque et lacus ac augue tincidunt eleifend. Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Duis blandit arcu sed ligula maximus, ac commodo sapien lobortis. Pellentesque hendrerit
mauris nibh, a semper libero maximus in. Suspendisse non arcu leo. Aliquam eget orci id elit consectetur
maximus ac vitae lacus. Nam tristique elit ac urna tempor, quis convallis mauris lobortis. Nulla dictum lorem
ac dolor rhoncus blandit eget vitae neque. Nunc quis elit sit amet sem iaculis vestibulum. Proin viverra
orci non nulla tempus congue. Nam vitae faucibus massa. Nullam vulputate dolor sit amet luctus molestie.
Nunc mattis blandit ligula eu tincidunt. Pellentesque sit amet magna a tellus molestie fringilla sed placerat
tortor.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tincidunt maximus tristique. In id sapien imperdiet, auctor
tortor quis, ultrices justo. Integer nisi arcu, accumsan nec laoreet non, efficitur a mi. Integer ultricies
leo non rutrum posuere. Vestibulum mattis sollicitudin rhoncus. Nullam elementum lacus velit, eu consequat
dolor suscipit a. Sed nec varius risus, quis eleifend nunc. Nullam hendrerit tellus a sem malesuada luctus.
Proin ornare mi nec nulla tristique, iaculis gravida ipsum fermentum. Sed eget massa sed erat mattis maximus
eget in sem. Donec imperdiet dictum cursus. Duis vel magna volutpat, ornare quam lobortis, pellentesque sem.
Sed arcu risus, pretium vel mauris eu, porta faucibus enim. Sed nec nibh est. Suspendisse volutpat ac risus
quis rhoncus. Pellentesque sed semper neque. Nam id risus tristique, viverra mauris vitae, eleifend enim.
Donec suscipit luctus odio, sed bibendum sem viverra id. Donec fringilla feugiat felis, quis imperdiet nisl
egestas eget. Nam lacinia ligula quis quam cursus, quis fermentum mauris aliquam. Donec blandit orci id mauris
condimentum tempus. Phasellus molestie odio felis, nec feugiat lacus bibendum eget. Vivamus molestie pellentesque
lacinia. Nam est leo, efficitur ac risus ac, placerat commodo nisi. Aenean non tincidunt massa. In sollicitudin
ultrices risus at ornare. Ut et lacus massa. Fusce et ultricies odio. Nullam mattis risus quis sapien iaculis,
in consequat libero congue. Donec feugiat volutpat velit sed porttitor. Mauris dui mi, ullamcorper non porta
vel, consectetur eget quam. Mauris dolor quam, vulputate interdum auctor eget, tincidunt id enim. Vivamus
aliquam consectetur magna. Morbi porta tortor ex, quis varius ex tincidunt non. Proin dapibus non lacus eget
vestibulum. Morbi efficitur nulla in turpis venenatis, eget ornare mauris tristique. Pellentesque auctor
fringilla rhoncus. Donec auctor in neque non rhoncus. Nunc consequat, ipsum a hendrerit aliquet, odio tortor
bibendum nunc, quis feugiat purus purus et libero. Nulla leo nisi, laoreet nec vulputate accumsan, lobortis
nec sapien. Donec blandit purus ut tempor hendrerit. Phasellus sed massa velit. Integer fringilla at arcu
ac venenatis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Maecenas sit amet varius enim.
Curabitur quis sagittis dolor. Phasellus scelerisque leo ante, ac bibendum ante placerat in. Aenean volutpat
tempus massa vel mollis. Quisque et lacus ac augue tincidunt eleifend. Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Duis blandit arcu sed ligula maximus, ac commodo sapien lobortis. Pellentesque hendrerit
mauris nibh, a semper libero maximus in. Suspendisse non arcu leo. Aliquam eget orci id elit consectetur
maximus ac vitae lacus. Nam tristique elit ac urna tempor, quis convallis mauris lobortis. Nulla dictum lorem
ac dolor rhoncus blandit eget vitae neque. Nunc quis elit sit amet sem iaculis vestibulum. Proin viverra
orci non nulla tempus congue. Nam vitae faucibus massa. Nullam vulputate dolor sit amet luctus molestie.
Nunc mattis blandit ligula eu tincidunt. Pellentesque sit amet magna a tellus molestie fringilla sed placerat
tortor.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tincidunt maximus tristique. In id sapien imperdiet, auctor
tortor quis, ultrices justo. Integer nisi arcu, accumsan nec laoreet non, efficitur a mi. Integer ultricies
leo non rutrum posuere. Vestibulum mattis sollicitudin rhoncus. Nullam elementum lacus velit, eu consequat
dolor suscipit a. Sed nec varius risus, quis eleifend nunc. Nullam hendrerit tellus a sem malesuada luctus.
Proin ornare mi nec nulla tristique, iaculis gravida ipsum fermentum. Sed eget massa sed erat mattis maximus
eget in sem. Donec imperdiet dictum cursus. Duis vel magna volutpat, ornare quam lobortis, pellentesque sem.
Sed arcu risus, pretium vel mauris eu, porta faucibus enim. Sed nec nibh est. Suspendisse volutpat ac risus
quis rhoncus. Pellentesque sed semper neque. Nam id risus tristique, viverra mauris vitae, eleifend enim.
Donec suscipit luctus odio, sed bibendum sem viverra id. Donec fringilla feugiat felis, quis imperdiet nisl
egestas eget. Nam lacinia ligula quis quam cursus, quis fermentum mauris aliquam. Donec blandit orci id mauris
condimentum tempus. Phasellus molestie odio felis, nec feugiat lacus bibendum eget. Vivamus molestie pellentesque
lacinia. Nam est leo, efficitur ac risus ac, placerat commodo nisi. Aenean non tincidunt massa. In sollicitudin
ultrices risus at ornare. Ut et lacus massa. Fusce et ultricies odio. Nullam mattis risus quis sapien iaculis,
in consequat libero congue. Donec feugiat volutpat velit sed porttitor. Mauris dui mi, ullamcorper non porta
vel, consectetur eget quam. Mauris dolor quam, vulputate interdum auctor eget, tincidunt id enim. Vivamus
aliquam consectetur magna. Morbi porta tortor ex, quis varius ex tincidunt non. Proin dapibus non lacus eget
vestibulum. Morbi efficitur nulla in turpis venenatis, eget ornare mauris tristique. Pellentesque auctor
fringilla rhoncus. Donec auctor in neque non rhoncus. Nunc consequat, ipsum a hendrerit aliquet, odio tortor
bibendum nunc, quis feugiat purus purus et libero. Nulla leo nisi, laoreet nec vulputate accumsan, lobortis
nec sapien. Donec blandit purus ut tempor hendrerit. Phasellus sed massa velit. Integer fringilla at arcu
ac venenatis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Maecenas sit amet varius enim.
Curabitur quis sagittis dolor. Phasellus scelerisque leo ante, ac bibendum ante placerat in. Aenean volutpat
tempus massa vel mollis. Quisque et lacus ac augue tincidunt eleifend. Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Duis blandit arcu sed ligula maximus, ac commodo sapien lobortis. Pellentesque hendrerit
mauris nibh, a semper libero maximus in. Suspendisse non arcu leo. Aliquam eget orci id elit consectetur
maximus ac vitae lacus. Nam tristique elit ac urna tempor, quis convallis mauris lobortis. Nulla dictum lorem
ac dolor rhoncus blandit eget vitae neque. Nunc quis elit sit amet sem iaculis vestibulum. Proin viverra
orci non nulla tempus congue. Nam vitae faucibus massa. Nullam vulputate dolor sit amet luctus molestie.
Nunc mattis blandit ligula eu tincidunt. Pellentesque sit amet magna a tellus molestie fringilla sed placerat
tortor.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tincidunt maximus tristique. In id sapien imperdiet, auctor
tortor quis, ultrices justo. Integer nisi arcu, accumsan nec laoreet non, efficitur a mi. Integer ultricies
leo non rutrum posuere. Vestibulum mattis sollicitudin rhoncus. Nullam elementum lacus velit, eu consequat
dolor suscipit a. Sed nec varius risus, quis eleifend nunc. Nullam hendrerit tellus a sem malesuada luctus.
Proin ornare mi nec nulla tristique, iaculis gravida ipsum fermentum. Sed eget massa sed erat mattis maximus
eget in sem. Donec imperdiet dictum cursus. Duis vel magna volutpat, ornare quam lobortis, pellentesque sem.
Sed arcu risus, pretium vel mauris eu, porta faucibus enim. Sed nec nibh est. Suspendisse volutpat ac risus
quis rhoncus. Pellentesque sed semper neque. Nam id risus tristique, viverra mauris vitae, eleifend enim.
Donec suscipit luctus odio, sed bibendum sem viverra id. Donec fringilla feugiat felis, quis imperdiet nisl
egestas eget. Nam lacinia ligula quis quam cursus, quis fermentum mauris aliquam. Donec blandit orci id mauris
condimentum tempus. Phasellus molestie odio felis, nec feugiat lacus bibendum eget. Vivamus molestie pellentesque
lacinia. Nam est leo, efficitur ac risus ac, placerat commodo nisi. Aenean non tincidunt massa. In sollicitudin
ultrices risus at ornare. Ut et lacus massa. Fusce et ultricies odio. Nullam mattis risus quis sapien iaculis,
in consequat libero congue. Donec feugiat volutpat velit sed porttitor. Mauris dui mi, ullamcorper non porta
vel, consectetur eget quam. Mauris dolor quam, vulputate interdum auctor eget, tincidunt id enim. Vivamus
aliquam consectetur magna. Morbi porta tortor ex, quis varius ex tincidunt non. Proin dapibus non lacus eget
vestibulum. Morbi efficitur nulla in turpis venenatis, eget ornare mauris tristique. Pellentesque auctor
fringilla rhoncus. Donec auctor in neque non rhoncus. Nunc consequat, ipsum a hendrerit aliquet, odio tortor
bibendum nunc, quis feugiat purus purus et libero. Nulla leo nisi, laoreet nec vulputate accumsan, lobortis
nec sapien. Donec blandit purus ut tempor hendrerit. Phasellus sed massa velit. Integer fringilla at arcu
ac venenatis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Maecenas sit amet varius enim.
Curabitur quis sagittis dolor. Phasellus scelerisque leo ante, ac bibendum ante placerat in. Aenean volutpat
tempus massa vel mollis. Quisque et lacus ac augue tincidunt eleifend. Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Duis blandit arcu sed ligula maximus, ac commodo sapien lobortis. Pellentesque hendrerit
mauris nibh, a semper libero maximus in. Suspendisse non arcu leo. Aliquam eget orci id elit consectetur
maximus ac vitae lacus. Nam tristique elit ac urna tempor, quis convallis mauris lobortis. Nulla dictum lorem
ac dolor rhoncus blandit eget vitae neque. Nunc quis elit sit amet sem iaculis vestibulum. Proin viverra
orci non nulla tempus congue. Nam vitae faucibus massa. Nullam vulputate dolor sit amet luctus molestie.
Nunc mattis blandit ligula eu tincidunt. Pellentesque sit amet magna a tellus molestie fringilla sed placerat
tortor.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tincidunt maximus tristique. In id sapien imperdiet, auctor
tortor quis, ultrices justo. Integer nisi arcu, accumsan nec laoreet non, efficitur a mi. Integer ultricies
leo non rutrum posuere. Vestibulum mattis sollicitudin rhoncus. Nullam elementum lacus velit, eu consequat
dolor suscipit a. Sed nec varius risus, quis eleifend nunc. Nullam hendrerit tellus a sem malesuada luctus.
Proin ornare mi nec nulla tristique, iaculis gravida ipsum fermentum. Sed eget massa sed erat mattis maximus
eget in sem. Donec imperdiet dictum cursus. Duis vel magna volutpat, ornare quam lobortis, pellentesque sem.
Sed arcu risus, pretium vel mauris eu, porta faucibus enim. Sed nec nibh est. Suspendisse volutpat ac risus
quis rhoncus. Pellentesque sed semper neque. Nam id risus tristique, viverra mauris vitae, eleifend enim.
Donec suscipit luctus odio, sed bibendum sem viverra id. Donec fringilla feugiat felis, quis imperdiet nisl
egestas eget. Nam lacinia ligula quis quam cursus, quis fermentum mauris aliquam. Donec blandit orci id mauris
condimentum tempus. Phasellus molestie odio felis, nec feugiat lacus bibendum eget. Vivamus molestie pellentesque
lacinia. Nam est leo, efficitur ac risus ac, placerat commodo nisi. Aenean non tincidunt massa. In sollicitudin
ultrices risus at ornare. Ut et lacus massa. Fusce et ultricies odio. Nullam mattis risus quis sapien iaculis,
in consequat libero congue. Donec feugiat volutpat velit sed porttitor. Mauris dui mi, ullamcorper non porta
vel, consectetur eget quam. Mauris dolor quam, vulputate interdum auctor eget, tincidunt id enim. Vivamus
aliquam consectetur magna. Morbi porta tortor ex, quis varius ex tincidunt non. Proin dapibus non lacus eget
vestibulum. Morbi efficitur nulla in turpis venenatis, eget ornare mauris tristique. Pellentesque auctor
fringilla rhoncus. Donec auctor in neque non rhoncus. Nunc consequat, ipsum a hendrerit aliquet, odio tortor
bibendum nunc, quis feugiat purus purus et libero. Nulla leo nisi, laoreet nec vulputate accumsan, lobortis
nec sapien. Donec blandit purus ut tempor hendrerit. Phasellus sed massa velit. Integer fringilla at arcu
ac venenatis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Maecenas sit amet varius enim.
Curabitur quis sagittis dolor. Phasellus scelerisque leo ante, ac bibendum ante placerat in. Aenean volutpat
tempus massa vel mollis. Quisque et lacus ac augue tincidunt eleifend. Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Duis blandit arcu sed ligula maximus, ac commodo sapien lobortis. Pellentesque hendrerit
mauris nibh, a semper libero maximus in. Suspendisse non arcu leo. Aliquam eget orci id elit consectetur
maximus ac vitae lacus. Nam tristique elit ac urna tempor, quis convallis mauris lobortis. Nulla dictum lorem
ac dolor rhoncus blandit eget vitae neque. Nunc quis elit sit amet sem iaculis vestibulum. Proin viverra
orci non nulla tempus congue. Nam vitae faucibus massa. Nullam vulputate dolor sit amet luctus molestie.
Nunc mattis blandit ligula eu tincidunt. Pellentesque sit amet magna a tellus molestie fringilla sed placerat
tortor.
</p>
</div>
<div id="wrapper-footer"></div>
</div>
</body>
you can add it inside #wrapper-header, absolutely position it at the bottom if you want, or just put your 50px content in #wrapper-header and it will push the subhead to the bottom, then adjust the height of #wrapper-header to include the height of the subheader, and adjust the margin-top of #wrapper-content
html, body {
height: 100vh;
}
#app-sidebar {
width: 50px;
height: 100%;
background: #102027;
float: left;
}
#app-wrapper {
margin-left: 50px;
height: 100%;
background: lightblue;
}
#wrapper-header {
overflow: hidden;
background-color: #333;
position: fixed;
top: 0;
width: 100%;
height: 130px;
}
#wrapper-subheader {
height: 80px;
background: #666;
position: absolute;
bottom: 0; left: 0; right: 0;
}
#wrapper-content {
position:fixed;
overflow:auto;
background-color: grey;
margin-top: 130px;
margin-bottom: 20px;
height: calc(100% - 150px);
}
#wrapper-footer {
overflow: hidden;
background-color: #333;
position: fixed;
bottom: 0;
width: 100%;
height: 20px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<body>
<div id="app-sidebar"></div>
<div id="app-wrapper">
<div id="wrapper-header">
<div id="wrapper-subheader"></div>
</div>
<div id="wrapper-content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tincidunt maximus tristique. In id sapien imperdiet, auctor
tortor quis, ultrices justo. Integer nisi arcu, accumsan nec laoreet non, efficitur a mi. Integer ultricies
leo non rutrum posuere. Vestibulum mattis sollicitudin rhoncus. Nullam elementum lacus velit, eu consequat
dolor suscipit a. Sed nec varius risus, quis eleifend nunc. Nullam hendrerit tellus a sem malesuada luctus.
Proin ornare mi nec nulla tristique, iaculis gravida ipsum fermentum. Sed eget massa sed erat mattis maximus
eget in sem. Donec imperdiet dictum cursus. Duis vel magna volutpat, ornare quam lobortis, pellentesque sem.
Sed arcu risus, pretium vel mauris eu, porta faucibus enim. Sed nec nibh est. Suspendisse volutpat ac risus
quis rhoncus. Pellentesque sed semper neque. Nam id risus tristique, viverra mauris vitae, eleifend enim.
Donec suscipit luctus odio, sed bibendum sem viverra id. Donec fringilla feugiat felis, quis imperdiet nisl
egestas eget. Nam lacinia ligula quis quam cursus, quis fermentum mauris aliquam. Donec blandit orci id mauris
condimentum tempus. Phasellus molestie odio felis, nec feugiat lacus bibendum eget. Vivamus molestie pellentesque
lacinia. Nam est leo, efficitur ac risus ac, placerat commodo nisi. Aenean non tincidunt massa. In sollicitudin
ultrices risus at ornare. Ut et lacus massa. Fusce et ultricies odio. Nullam mattis risus quis sapien iaculis,
in consequat libero congue. Donec feugiat volutpat velit sed porttitor. Mauris dui mi, ullamcorper non porta
vel, consectetur eget quam. Mauris dolor quam, vulputate interdum auctor eget, tincidunt id enim. Vivamus
aliquam consectetur magna. Morbi porta tortor ex, quis varius ex tincidunt non. Proin dapibus non lacus eget
vestibulum. Morbi efficitur nulla in turpis venenatis, eget ornare mauris tristique. Pellentesque auctor
fringilla rhoncus. Donec auctor in neque non rhoncus. Nunc consequat, ipsum a hendrerit aliquet, odio tortor
bibendum nunc, quis feugiat purus purus et libero. Nulla leo nisi, laoreet nec vulputate accumsan, lobortis
nec sapien. Donec blandit purus ut tempor hendrerit. Phasellus sed massa velit. Integer fringilla at arcu
ac venenatis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Maecenas sit amet varius enim.
Curabitur quis sagittis dolor. Phasellus scelerisque leo ante, ac bibendum ante placerat in. Aenean volutpat
tempus massa vel mollis. Quisque et lacus ac augue tincidunt eleifend. Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Duis blandit arcu sed ligula maximus, ac commodo sapien lobortis. Pellentesque hendrerit
mauris nibh, a semper libero maximus in. Suspendisse non arcu leo. Aliquam eget orci id elit consectetur
maximus ac vitae lacus. Nam tristique elit ac urna tempor, quis convallis mauris lobortis. Nulla dictum lorem
ac dolor rhoncus blandit eget vitae neque. Nunc quis elit sit amet sem iaculis vestibulum. Proin viverra
orci non nulla tempus congue. Nam vitae faucibus massa. Nullam vulputate dolor sit amet luctus molestie.
Nunc mattis blandit ligula eu tincidunt. Pellentesque sit amet magna a tellus molestie fringilla sed placerat
tortor.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tincidunt maximus tristique. In id sapien imperdiet, auctor
tortor quis, ultrices justo. Integer nisi arcu, accumsan nec laoreet non, efficitur a mi. Integer ultricies
leo non rutrum posuere. Vestibulum mattis sollicitudin rhoncus. Nullam elementum lacus velit, eu consequat
dolor suscipit a. Sed nec varius risus, quis eleifend nunc. Nullam hendrerit tellus a sem malesuada luctus.
Proin ornare mi nec nulla tristique, iaculis gravida ipsum fermentum. Sed eget massa sed erat mattis maximus
eget in sem. Donec imperdiet dictum cursus. Duis vel magna volutpat, ornare quam lobortis, pellentesque sem.
Sed arcu risus, pretium vel mauris eu, porta faucibus enim. Sed nec nibh est. Suspendisse volutpat ac risus
quis rhoncus. Pellentesque sed semper neque. Nam id risus tristique, viverra mauris vitae, eleifend enim.
Donec suscipit luctus odio, sed bibendum sem viverra id. Donec fringilla feugiat felis, quis imperdiet nisl
egestas eget. Nam lacinia ligula quis quam cursus, quis fermentum mauris aliquam. Donec blandit orci id mauris
condimentum tempus. Phasellus molestie odio felis, nec feugiat lacus bibendum eget. Vivamus molestie pellentesque
lacinia. Nam est leo, efficitur ac risus ac, placerat commodo nisi. Aenean non tincidunt massa. In sollicitudin
ultrices risus at ornare. Ut et lacus massa. Fusce et ultricies odio. Nullam mattis risus quis sapien iaculis,
in consequat libero congue. Donec feugiat volutpat velit sed porttitor. Mauris dui mi, ullamcorper non porta
vel, consectetur eget quam. Mauris dolor quam, vulputate interdum auctor eget, tincidunt id enim. Vivamus
aliquam consectetur magna. Morbi porta tortor ex, quis varius ex tincidunt non. Proin dapibus non lacus eget
vestibulum. Morbi efficitur nulla in turpis venenatis, eget ornare mauris tristique. Pellentesque auctor
fringilla rhoncus. Donec auctor in neque non rhoncus. Nunc consequat, ipsum a hendrerit aliquet, odio tortor
bibendum nunc, quis feugiat purus purus et libero. Nulla leo nisi, laoreet nec vulputate accumsan, lobortis
nec sapien. Donec blandit purus ut tempor hendrerit. Phasellus sed massa velit. Integer fringilla at arcu
ac venenatis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Maecenas sit amet varius enim.
Curabitur quis sagittis dolor. Phasellus scelerisque leo ante, ac bibendum ante placerat in. Aenean volutpat
tempus massa vel mollis. Quisque et lacus ac augue tincidunt eleifend. Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Duis blandit arcu sed ligula maximus, ac commodo sapien lobortis. Pellentesque hendrerit
mauris nibh, a semper libero maximus in. Suspendisse non arcu leo. Aliquam eget orci id elit consectetur
maximus ac vitae lacus. Nam tristique elit ac urna tempor, quis convallis mauris lobortis. Nulla dictum lorem
ac dolor rhoncus blandit eget vitae neque. Nunc quis elit sit amet sem iaculis vestibulum. Proin viverra
orci non nulla tempus congue. Nam vitae faucibus massa. Nullam vulputate dolor sit amet luctus molestie.
Nunc mattis blandit ligula eu tincidunt. Pellentesque sit amet magna a tellus molestie fringilla sed placerat
tortor.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tincidunt maximus tristique. In id sapien imperdiet, auctor
tortor quis, ultrices justo. Integer nisi arcu, accumsan nec laoreet non, efficitur a mi. Integer ultricies
leo non rutrum posuere. Vestibulum mattis sollicitudin rhoncus. Nullam elementum lacus velit, eu consequat
dolor suscipit a. Sed nec varius risus, quis eleifend nunc. Nullam hendrerit tellus a sem malesuada luctus.
Proin ornare mi nec nulla tristique, iaculis gravida ipsum fermentum. Sed eget massa sed erat mattis maximus
eget in sem. Donec imperdiet dictum cursus. Duis vel magna volutpat, ornare quam lobortis, pellentesque sem.
Sed arcu risus, pretium vel mauris eu, porta faucibus enim. Sed nec nibh est. Suspendisse volutpat ac risus
quis rhoncus. Pellentesque sed semper neque. Nam id risus tristique, viverra mauris vitae, eleifend enim.
Donec suscipit luctus odio, sed bibendum sem viverra id. Donec fringilla feugiat felis, quis imperdiet nisl
egestas eget. Nam lacinia ligula quis quam cursus, quis fermentum mauris aliquam. Donec blandit orci id mauris
condimentum tempus. Phasellus molestie odio felis, nec feugiat lacus bibendum eget. Vivamus molestie pellentesque
lacinia. Nam est leo, efficitur ac risus ac, placerat commodo nisi. Aenean non tincidunt massa. In sollicitudin
ultrices risus at ornare. Ut et lacus massa. Fusce et ultricies odio. Nullam mattis risus quis sapien iaculis,
in consequat libero congue. Donec feugiat volutpat velit sed porttitor. Mauris dui mi, ullamcorper non porta
vel, consectetur eget quam. Mauris dolor quam, vulputate interdum auctor eget, tincidunt id enim. Vivamus
aliquam consectetur magna. Morbi porta tortor ex, quis varius ex tincidunt non. Proin dapibus non lacus eget
vestibulum. Morbi efficitur nulla in turpis venenatis, eget ornare mauris tristique. Pellentesque auctor
fringilla rhoncus. Donec auctor in neque non rhoncus. Nunc consequat, ipsum a hendrerit aliquet, odio tortor
bibendum nunc, quis feugiat purus purus et libero. Nulla leo nisi, laoreet nec vulputate accumsan, lobortis
nec sapien. Donec blandit purus ut tempor hendrerit. Phasellus sed massa velit. Integer fringilla at arcu
ac venenatis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Maecenas sit amet varius enim.
Curabitur quis sagittis dolor. Phasellus scelerisque leo ante, ac bibendum ante placerat in. Aenean volutpat
tempus massa vel mollis. Quisque et lacus ac augue tincidunt eleifend. Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Duis blandit arcu sed ligula maximus, ac commodo sapien lobortis. Pellentesque hendrerit
mauris nibh, a semper libero maximus in. Suspendisse non arcu leo. Aliquam eget orci id elit consectetur
maximus ac vitae lacus. Nam tristique elit ac urna tempor, quis convallis mauris lobortis. Nulla dictum lorem
ac dolor rhoncus blandit eget vitae neque. Nunc quis elit sit amet sem iaculis vestibulum. Proin viverra
orci non nulla tempus congue. Nam vitae faucibus massa. Nullam vulputate dolor sit amet luctus molestie.
Nunc mattis blandit ligula eu tincidunt. Pellentesque sit amet magna a tellus molestie fringilla sed placerat
tortor.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tincidunt maximus tristique. In id sapien imperdiet, auctor
tortor quis, ultrices justo. Integer nisi arcu, accumsan nec laoreet non, efficitur a mi. Integer ultricies
leo non rutrum posuere. Vestibulum mattis sollicitudin rhoncus. Nullam elementum lacus velit, eu consequat
dolor suscipit a. Sed nec varius risus, quis eleifend nunc. Nullam hendrerit tellus a sem malesuada luctus.
Proin ornare mi nec nulla tristique, iaculis gravida ipsum fermentum. Sed eget massa sed erat mattis maximus
eget in sem. Donec imperdiet dictum cursus. Duis vel magna volutpat, ornare quam lobortis, pellentesque sem.
Sed arcu risus, pretium vel mauris eu, porta faucibus enim. Sed nec nibh est. Suspendisse volutpat ac risus
quis rhoncus. Pellentesque sed semper neque. Nam id risus tristique, viverra mauris vitae, eleifend enim.
Donec suscipit luctus odio, sed bibendum sem viverra id. Donec fringilla feugiat felis, quis imperdiet nisl
egestas eget. Nam lacinia ligula quis quam cursus, quis fermentum mauris aliquam. Donec blandit orci id mauris
condimentum tempus. Phasellus molestie odio felis, nec feugiat lacus bibendum eget. Vivamus molestie pellentesque
lacinia. Nam est leo, efficitur ac risus ac, placerat commodo nisi. Aenean non tincidunt massa. In sollicitudin
ultrices risus at ornare. Ut et lacus massa. Fusce et ultricies odio. Nullam mattis risus quis sapien iaculis,
in consequat libero congue. Donec feugiat volutpat velit sed porttitor. Mauris dui mi, ullamcorper non porta
vel, consectetur eget quam. Mauris dolor quam, vulputate interdum auctor eget, tincidunt id enim. Vivamus
aliquam consectetur magna. Morbi porta tortor ex, quis varius ex tincidunt non. Proin dapibus non lacus eget
vestibulum. Morbi efficitur nulla in turpis venenatis, eget ornare mauris tristique. Pellentesque auctor
fringilla rhoncus. Donec auctor in neque non rhoncus. Nunc consequat, ipsum a hendrerit aliquet, odio tortor
bibendum nunc, quis feugiat purus purus et libero. Nulla leo nisi, laoreet nec vulputate accumsan, lobortis
nec sapien. Donec blandit purus ut tempor hendrerit. Phasellus sed massa velit. Integer fringilla at arcu
ac venenatis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Maecenas sit amet varius enim.
Curabitur quis sagittis dolor. Phasellus scelerisque leo ante, ac bibendum ante placerat in. Aenean volutpat
tempus massa vel mollis. Quisque et lacus ac augue tincidunt eleifend. Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Duis blandit arcu sed ligula maximus, ac commodo sapien lobortis. Pellentesque hendrerit
mauris nibh, a semper libero maximus in. Suspendisse non arcu leo. Aliquam eget orci id elit consectetur
maximus ac vitae lacus. Nam tristique elit ac urna tempor, quis convallis mauris lobortis. Nulla dictum lorem
ac dolor rhoncus blandit eget vitae neque. Nunc quis elit sit amet sem iaculis vestibulum. Proin viverra
orci non nulla tempus congue. Nam vitae faucibus massa. Nullam vulputate dolor sit amet luctus molestie.
Nunc mattis blandit ligula eu tincidunt. Pellentesque sit amet magna a tellus molestie fringilla sed placerat
tortor.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tincidunt maximus tristique. In id sapien imperdiet, auctor
tortor quis, ultrices justo. Integer nisi arcu, accumsan nec laoreet non, efficitur a mi. Integer ultricies
leo non rutrum posuere. Vestibulum mattis sollicitudin rhoncus. Nullam elementum lacus velit, eu consequat
dolor suscipit a. Sed nec varius risus, quis eleifend nunc. Nullam hendrerit tellus a sem malesuada luctus.
Proin ornare mi nec nulla tristique, iaculis gravida ipsum fermentum. Sed eget massa sed erat mattis maximus
eget in sem. Donec imperdiet dictum cursus. Duis vel magna volutpat, ornare quam lobortis, pellentesque sem.
Sed arcu risus, pretium vel mauris eu, porta faucibus enim. Sed nec nibh est. Suspendisse volutpat ac risus
quis rhoncus. Pellentesque sed semper neque. Nam id risus tristique, viverra mauris vitae, eleifend enim.
Donec suscipit luctus odio, sed bibendum sem viverra id. Donec fringilla feugiat felis, quis imperdiet nisl
egestas eget. Nam lacinia ligula quis quam cursus, quis fermentum mauris aliquam. Donec blandit orci id mauris
condimentum tempus. Phasellus molestie odio felis, nec feugiat lacus bibendum eget. Vivamus molestie pellentesque
lacinia. Nam est leo, efficitur ac risus ac, placerat commodo nisi. Aenean non tincidunt massa. In sollicitudin
ultrices risus at ornare. Ut et lacus massa. Fusce et ultricies odio. Nullam mattis risus quis sapien iaculis,
in consequat libero congue. Donec feugiat volutpat velit sed porttitor. Mauris dui mi, ullamcorper non porta
vel, consectetur eget quam. Mauris dolor quam, vulputate interdum auctor eget, tincidunt id enim. Vivamus
aliquam consectetur magna. Morbi porta tortor ex, quis varius ex tincidunt non. Proin dapibus non lacus eget
vestibulum. Morbi efficitur nulla in turpis venenatis, eget ornare mauris tristique. Pellentesque auctor
fringilla rhoncus. Donec auctor in neque non rhoncus. Nunc consequat, ipsum a hendrerit aliquet, odio tortor
bibendum nunc, quis feugiat purus purus et libero. Nulla leo nisi, laoreet nec vulputate accumsan, lobortis
nec sapien. Donec blandit purus ut tempor hendrerit. Phasellus sed massa velit. Integer fringilla at arcu
ac venenatis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Maecenas sit amet varius enim.
Curabitur quis sagittis dolor. Phasellus scelerisque leo ante, ac bibendum ante placerat in. Aenean volutpat
tempus massa vel mollis. Quisque et lacus ac augue tincidunt eleifend. Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Duis blandit arcu sed ligula maximus, ac commodo sapien lobortis. Pellentesque hendrerit
mauris nibh, a semper libero maximus in. Suspendisse non arcu leo. Aliquam eget orci id elit consectetur
maximus ac vitae lacus. Nam tristique elit ac urna tempor, quis convallis mauris lobortis. Nulla dictum lorem
ac dolor rhoncus blandit eget vitae neque. Nunc quis elit sit amet sem iaculis vestibulum. Proin viverra
orci non nulla tempus congue. Nam vitae faucibus massa. Nullam vulputate dolor sit amet luctus molestie.
Nunc mattis blandit ligula eu tincidunt. Pellentesque sit amet magna a tellus molestie fringilla sed placerat
tortor.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tincidunt maximus tristique. In id sapien imperdiet, auctor
tortor quis, ultrices justo. Integer nisi arcu, accumsan nec laoreet non, efficitur a mi. Integer ultricies
leo non rutrum posuere. Vestibulum mattis sollicitudin rhoncus. Nullam elementum lacus velit, eu consequat
dolor suscipit a. Sed nec varius risus, quis eleifend nunc. Nullam hendrerit tellus a sem malesuada luctus.
Proin ornare mi nec nulla tristique, iaculis gravida ipsum fermentum. Sed eget massa sed erat mattis maximus
eget in sem. Donec imperdiet dictum cursus. Duis vel magna volutpat, ornare quam lobortis, pellentesque sem.
Sed arcu risus, pretium vel mauris eu, porta faucibus enim. Sed nec nibh est. Suspendisse volutpat ac risus
quis rhoncus. Pellentesque sed semper neque. Nam id risus tristique, viverra mauris vitae, eleifend enim.
Donec suscipit luctus odio, sed bibendum sem viverra id. Donec fringilla feugiat felis, quis imperdiet nisl
egestas eget. Nam lacinia ligula quis quam cursus, quis fermentum mauris aliquam. Donec blandit orci id mauris
condimentum tempus. Phasellus molestie odio felis, nec feugiat lacus bibendum eget. Vivamus molestie pellentesque
lacinia. Nam est leo, efficitur ac risus ac, placerat commodo nisi. Aenean non tincidunt massa. In sollicitudin
ultrices risus at ornare. Ut et lacus massa. Fusce et ultricies odio. Nullam mattis risus quis sapien iaculis,
in consequat libero congue. Donec feugiat volutpat velit sed porttitor. Mauris dui mi, ullamcorper non porta
vel, consectetur eget quam. Mauris dolor quam, vulputate interdum auctor eget, tincidunt id enim. Vivamus
aliquam consectetur magna. Morbi porta tortor ex, quis varius ex tincidunt non. Proin dapibus non lacus eget
vestibulum. Morbi efficitur nulla in turpis venenatis, eget ornare mauris tristique. Pellentesque auctor
fringilla rhoncus. Donec auctor in neque non rhoncus. Nunc consequat, ipsum a hendrerit aliquet, odio tortor
bibendum nunc, quis feugiat purus purus et libero. Nulla leo nisi, laoreet nec vulputate accumsan, lobortis
nec sapien. Donec blandit purus ut tempor hendrerit. Phasellus sed massa velit. Integer fringilla at arcu
ac venenatis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Maecenas sit amet varius enim.
Curabitur quis sagittis dolor. Phasellus scelerisque leo ante, ac bibendum ante placerat in. Aenean volutpat
tempus massa vel mollis. Quisque et lacus ac augue tincidunt eleifend. Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Duis blandit arcu sed ligula maximus, ac commodo sapien lobortis. Pellentesque hendrerit
mauris nibh, a semper libero maximus in. Suspendisse non arcu leo. Aliquam eget orci id elit consectetur
maximus ac vitae lacus. Nam tristique elit ac urna tempor, quis convallis mauris lobortis. Nulla dictum lorem
ac dolor rhoncus blandit eget vitae neque. Nunc quis elit sit amet sem iaculis vestibulum. Proin viverra
orci non nulla tempus congue. Nam vitae faucibus massa. Nullam vulputate dolor sit amet luctus molestie.
Nunc mattis blandit ligula eu tincidunt. Pellentesque sit amet magna a tellus molestie fringilla sed placerat
tortor.
</p>
</div>
<div id="wrapper-footer"></div>
</div>
</body>