I am trying to implement synchronized scrolling for more than two DIV using the code below as a launching point. All DIV are same height and width, with a varying number of characters. The percentage sync works perfectly for #div1 and #div2 (it's really quite beautiful). But I'm unable to get the third DIV to behave despite hours of fiddling (everything I've tried is glitchy and clunky). I'm new to this so I'm hoping someone can assist!
$(document).ready(function() {
var $divs = $('#div1, #div2');
var sync = function(e){
var $other = $divs.not(this).off('scroll'), other = $other.get(0);
var percentage = this.scrollTop / (this.scrollHeight - this.offsetHeight);
other.scrollTop = percentage * (other.scrollHeight - other.offsetHeight);
setTimeout( function(){ $other.on('scroll', sync ); },10);
}
$divs.on( 'scroll', sync);
});
jsfiddle.net/84oz9boL/11 When I add ,#div3 the scrolls behave erratically...
var $divs = $('#div1, #div2');
var sync = function(e){
var $other = $divs.not(this).off('scroll'), other = $other.get(0);
var percentage = this.scrollTop / (this.scrollHeight - this.offsetHeight);
other.scrollTop = percentage * (other.scrollHeight - other.offsetHeight);
setTimeout( function(){ $other.on('scroll', sync ); },10);
}
$divs.on( 'scroll', sync);
div {
overflow: scroll;
float: left;
text-align: justify;
}
#div1 {
height : 400px;
width: 200px;
}
#div2 {
height : 400px;
width: 200px;
margin-left: 50px;
}
#div3 {
height : 400px;
width: 200px;
margin-left: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div id="div1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent in neque aliquam, blandit purus id, consequat ex. Quisque efficitur orci nunc, a sodales sapien vehicula et. Proin dignissim facilisis felis, sit amet placerat odio vehicula sed. Quisque vulputate eros magna, nec scelerisque augue auctor id. Pellentesque mi elit, malesuada imperdiet efficitur luctus, scelerisque nec nisi. Nulla eget volutpat elit, in ornare lacus. Suspendisse sit amet lacus nec ipsum luctus semper. Mauris ipsum eros, laoreet dignissim elementum ac, viverra sed est. Aenean aliquet tempor justo, non hendrerit massa convallis ac. Aenean volutpat consectetur ex, a sodales sem tincidunt et. Donec volutpat ante eu odio ornare malesuada. Sed dignissim purus lacinia tempor sagittis. Nam quis arcu massa. Nam neque sem, dignissim sit amet congue quis, rutrum vel quam. Nunc ut porta sem. Maecenas suscipit lacus at interdum aliquam. In aliquam turpis eget arcu faucibus, sit amet vulputate purus ornare. Fusce vitae nisi odio. Nunc eget bibendum magna, eget eleifend massa. Nullam eu dui at nunc eleifend lacinia tincidunt a lorem. Pellentesque egestas fermentum est, vitae rutrum turpis rhoncus quis. Etiam in rhoncus tellus. Morbi tellus erat, laoreet at lectus sed, efficitur vestibulum lorem. Fusce tempus, quam nec feugiat ornare, velit nisl ultricies tortor, id elementum ex lectus et sem. Donec ornare ante sed elit sollicitudin tempor.
</div>
<div id="div2">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent in neque aliquam, blandit purus id, consequat ex. Quisque efficitur orci nunc, a sodales sapien vehicula et. Proin dignissim facilisis felis, sit amet placerat odio vehicula sed. Quisque vulputate eros magna, nec scelerisque augue auctor id. Pellentesque mi elit, malesuada imperdiet efficitur luctus, scelerisque nec nisi. Nulla eget volutpat elit, in ornare lacus. Suspendisse sit amet lacus nec ipsum luctus semper. Mauris ipsum eros, laoreet dignissim elementum ac, viverra sed est. Aenean aliquet tempor justo, non hendrerit massa convallis ac. Aenean volutpat consectetur ex, a sodales sem tincidunt et. Donec volutpat ante eu odio ornare malesuada. Sed dignissim purus lacinia tempor sagittis. Nam quis arcu massa. Nam neque sem, dignissim sit amet congue quis, rutrum vel quam. Nunc ut porta sem. Maecenas suscipit lacus at interdum aliquam. In aliquam turpis eget arcu faucibus, sit amet vulputate purus ornare. Fusce vitae nisi odio. Nunc eget bibendum magna, eget eleifend massa. Nullam eu dui at nunc eleifend lacinia tincidunt a lorem. Pellentesque egestas fermentum est, vitae rutrum turpis rhoncus quis. Etiam in rhoncus tellus. Morbi tellus erat, laoreet at lectus sed, efficitur vestibulum lorem. Fusce tempus, quam nec feugiat ornare, velit nisl ultricies tortor, id elementum ex lectus et sem. Donec ornare ante sed elit sollicitudin tempor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent in neque aliquam, blandit purus id, consequat ex. Quisque efficitur orci nunc, a sodales sapien vehicula et. Proin dignissim facilisis felis, sit amet placerat odio vehicula sed. Quisque vulputate eros magna, nec scelerisque augue auctor id. Pellentesque mi elit, malesuada imperdiet efficitur luctus, scelerisque nec nisi. Nulla eget volutpat elit, in ornare lacus. Suspendisse sit amet lacus nec ipsum luctus semper. Mauris ipsum eros, laoreet dignissim elementum ac, viverra sed est. Aenean aliquet tempor justo, non hendrerit massa convallis ac. Aenean volutpat consectetur ex, a sodales sem tincidunt et. Donec volutpat ante eu odio ornare malesuada. Sed dignissim purus lacinia tempor sagittis. Nam quis arcu massa. Nam neque sem, dignissim sit amet congue quis, rutrum vel quam. Nunc ut porta sem. Maecenas suscipit lacus at interdum aliquam. In aliquam turpis eget arcu faucibus, sit amet vulputate purus ornare. Fusce vitae nisi odio. Nunc eget bibendum magna, eget eleifend massa. Nullam eu dui at nunc eleifend lacinia tincidunt a lorem. Pellentesque egestas fermentum est, vitae rutrum turpis rhoncus quis. Etiam in rhoncus tellus. Morbi tellus erat, laoreet at lectus sed, efficitur vestibulum lorem. Fusce tempus, quam nec feugiat ornare, velit nisl ultricies tortor, id elementum ex lectus et sem. Donec ornare ante sed elit sollicitudin tempor.
</div>
<div id="div3">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent in neque aliquam, blandit purus id, consequat ex. Quisque efficitur orci nunc, a sodales sapien vehicula et. Proin dignissim facilisis felis, sit amet placerat odio vehicula sed. Quisque vulputate eros magna, nec scelerisque augue auctor id. Pellentesque mi elit, malesuada imperdiet efficitur luctus, scelerisque nec nisi. Nulla eget volutpat elit, in ornare lacus. Suspendisse sit amet lacus nec ipsum luctus semper. Mauris ipsum eros, laoreet dignissim elementum ac, viverra sed est. Aenean aliquet tempor justo, non hendrerit massa convallis ac. Aenean volutpat consectetur ex, a sodales sem tincidunt et. Donec volutpat ante eu odio ornare malesuada. Sed dignissim purus lacinia tempor sagittis. Nam quis arcu massa. Nam neque sem, dignissim sit amet congue quis, rutrum vel quam. Nunc ut porta sem. Maecenas suscipit lacus at interdum aliquam. In aliquam turpis eget arcu faucibus, sit amet vulputate purus ornare. Fusce vitae nisi odio. Nunc eget bibendum magna, eget eleifend massa. Nullam eu dui at nunc eleifend lacinia tincidunt a lorem. Pellentesque egestas fermentum est, vitae rutrum turpis rhoncus quis. Etiam in rhoncus tellus. Morbi tellus erat, laoreet at lectus sed, efficitur vestibulum lorem. Fusce tempus, quam nec feugiat ornare, velit nisl ultricies tortor, id elementum ex lectus et sem. Donec ornare ante sed elit sollicitudin tempor.
</div>
If performance is the issue, have you tried not constructing other at all and just defining percentage, turning off the scroll on .not(this) elements, then going with $divs.not(this).scrollTop = percentage * ($divs.not(this).scrollHeight - $divs.not(this).offsetHeight)?
Since you're referencing multiple divs, you need to treat apply the scrollTop to each one of them. In you current code, you write other.get(0), which only target the first of the siblings.
I rewrote your code below to iterate over the array of siblings. Here's the link: http://jsfiddle.net/84oz9boL/16/
var $divs = $('#div1, #div2, #div3');
var sync = function(e){
var $other = $divs.not(this).off('scroll'),
percentage = this.scrollTop / (this.scrollHeight - this.offsetHeight);
$other.each(function (index, other) {
other.scrollTop = percentage * (other.scrollHeight - other.offsetHeight);
});
setTimeout( function(){ $other.on('scroll', sync ); },10);
}
$divs.on( 'scroll', sync);
Related
I'm very new to Javascript. I'm trying to make a style change based on an element's position on the screen, but I'm pretty clueless as to how to make it work.
What I'm trying to do is make the background of an element become fixed once the element has reached the top of the page (and return to being unset when you scroll back up). So far I ended up with this code but as you can tell it triggers only when you click it. My question being which event should I use to make it go into action once the user has simply scrolled up to the point I intended?
const page2 = document.getElementById("about");
page2.addEventListener("click", bgFixer);
function bgFixer() {
rect = this.getBoundingClientRect();
if (rect.top <= 0) {
var style = document.createElement('style');
document.head.appendChild(style);
style.sheet.insertRule('.page-2{background-attachment: fixed}')
}
}
Thanks in advance! Just a reminder that I'm really new so the more detailed the explanations are the better.
You can test the distance of the scroll by checking scrollTop of your containing element.
If the distance between the top of your "sticky" element and the scrollTop is 0 or less, fix the "sticky" element in place by adding a class with position: fixed; top: 0px;
Since the above changes the position of the "sticky" element, we want to store the original top distance so we know that, when the distance of scrollTop is less than that of the original top distance, we remove the class.
let el = document.querySelector.bind(document),
c = el("#test"),
t = el("#toTop");
c.addEventListener("scroll", function() {
// get inner top distance
let ttop = t.getBoundingClientRect().top;
// get container scroll distance
let ctop = c.scrollTop;
// if the initial top distance isn't set, set it
if (!this.init) this.init = ttop;
// if the inner top is less than or equal to 0 ( no distance )
// and the container scroll is greater than the initial top distance
if (ttop <= 0 && ctop >= this.init) {
// make fixed
t.classList.add("stuck")
} else {
// remove fixed class
t.classList.remove("stuck");
}
});
let el = document.querySelector.bind(document),
c = el("#test"),
t = el("#toTop");
c.addEventListener("scroll", function() {
// get inner top distance
let ttop = t.getBoundingClientRect().top;
// get container scroll distance
let ctop = c.scrollTop;
// if the initial top distance isn't set, set it
if (!this.init) this.init = ttop;
// if the inner top is less than or equal to 0 ( no distance )
// and the container scroll is greater than the initial top distance
if (ttop <= 0 && ctop >= this.init) {
// make fixed
t.classList.add("stuck")
} else {
// remove fixed class
t.classList.remove("stuck");
}
});
body,
html {
height: 100%;
box-sizing: border-box;
margin: 0;
}
#test {
height: 50%;
overflow-y: scroll;
box-sizing: border-box;
}
#toTop::before {
position: absolute;
content: "";
left: 0;
top: 0;
width: 100%;
height: 100%;
box-shadow: 0 -1px red;
}
#toTop {
position: relative;
background: black;
color: white;
top: 300px;
height: auto;
width: 100%;
padding: 0;
margin: 0;
}
#toTop.stuck {
position: fixed;
top: 0px;
}
#after {
height: 1200px;
}
<div id="test">
<div id="toTop">test</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Proin sagittis nisl rhoncus mattis rhoncus urna neque. Suspendisse ultrices gravida dictum fusce ut placerat orci. Neque volutpat
ac tincidunt vitae semper. Ac turpis egestas integer eget aliquet. Consectetur adipiscing elit duis tristique sollicitudin. Eget velit aliquet sagittis id consectetur purus ut faucibus pulvinar. Id consectetur purus ut faucibus pulvinar elementum
integer. Aliquet enim tortor at auctor urna nunc id. In fermentum et sollicitudin ac orci phasellus egestas tellus. Risus nullam eget felis eget.</p>
<p>
Mauris commodo quis imperdiet massa tincidunt nunc pulvinar sapien. Orci dapibus ultrices in iaculis nunc sed augue lacus. Sit amet venenatis urna cursus. Est velit egestas dui id ornare arcu odio ut. Consequat mauris nunc congue nisi vitae suscipit tellus
mauris a. Ipsum dolor sit amet consectetur adipiscing elit. Dolor purus non enim praesent elementum facilisis. Pharetra pharetra massa massa ultricies mi quis hendrerit dolor magna. Quam vulputate dignissim suspendisse in. Elementum pulvinar etiam
non quam lacus suspendisse. Sed augue lacus viverra vitae congue eu consequat ac felis. Egestas maecenas pharetra convallis posuere morbi leo urna molestie.
</p>
<p>
Sed libero enim sed faucibus. Malesuada fames ac turpis egestas integer eget aliquet nibh praesent. Diam vel quam elementum pulvinar etiam non. Molestie ac feugiat sed lectus vestibulum mattis. Quisque sagittis purus sit amet volutpat. Ac turpis egestas
integer eget aliquet nibh praesent tristique magna. Integer feugiat scelerisque varius morbi enim nunc faucibus a. Faucibus a pellentesque sit amet porttitor eget. Massa massa ultricies mi quis hendrerit dolor. Metus vulputate eu scelerisque felis
imperdiet proin fermentum. Bibendum neque egestas congue quisque egestas diam in. Duis at consectetur lorem donec massa. Eu consequat ac felis donec et. In tellus integer feugiat scelerisque varius morbi enim. Nulla facilisi morbi tempus iaculis urna
id. Mauris commodo quis imperdiet massa tincidunt nunc. Egestas purus viverra accumsan in. Malesuada proin libero nunc consequat interdum varius. Pulvinar elementum integer enim neque volutpat ac tincidunt.
</p>
<p>
Laoreet id donec ultrices tincidunt arcu non sodales. Tempor id eu nisl nunc mi ipsum. Urna molestie at elementum eu facilisis sed odio. Mauris pharetra et ultrices neque ornare aenean. Placerat vestibulum lectus mauris ultrices eros in. Feugiat nibh
sed pulvinar proin gravida hendrerit. Nisl suscipit adipiscing bibendum est. Pretium nibh ipsum consequat nisl vel pretium. Sed egestas egestas fringilla phasellus faucibus scelerisque eleifend donec. Dolor morbi non arcu risus. Nam aliquam sem et
tortor consequat id porta nibh. Sagittis nisl rhoncus mattis rhoncus.
</p>
<p>
Tellus molestie nunc non blandit massa enim nec dui. A iaculis at erat pellentesque. Nibh cras pulvinar mattis nunc. Nunc consequat interdum varius sit. Tortor at risus viverra adipiscing at in. Sed faucibus turpis in eu. Nunc faucibus a pellentesque
sit. Dignissim enim sit amet venenatis urna cursus eget nunc scelerisque. Aliquam ultrices sagittis orci a. Sagittis eu volutpat odio facilisis mauris sit. Risus at ultrices mi tempus. Libero volutpat sed cras ornare. Risus ultricies tristique nulla
aliquet enim tortor. Augue lacus viverra vitae congue. Sit amet mattis vulputate enim nulla aliquet porttitor. Risus in hendrerit gravida rutrum.
</p>
<p>
Mauris commodo quis imperdiet massa tincidunt nunc pulvinar sapien. Orci dapibus ultrices in iaculis nunc sed augue lacus. Sit amet venenatis urna cursus. Est velit egestas dui id ornare arcu odio ut. Consequat mauris nunc congue nisi vitae suscipit tellus
mauris a. Ipsum dolor sit amet consectetur adipiscing elit. Dolor purus non enim praesent elementum facilisis. Pharetra pharetra massa massa ultricies mi quis hendrerit dolor magna. Quam vulputate dignissim suspendisse in. Elementum pulvinar etiam
non quam lacus suspendisse. Sed augue lacus viverra vitae congue eu consequat ac felis. Egestas maecenas pharetra convallis posuere morbi leo urna molestie.
</p>
<p>
Sed libero enim sed faucibus. Malesuada fames ac turpis egestas integer eget aliquet nibh praesent. Diam vel quam elementum pulvinar etiam non. Molestie ac feugiat sed lectus vestibulum mattis. Quisque sagittis purus sit amet volutpat. Ac turpis egestas
integer eget aliquet nibh praesent tristique magna. Integer feugiat scelerisque varius morbi enim nunc faucibus a. Faucibus a pellentesque sit amet porttitor eget. Massa massa ultricies mi quis hendrerit dolor. Metus vulputate eu scelerisque felis
imperdiet proin fermentum. Bibendum neque egestas congue quisque egestas diam in. Duis at consectetur lorem donec massa. Eu consequat ac felis donec et. In tellus integer feugiat scelerisque varius morbi enim. Nulla facilisi morbi tempus iaculis urna
id. Mauris commodo quis imperdiet massa tincidunt nunc. Egestas purus viverra accumsan in. Malesuada proin libero nunc consequat interdum varius. Pulvinar elementum integer enim neque volutpat ac tincidunt.
</p>
<p>
Laoreet id donec ultrices tincidunt arcu non sodales. Tempor id eu nisl nunc mi ipsum. Urna molestie at elementum eu facilisis sed odio. Mauris pharetra et ultrices neque ornare aenean. Placerat vestibulum lectus mauris ultrices eros in. Feugiat nibh
sed pulvinar proin gravida hendrerit. Nisl suscipit adipiscing bibendum est. Pretium nibh ipsum consequat nisl vel pretium. Sed egestas egestas fringilla phasellus faucibus scelerisque eleifend donec. Dolor morbi non arcu risus. Nam aliquam sem et
tortor consequat id porta nibh. Sagittis nisl rhoncus mattis rhoncus.
</p>
<p>
Tellus molestie nunc non blandit massa enim nec dui. A iaculis at erat pellentesque. Nibh cras pulvinar mattis nunc. Nunc consequat interdum varius sit. Tortor at risus viverra adipiscing at in. Sed faucibus turpis in eu. Nunc faucibus a pellentesque
sit. Dignissim enim sit amet venenatis urna cursus eget nunc scelerisque. Aliquam ultrices sagittis orci a. Sagittis eu volutpat odio facilisis mauris sit. Risus at ultrices mi tempus. Libero volutpat sed cras ornare. Risus ultricies tristique nulla
aliquet enim tortor. Augue lacus viverra vitae congue. Sit amet mattis vulputate enim nulla aliquet porttitor. Risus in hendrerit gravida rutrum.
</p>
</div>
This can be done very easily now with position: sticky; it will change between fixed and static when it is at top: 0; defined only in CSS.
Learn more about sticky positioning: https://www.w3schools.com/howto/howto_css_sticky_element.asp
.top {
position: sticky;
top: 0;
background: red;
}
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce quis feugiat lacus. Etiam mollis odio ipsum, et lobortis dolor fermentum gravida. Praesent volutpat metus quis venenatis venenatis. Sed semper pharetra nibh. In hac habitasse platea dictumst. Duis egestas felis ac maximus iaculis. Nulla quis metus condimentum, porta mi sed, convallis risus. Nulla vehicula lorem elit, eu pulvinar velit pretium quis. Maecenas vitae pulvinar massa. Morbi congue erat vitae pharetra faucibus.</p>
<p class="top">top</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce quis feugiat lacus. Etiam mollis odio ipsum, et lobortis dolor fermentum gravida. Praesent volutpat metus quis venenatis venenatis. Sed semper pharetra nibh. In hac habitasse platea dictumst. Duis egestas felis ac maximus iaculis. Nulla quis metus condimentum, porta mi sed, convallis risus. Nulla vehicula lorem elit, eu pulvinar velit pretium quis. Maecenas vitae pulvinar massa. Morbi congue erat vitae pharetra faucibus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce quis feugiat lacus. Etiam mollis odio ipsum, et lobortis dolor fermentum gravida. Praesent volutpat metus quis venenatis venenatis. Sed semper pharetra nibh. In hac habitasse platea dictumst. Duis egestas felis ac maximus iaculis. Nulla quis metus condimentum, porta mi sed, convallis risus. Nulla vehicula lorem elit, eu pulvinar velit pretium quis. Maecenas vitae pulvinar massa. Morbi congue erat vitae pharetra faucibus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce quis feugiat lacus. Etiam mollis odio ipsum, et lobortis dolor fermentum gravida. Praesent volutpat metus quis venenatis venenatis. Sed semper pharetra nibh. In hac habitasse platea dictumst. Duis egestas felis ac maximus iaculis. Nulla quis metus condimentum, porta mi sed, convallis risus. Nulla vehicula lorem elit, eu pulvinar velit pretium quis. Maecenas vitae pulvinar massa. Morbi congue erat vitae pharetra faucibus.</p>
How do I determine in javascript, if an element is above the viewport (user has scrolled past it) (not just if it can be seen)?
In this snippet:
console.log(iselement1aboveviewport); would return:
0, if you have not seen the element (element is below viewport)
0, if you currently see the element (element is in the viewport)
1, if you have scrolled past the element (element is above the viewport).
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et imperdiet nulla. Morbi malesuada consectetur nisl, ut iaculis sapien. Praesent molestie lobortis purus efficitur vehicula. Quisque elementum tortor sit amet condimentum rhoncus. Etiam molestie porttitor nisi, vel porttitor orci dignissim a. Aliquam a est felis. Quisque libero neque, ultricies a nunc nec, hendrerit euismod ligula. Vestibulum viverra egestas magna malesuada ornare. Sed in cursus est, eget convallis arcu.
Integer ante lorem, sagittis quis turpis quis, congue feugiat risus. Cras mollis porttitor rutrum. Fusce eget nisi ut nisl bibendum sollicitudin. Donec tempus accumsan elit, ut hendrerit odio commodo ut. Sed ac interdum massa. Vivamus elementum efficitur nulla sit amet varius. Suspendisse purus mi, laoreet eget ligula molestie, egestas sodales erat.
<div id="element1" style="color: orange;">Am I above the viewport? (have you scrolled past me?)</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et imperdiet nulla. Morbi malesuada consectetur nisl, ut iaculis sapien. Praesent molestie lobortis purus efficitur vehicula. Quisque elementum tortor sit amet condimentum rhoncus. Etiam molestie porttitor nisi, vel porttitor orci dignissim a. Aliquam a est felis. Quisque libero neque, ultricies a nunc nec, hendrerit euismod ligula. Vestibulum viverra egestas magna malesuada ornare. Sed in cursus est, eget convallis arcu.
Fusce gravida tellus fermentum massa faucibus scelerisque. Vestibulum consequat dolor libero, sed lobortis ligula eleifend at. Sed porttitor odio nec enim pulvinar pulvinar. Vivamus vulputate sollicitudin nisi et ullamcorper. Aenean et ultrices nunc. Donec ligula dolor, lobortis in vestibulum at, ultrices ac lectus. Nunc tristique arcu eu felis finibus commodo. Ut lacinia tincidunt dui, venenatis lacinia orci imperdiet in.
Nam maximus at quam eu rhoncus. Mauris auctor efficitur dignissim. Proin porttitor nunc ut tortor aliquet, a tincidunt tortor luctus. Suspendisse dapibus dui sapien, sed elementum ex pellentesque a. Quisque tortor massa, pretium vel lacus non, accumsan convallis leo. Nunc nec orci mi. Phasellus id massa ipsum. Aenean non ornare neque, ultricies vestibulum tellus. Aliquam quis laoreet orci. Cras faucibus massa in ultricies consectetur. Duis et odio nec dolor sollicitudin condimentum.
Integer ante lorem, sagittis quis turpis quis, congue feugiat risus. Cras mollis porttitor rutrum. Fusce eget nisi ut nisl bibendum sollicitudin. Donec tempus accumsan elit, ut hendrerit odio commodo ut. Sed ac interdum massa. Vivamus elementum efficitur nulla sit amet varius. Suspendisse purus mi, laoreet eget ligula molestie, egestas sodales erat.
Explanation:
You should use Element.getBoundingClientRect
The Element.getBoundingClientRect() method returns the size of an element and its position relative to the viewport.
It returns an object that looks like this:
{
"x": 7.997159004211426,
"y": 229.81533813476562,
"width": 425.8238525390625,
"height": 18.18181800842285,
"top": 229.81533813476562,
"right": 433.8210115432739,
"bottom": 247.99715614318848,
"left": 7.997159004211426
}
If you want to know when the element is above the view port you need to keep an eye on the bottom property to be <= 0.
Working example:
const element1 = document.getElementById("element1");
window.addEventListener("scroll", function(){
console.clear();
console.log(element1.getBoundingClientRect().bottom <= 0 ? "Above" : "Under");
});
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et imperdiet nulla. Morbi malesuada consectetur nisl, ut iaculis sapien. Praesent molestie lobortis purus efficitur vehicula. Quisque elementum tortor sit amet condimentum rhoncus. Etiam molestie porttitor nisi, vel porttitor orci dignissim a. Aliquam a est felis. Quisque libero neque, ultricies a nunc nec, hendrerit euismod ligula. Vestibulum viverra egestas magna malesuada ornare. Sed in cursus est, eget convallis arcu.
Integer ante lorem, sagittis quis turpis quis, congue feugiat risus. Cras mollis porttitor rutrum. Fusce eget nisi ut nisl bibendum sollicitudin. Donec tempus accumsan elit, ut hendrerit odio commodo ut. Sed ac interdum massa. Vivamus elementum efficitur nulla sit amet varius. Suspendisse purus mi, laoreet eget ligula molestie, egestas sodales erat.
<div id="element1" style="color: orange;">Am I above the viewport? (have you scrolled past me?)</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et imperdiet nulla. Morbi malesuada consectetur nisl, ut iaculis sapien. Praesent molestie lobortis purus efficitur vehicula. Quisque elementum tortor sit amet condimentum rhoncus. Etiam molestie porttitor nisi, vel porttitor orci dignissim a. Aliquam a est felis. Quisque libero neque, ultricies a nunc nec, hendrerit euismod ligula. Vestibulum viverra egestas magna malesuada ornare. Sed in cursus est, eget convallis arcu.
Fusce gravida tellus fermentum massa faucibus scelerisque. Vestibulum consequat dolor libero, sed lobortis ligula eleifend at. Sed porttitor odio nec enim pulvinar pulvinar. Vivamus vulputate sollicitudin nisi et ullamcorper. Aenean et ultrices nunc. Donec ligula dolor, lobortis in vestibulum at, ultrices ac lectus. Nunc tristique arcu eu felis finibus commodo. Ut lacinia tincidunt dui, venenatis lacinia orci imperdiet in.
Nam maximus at quam eu rhoncus. Mauris auctor efficitur dignissim. Proin porttitor nunc ut tortor aliquet, a tincidunt tortor luctus. Suspendisse dapibus dui sapien, sed elementum ex pellentesque a. Quisque tortor massa, pretium vel lacus non, accumsan convallis leo. Nunc nec orci mi. Phasellus id massa ipsum. Aenean non ornare neque, ultricies vestibulum tellus. Aliquam quis laoreet orci. Cras faucibus massa in ultricies consectetur. Duis et odio nec dolor sollicitudin condimentum.
Integer ante lorem, sagittis quis turpis quis, congue feugiat risus. Cras mollis porttitor rutrum. Fusce eget nisi ut nisl bibendum sollicitudin. Donec tempus accumsan elit, ut hendrerit odio commodo ut. Sed ac interdum massa. Vivamus elementum efficitur nulla sit amet varius. Suspendisse purus mi, laoreet eget ligula molestie, egestas sodales erat.
How to I make a Design a scrollbar using html, css or javascript?
What I dont want
I dont want to edit the current the scrollbar for my browser.
What I do Want
I want to make my own scrollbar for my companies website.
https://keenthemes.com/metronic/preview/?demo=demo4
"Code"
I dont know how to even start building this but ill do my best!
Html
.Stack_main-section {
height: 40rem;
border: .1rem solid lightgray;
/* flex display so the content is full height */
display: flex;
}
.Stack_content {
padding: .7remabove
}
.Stack_bar-track {
background: lightgray;
padding: .4rem;
}
.Stack_bar {
height: .4rem;
width: .7rem;
height: 9rem;
border-radius: .8rem;
background: gray;
}
<section class="Stack_main-section">
<div class="Stack_content ">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ac turpis at massa consectetur malesuada vel eu lorem. Vivamus ac eros id ex hendrerit rutrum eget et turpis. Nunc mollis diam id purus porttitor eleifend a interdum neque. Quisque et molestie
enim, eu dignissim nunc. Suspendisse varius mauris eu aliquet rutrum. Maecenas convallis tincidunt tellus, nec tincidunt tellus venenatis at. Quisque eget lacinia magna, ac placerat justo. Donec cursus elementum massa, id posuere lacus posuere eget.
Nunc at dui sodales, varius erat vel, varius lorem. Pellentesque cursus iaculis felis, auctor ultrices ligula elementum vel. Maecenas est dui, ullamcorper ut semper vel, tincidunt sit amet tellus. Nunc ornare ornare sapien in condimentum. Morbi porttitor
feugiat ligula, sit amet feugiat tellus maximus eget. Sed lobortis semper urna, in accumsan ipsum. Aenean dictum dui non dui vehicula porta. Vivamus pellentesque ligula eu egestas facilisis. Pellentesque vitae turpis consectetur lorem laoreet auctor.
Nunc ultrices pellentesque mi, nec lobortis neque facilisis id. Quisque pharetra vitae nibh eu venenatis. Cras pretium convallis cursus. Phasellus quis ex nisi. Nulla et laoreet eros, ac laoreet ante. Maecenas ornare risus a pellentesque varius. Sed
tristique tellus quam, sed volutpat ex sodales quis. Phasellus congue velit a nisl consequat, at tincidunt mi gravida. Morbi sit amet magna a sapien varius accumsan. Phasellus scelerisque, urna faucibus placerat venenatis, dui est fermentum massa,
non lacinia arcu sem in orci. Ut elementum massa et turpis aliquam varius. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut elementum augue. Sed pulvinar eleifend cursus. Donec id mi odio. Ut nec nibh malesuada, aliquet velit nec,
tincidunt mauris. Mauris sagittis placerat enim, at faucibus turpis vestibulum vel. Pellentesque at venenatis mauris, lacinia blandit dolor. Integer massa sem, elementum a nulla quis, rutrum euismod felis. Cras a lacinia urna. Nulla scelerisque venenatis
lectus ut ullamcorper. Curabitur eu suscipit metus. Praesent velit elit, luctus a facilisis nec, tempus non diam. Fusce nec aliquam est. Maecenas odio odio, pulvinar vel volutpat et, ullamcorper a ligula. Fusce bibendum lacus in est ultrices, vitae
mattis mauris sodales. Curabitur massa nisl, placerat a nunc a, scelerisque rhoncus dui. Vestibulum nibh dui, dictum et porta vel, hendrerit et augue. Morbi viverra est vel sapien venenatis faucibus. Nullam iaculis congue quam. Vestibulum dignissim
iaculis nulla, congue tincidunt nisi iaculis vitae. Fusce mollis aliquam ante, a sagittis dolor mattis id. Morbi aliquam sem nunc, at dictum sem aliquam ac. Suspendisse molestie justo leo, at venenatis mauris aliquam eu. Nunc id tortor malesuada diam
consectetur dapibus sit amet a lorem. Pellentesque dictum et libero vitae semper. Donec sit amet ipsum vel nulla eleifend fringilla ac at velit. Donec consectetur aliquam metus. Integer eget ex et velit imperdiet pulvinar. Duis nisi ante, finibus
eu posuere id, sodales vel sem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut dui ex, placerat eu felis a, luctus ultricies nibh. Nam malesuada viverra facilisis. Nam rhoncus elit velit, at ullamcorper nisi viverra scelerisque. Pellentesque
et lacus non dolor fermentum fermentum. Morbi in vulputate nunc, sit amet malesuada massa. Nullam euismod dui id egestas scelerisque. Donec vel ex ut justo mollis varius. Quisque at tortor nec est cursus iaculis. Vivamus gravida purus a ligula elementum
dictum. Mauris diam dolor, convallis quis imperdiet et, maximus quis leo. Morbi aliquam pretium lectus ac hendrerit.t
</div>
<div class="Stack_bar-track">
<div class="Stack_bar">
.
</div>
</div>
</section>
!important
That just an example of what I wnat I know if this is you you build it professionally.
Please help and Thank you in advance.
Here is a simple example of what you can do with -webkit-scrollbar
.Stack_main-section {
height: 40rem;
border: .1rem solid lightgray;
/* flex display so the content is full height */
display: flex;
}
.Stack_content {
padding: .7remabove
}
.Stack_bar-track {
background: lightgray;
padding: .4rem;
}
.Stack_bar {
height: .4rem;
width: .7rem;
height: 9rem;
border-radius: .8rem;
background: gray;
}
/* Scrollbar */
*::-webkit-scrollbar {
width: 12px;
}
*::-webkit-scrollbar-track-piece {
background-color: #ddd;
}
*::-webkit-scrollbar-thumb {
background-color: #aaa;
border-radius: 6px;
border-style: none;
}
<section class="Stack_main-section">
<div class="Stack_content ">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ac turpis at massa consectetur malesuada vel eu lorem. Vivamus ac eros id ex hendrerit rutrum eget et turpis. Nunc mollis diam id purus porttitor eleifend a interdum neque. Quisque et molestie
enim, eu dignissim nunc. Suspendisse varius mauris eu aliquet rutrum. Maecenas convallis tincidunt tellus, nec tincidunt tellus venenatis at. Quisque eget lacinia magna, ac placerat justo. Donec cursus elementum massa, id posuere lacus posuere eget.
Nunc at dui sodales, varius erat vel, varius lorem. Pellentesque cursus iaculis felis, auctor ultrices ligula elementum vel. Maecenas est dui, ullamcorper ut semper vel, tincidunt sit amet tellus. Nunc ornare ornare sapien in condimentum. Morbi porttitor
feugiat ligula, sit amet feugiat tellus maximus eget. Sed lobortis semper urna, in accumsan ipsum. Aenean dictum dui non dui vehicula porta. Vivamus pellentesque ligula eu egestas facilisis. Pellentesque vitae turpis consectetur lorem laoreet auctor.
Nunc ultrices pellentesque mi, nec lobortis neque facilisis id. Quisque pharetra vitae nibh eu venenatis. Cras pretium convallis cursus. Phasellus quis ex nisi. Nulla et laoreet eros, ac laoreet ante. Maecenas ornare risus a pellentesque varius. Sed
tristique tellus quam, sed volutpat ex sodales quis. Phasellus congue velit a nisl consequat, at tincidunt mi gravida. Morbi sit amet magna a sapien varius accumsan. Phasellus scelerisque, urna faucibus placerat venenatis, dui est fermentum massa,
non lacinia arcu sem in orci. Ut elementum massa et turpis aliquam varius. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam ut elementum augue. Sed pulvinar eleifend cursus. Donec id mi odio. Ut nec nibh malesuada, aliquet velit nec,
tincidunt mauris. Mauris sagittis placerat enim, at faucibus turpis vestibulum vel. Pellentesque at venenatis mauris, lacinia blandit dolor. Integer massa sem, elementum a nulla quis, rutrum euismod felis. Cras a lacinia urna. Nulla scelerisque venenatis
lectus ut ullamcorper. Curabitur eu suscipit metus. Praesent velit elit, luctus a facilisis nec, tempus non diam. Fusce nec aliquam est. Maecenas odio odio, pulvinar vel volutpat et, ullamcorper a ligula. Fusce bibendum lacus in est ultrices, vitae
mattis mauris sodales. Curabitur massa nisl, placerat a nunc a, scelerisque rhoncus dui. Vestibulum nibh dui, dictum et porta vel, hendrerit et augue. Morbi viverra est vel sapien venenatis faucibus. Nullam iaculis congue quam. Vestibulum dignissim
iaculis nulla, congue tincidunt nisi iaculis vitae. Fusce mollis aliquam ante, a sagittis dolor mattis id. Morbi aliquam sem nunc, at dictum sem aliquam ac. Suspendisse molestie justo leo, at venenatis mauris aliquam eu. Nunc id tortor malesuada diam
consectetur dapibus sit amet a lorem. Pellentesque dictum et libero vitae semper. Donec sit amet ipsum vel nulla eleifend fringilla ac at velit. Donec consectetur aliquam metus. Integer eget ex et velit imperdiet pulvinar. Duis nisi ante, finibus
eu posuere id, sodales vel sem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut dui ex, placerat eu felis a, luctus ultricies nibh. Nam malesuada viverra facilisis. Nam rhoncus elit velit, at ullamcorper nisi viverra scelerisque. Pellentesque
et lacus non dolor fermentum fermentum. Morbi in vulputate nunc, sit amet malesuada massa. Nullam euismod dui id egestas scelerisque. Donec vel ex ut justo mollis varius. Quisque at tortor nec est cursus iaculis. Vivamus gravida purus a ligula elementum
dictum. Mauris diam dolor, convallis quis imperdiet et, maximus quis leo. Morbi aliquam pretium lectus ac hendrerit.t
</div>
<!--div class="Stack_bar-track">
<div class="Stack_bar">
.
</div>
</div-->
</section>
I hope it helps.
::-webkit-scrollbar
::-webkit-scrollbar-button
::-webkit-scrollbar-track
::-webkit-scrollbar-track-piece
::-webkit-scrollbar-thumb
::-webkit-scrollbar-corner
::-webkit-resizer
These are the elements you're looking for. CSS-Tricks has some excellent examples outlined and what you're trying to achieve here isn't very specific, but if you clarify the kind of styles you're going for I'd be happy to edit my answer a bit to accommodate!
As well here's a CodePen with some pretty clean options so you can compare and see how the styoes react.
Hope this helps!
For browser's that don't use webkit as a render engine, you just want to add it's alternative.
Or simply use a plug-in. I found this megathread with every bit of information you will likely ever need on the topic.
https://stackoverflow.com/a/14150577/5860648
Please i want to compare my div with id = message old document height to new document height.
If there is a difference, then it should scroll to bottom automatically, else nothing should happen. I wish to do this in pure javascript.
This is what i have so far but confused on how to get things done.I know there is surely a way but not succeeding.
function Scroll(){
var elem = document.getElementById('message');
elem.scrollTop = elem.scrollHeight;
}
Thanks for quick response.
If you just want a one-step 'jump' scroll, you can use
window.scrollTo(0, document.body.scrollHeight):
function Scroll() {
var elem = document.getElementById('message');
if (elem.scrollHeight > window.innerHeight) {
window.scrollTo(0, document.body.scrollHeight);
}
}
Scroll();
<div id="message">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam non lorem efficitur eros fringilla vestibulum vel in nisl. Nullam porttitor auctor euismod. Duis efficitur eu ipsum sit amet porta. Etiam sagittis velit id urna ultricies, id semper nisi
ornare. Donec ullamcorper orci dui, et eleifend metus dictum quis. Donec libero nisl, sodales at odio sit amet, dignissim egestas enim. Pellentesque consectetur erat eget tellus vehicula efficitur. Interdum et malesuada fames ac ante ipsum primis in
faucibus. Vivamus suscipit, lacus id maximus fermentum, erat velit venenatis diam, ac viverra mi erat in nunc. Aenean eu urna dignissim, elementum dui quis, elementum eros. Duis eleifend metus sed risus sodales efficitur. Fusce sit amet ipsum et magna
luctus tristique. Mauris vitae libero et odio aliquet rhoncus. Donec sed dui ac massa volutpat elementum. Nullam et nibh sit amet nisl accumsan placerat. Morbi at tortor non metus tempor euismod. Nam eget mi at diam sodales tristique non et lacus. Aenean
non nunc imperdiet, consectetur nibh egestas, semper orci. Sed tristique sem odio. Phasellus ultrices lorem venenatis purus pellentesque, in vestibulum augue congue. Vestibulum eu maximus mauris. Nulla facilisi. Etiam in semper velit, nec accumsan nunc.
Curabitur vel fermentum velit, quis blandit velit. Cras eu scelerisque est. Nunc vel dictum ipsum. Maecenas eleifend efficitur metus nec auctor. Donec ut enim hendrerit, gravida urna eu, hendrerit mauris. Proin orci nulla, tristique vitae pharetra ut,
blandit eget erat. Sed lectus mauris, fringilla ut felis nec, feugiat faucibus sapien. Morbi est felis, suscipit at tellus pharetra, interdum gravida lectus. Praesent molestie euismod sagittis. Sed blandit dictum magna, ac ornare elit dignissim eget.
Morbi varius libero sit amet est fermentum, id convallis quam interdum. Praesent posuere eros id dignissim euismod. Sed urna quam, facilisis quis lacinia sit amet, pellentesque et lacus. Vivamus faucibus sagittis dictum. Duis posuere, ipsum elementum
molestie pulvinar, elit odio lobortis ipsum, non finibus velit urna vel neque. Aliquam vehicula augue non sapien fringilla varius. Suspendisse at pellentesque nibh. Vestibulum sollicitudin lacus quis lectus hendrerit venenatis at ut lacus. Donec condimentum
fringilla tellus id bibendum. Donec facilisis elit erat, at varius velit dictum vel. Vivamus bibendum tincidunt justo, lobortis euismod tortor semper vel. Morbi non felis tortor. Aliquam vitae elementum ligula. Praesent sem risus, gravida vitae neque
iaculis, interdum maximus nibh. Etiam eu ullamcorper dui. Etiam mauris lectus, bibendum quis semper eget, egestas a nunc. Maecenas maximus pharetra mi id egestas.</div>
Hope this helps!
Here is a jsfiddle of my work so far
I know you can't see the image but i'll try to explain what I mean. As you can see the header itself animates smoothly as i scroll down. However the image doesn't resize in a smooth transition, it just suddenly changes size. I'd like it to visibly decrease in size along with the header if that makes sense.
I have tried adding transition: all 0.8s ease; to the header-image class but it had no effect.
Any help is greatly appreciated.
HTML:
You didn't set the default value of height of the image.
$(document).ready(function() {
$(window).scroll(function() {
if ($(this).scrollTop() > 1) {
$('header').addClass("scroll");
$('.header-image').addClass("header-image-scroll");
} else {
$('header').removeClass("scroll");
$('.header-image').removeClass("header-image-scroll");
}
});
});
body {
font-family: 'Open Sans', sans-serif;
background-color: #f3f3f3;
color: #666;
margin: 0px;
padding: 0px;
}
#Page {
padding-top: 100px;
}
header {
background-color: #1c1c1b;
font-family: 'Century gothic';
font-size: 180%;
height: 100px;
width: 100%;
border-bottom: solid;
border-bottom-color: #009641;
border-bottom-width: 5px;
position: fixed;
line-height: 50px;
z-index: 1000;
overflow: hidden;
transition: all 0.8s ease;
}
.header-image {
align-content: center;
height: 200px;
transition: all .5s ease;
}
.scroll {
height: 80px;
font-size: 180%;
}
.header-image-scroll {
height: 80px;
transition: all .5s ease;
}
#center-column {
background-color: white;
width: 1080px;
height: 100%;
box-shadow: 0px 1px 5px #888888;
margin: 0 auto;
padding-bottom: 10px;
}
nav {
}
nav ul {
text-align: center;
display: table;
margin: auto;
}
nav li {
display: table-cell;
vertical-align: middle;
/*display: inline;*/
padding: 0 10px;
}
nav li a {
color: #009641;
text-decoration: none;
}
nav li a:hover {
color: #e2030e;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<body id="chesters">
<header>
<nav>
<ul>
<li>Menu</li>
<li>Burritos</li>
<li><img class="header-image" src="http://wallpaper-gallery.net/images/image/image-13.jpg"></li>
<li>Contact Us</li>
<li>About Us</li>
</ul>
</nav>
</header>
<div id="Page">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sed enim metus. Aenean suscipit imperdiet magna, vel pulvinar mauris pretium a. Nullam eleifend erat a leo sollicitudin, non consequat quam egestas. Etiam sollicitudin lectus eu nibh laoreet dapibus. Phasellus vel dui auctor tortor interdum gravida a interdum dui. Cras dapibus dui arcu, nec condimentum arcu malesuada sed. Aliquam sit amet bibendum felis, nec condimentum quam. Aenean a arcu interdum, luctus ipsum vitae, dapibus sapien.
Aenean pharetra vestibulum eros ut porttitor. Etiam fringilla augue non purus sodales feugiat. Sed at nunc et risus tempor eleifend ac non orci. Mauris a rhoncus lacus. Quisque eget malesuada risus, sed vehicula mi. Duis elementum finibus interdum. In fringilla accumsan accumsan. Curabitur sit amet tempus dolor. Aliquam erat volutpat. Praesent at luctus orci. Ut eget odio dignissim, facilisis quam ut, pharetra dolor. Duis laoreet lectus nec aliquet condimentum. Ut in tellus semper, ultricies erat convallis, eleifend sem. Phasellus lacinia euismod nulla, ac egestas ipsum hendrerit eget. Sed lacinia metus sit amet sodales mattis.
Phasellus ac leo mattis, convallis dui vitae, ultricies diam. Nunc finibus arcu mauris, rhoncus tincidunt urna condimentum ut. Proin volutpat hendrerit mi, nec euismod lorem commodo in. Maecenas aliquam viverra lectus, quis euismod tortor dapibus at. Duis nec sapien non velit interdum malesuada. Duis venenatis tellus a metus varius condimentum. Integer fringilla volutpat leo ut rutrum. Aenean gravida rhoncus mattis. Nam at convallis magna. In turpis erat, mattis et lorem sed, euismod mattis nisl. Quisque eleifend convallis massa ut semper. In elementum rhoncus massa ut fermentum. Mauris pharetra libero mi, in pretium quam vehicula in. Pellentesque et lobortis felis. Suspendisse ultrices id urna sit amet semper.
Sed suscipit faucibus massa. Fusce elementum interdum leo, ut viverra libero eleifend at. In non placerat magna. Integer scelerisque molestie dapibus. Duis tincidunt diam neque, a ullamcorper libero accumsan eget. Aliquam rhoncus diam aliquet, interdum mauris sed, hendrerit risus. Aliquam erat volutpat. Mauris euismod accumsan neque vel gravida. Aenean facilisis augue at metus ultrices, convallis eleifend lectus fringilla. Nunc porta dictum scelerisque. Morbi quis nibh vel leo sodales egestas vitae ut ligula. Quisque eu pellentesque massa. Vivamus tristique rhoncus diam, at fringilla eros fringilla at. Fusce sit amet diam lectus. Cras blandit diam id odio bibendum, et blandit risus condimentum.
Aenean porta orci id sollicitudin cursus. Pellentesque eget mauris scelerisque, efficitur odio nec, aliquet nibh. Nulla quam nisl, placerat non condimentum at, tempus non nibh. Integer faucibus ex mi, at rutrum neque auctor ut. Etiam feugiat elit lectus, ut lacinia mi rhoncus et. Mauris varius mattis metus. Integer in placerat justo, eu placerat dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non sem et ipsum dignissim eleifend vitae at massa. In quis odio in orci blandit scelerisque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam neque tortor, luctus et massa non, porta egestas erat.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sed enim metus. Aenean suscipit imperdiet magna, vel pulvinar mauris pretium a. Nullam eleifend erat a leo sollicitudin, non consequat quam egestas. Etiam sollicitudin lectus eu nibh laoreet dapibus. Phasellus vel dui auctor tortor interdum gravida a interdum dui. Cras dapibus dui arcu, nec condimentum arcu malesuada sed. Aliquam sit amet bibendum felis, nec condimentum quam. Aenean a arcu interdum, luctus ipsum vitae, dapibus sapien.
Aenean pharetra vestibulum eros ut porttitor. Etiam fringilla augue non purus sodales feugiat. Sed at nunc et risus tempor eleifend ac non orci. Mauris a rhoncus lacus. Quisque eget malesuada risus, sed vehicula mi. Duis elementum finibus interdum. In fringilla accumsan accumsan. Curabitur sit amet tempus dolor. Aliquam erat volutpat. Praesent at luctus orci. Ut eget odio dignissim, facilisis quam ut, pharetra dolor. Duis laoreet lectus nec aliquet condimentum. Ut in tellus semper, ultricies erat convallis, eleifend sem. Phasellus lacinia euismod nulla, ac egestas ipsum hendrerit eget. Sed lacinia metus sit amet sodales mattis.
Phasellus ac leo mattis, convallis dui vitae, ultricies diam. Nunc finibus arcu mauris, rhoncus tincidunt urna condimentum ut. Proin volutpat hendrerit mi, nec euismod lorem commodo in. Maecenas aliquam viverra lectus, quis euismod tortor dapibus at. Duis nec sapien non velit interdum malesuada. Duis venenatis tellus a metus varius condimentum. Integer fringilla volutpat leo ut rutrum. Aenean gravida rhoncus mattis. Nam at convallis magna. In turpis erat, mattis et lorem sed, euismod mattis nisl. Quisque eleifend convallis massa ut semper. In elementum rhoncus massa ut fermentum. Mauris pharetra libero mi, in pretium quam vehicula in. Pellentesque et lobortis felis. Suspendisse ultrices id urna sit amet semper.
Sed suscipit faucibus massa. Fusce elementum interdum leo, ut viverra libero eleifend at. In non placerat magna. Integer scelerisque molestie dapibus. Duis tincidunt diam neque, a ullamcorper libero accumsan eget. Aliquam rhoncus diam aliquet, interdum mauris sed, hendrerit risus. Aliquam erat volutpat. Mauris euismod accumsan neque vel gravida. Aenean facilisis augue at metus ultrices, convallis eleifend lectus fringilla. Nunc porta dictum scelerisque. Morbi quis nibh vel leo sodales egestas vitae ut ligula. Quisque eu pellentesque massa. Vivamus tristique rhoncus diam, at fringilla eros fringilla at. Fusce sit amet diam lectus. Cras blandit diam id odio bibendum, et blandit risus condimentum.
Aenean porta orci id sollicitudin cursus. Pellentesque eget mauris scelerisque, efficitur odio nec, aliquet nibh. Nulla quam nisl, placerat non condimentum at, tempus non nibh. Integer faucibus ex mi, at rutrum neque auctor ut. Etiam feugiat elit lectus, ut lacinia mi rhoncus et. Mauris varius mattis metus. Integer in placerat justo, eu placerat dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non sem et ipsum dignissim eleifend vitae at massa. In quis odio in orci blandit scelerisque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam neque tortor, luctus et massa non, porta egestas erat.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sed enim metus. Aenean suscipit imperdiet magna, vel pulvinar mauris pretium a. Nullam eleifend erat a leo sollicitudin, non consequat quam egestas. Etiam sollicitudin lectus eu nibh laoreet dapibus. Phasellus vel dui auctor tortor interdum gravida a interdum dui. Cras dapibus dui arcu, nec condimentum arcu malesuada sed. Aliquam sit amet bibendum felis, nec condimentum quam. Aenean a arcu interdum, luctus ipsum vitae, dapibus sapien.
Aenean pharetra vestibulum eros ut porttitor. Etiam fringilla augue non purus sodales feugiat. Sed at nunc et risus tempor eleifend ac non orci. Mauris a rhoncus lacus. Quisque eget malesuada risus, sed vehicula mi. Duis elementum finibus interdum. In fringilla accumsan accumsan. Curabitur sit amet tempus dolor. Aliquam erat volutpat. Praesent at luctus orci. Ut eget odio dignissim, facilisis quam ut, pharetra dolor. Duis laoreet lectus nec aliquet condimentum. Ut in tellus semper, ultricies erat convallis, eleifend sem. Phasellus lacinia euismod nulla, ac egestas ipsum hendrerit eget. Sed lacinia metus sit amet sodales mattis.
Phasellus ac leo mattis, convallis dui vitae, ultricies diam. Nunc finibus arcu mauris, rhoncus tincidunt urna condimentum ut. Proin volutpat hendrerit mi, nec euismod lorem commodo in. Maecenas aliquam viverra lectus, quis euismod tortor dapibus at. Duis nec sapien non velit interdum malesuada. Duis venenatis tellus a metus varius condimentum. Integer fringilla volutpat leo ut rutrum. Aenean gravida rhoncus mattis. Nam at convallis magna. In turpis erat, mattis et lorem sed, euismod mattis nisl. Quisque eleifend convallis massa ut semper. In elementum rhoncus massa ut fermentum. Mauris pharetra libero mi, in pretium quam vehicula in. Pellentesque et lobortis felis. Suspendisse ultrices id urna sit amet semper.
Sed suscipit faucibus massa. Fusce elementum interdum leo, ut viverra libero eleifend at. In non placerat magna. Integer scelerisque molestie dapibus. Duis tincidunt diam neque, a ullamcorper libero accumsan eget. Aliquam rhoncus diam aliquet, interdum mauris sed, hendrerit risus. Aliquam erat volutpat. Mauris euismod accumsan neque vel gravida. Aenean facilisis augue at metus ultrices, convallis eleifend lectus fringilla. Nunc porta dictum scelerisque. Morbi quis nibh vel leo sodales egestas vitae ut ligula. Quisque eu pellentesque massa. Vivamus tristique rhoncus diam, at fringilla eros fringilla at. Fusce sit amet diam lectus. Cras blandit diam id odio bibendum, et blandit risus condimentum.
Aenean porta orci id sollicitudin cursus. Pellentesque eget mauris scelerisque, efficitur odio nec, aliquet nibh. Nulla quam nisl, placerat non condimentum at, tempus non nibh. Integer faucibus ex mi, at rutrum neque auctor ut. Etiam feugiat elit lectus, ut lacinia mi rhoncus et. Mauris varius mattis metus. Integer in placerat justo, eu placerat dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non sem et ipsum dignissim eleifend vitae at massa. In quis odio in orci blandit scelerisque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam neque tortor, luctus et massa non, porta egestas erat.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sed enim metus. Aenean suscipit imperdiet magna, vel pulvinar mauris pretium a. Nullam eleifend erat a leo sollicitudin, non consequat quam egestas. Etiam sollicitudin lectus eu nibh laoreet dapibus. Phasellus vel dui auctor tortor interdum gravida a interdum dui. Cras dapibus dui arcu, nec condimentum arcu malesuada sed. Aliquam sit amet bibendum felis, nec condimentum quam. Aenean a arcu interdum, luctus ipsum vitae, dapibus sapien.
Aenean pharetra vestibulum eros ut porttitor. Etiam fringilla augue non purus sodales feugiat. Sed at nunc et risus tempor eleifend ac non orci. Mauris a rhoncus lacus. Quisque eget malesuada risus, sed vehicula mi. Duis elementum finibus interdum. In fringilla accumsan accumsan. Curabitur sit amet tempus dolor. Aliquam erat volutpat. Praesent at luctus orci. Ut eget odio dignissim, facilisis quam ut, pharetra dolor. Duis laoreet lectus nec aliquet condimentum. Ut in tellus semper, ultricies erat convallis, eleifend sem. Phasellus lacinia euismod nulla, ac egestas ipsum hendrerit eget. Sed lacinia metus sit amet sodales mattis.
Phasellus ac leo mattis, convallis dui vitae, ultricies diam. Nunc finibus arcu mauris, rhoncus tincidunt urna condimentum ut. Proin volutpat hendrerit mi, nec euismod lorem commodo in. Maecenas aliquam viverra lectus, quis euismod tortor dapibus at. Duis nec sapien non velit interdum malesuada. Duis venenatis tellus a metus varius condimentum. Integer fringilla volutpat leo ut rutrum. Aenean gravida rhoncus mattis. Nam at convallis magna. In turpis erat, mattis et lorem sed, euismod mattis nisl. Quisque eleifend convallis massa ut semper. In elementum rhoncus massa ut fermentum. Mauris pharetra libero mi, in pretium quam vehicula in. Pellentesque et lobortis felis. Suspendisse ultrices id urna sit amet semper.
Sed suscipit faucibus massa. Fusce elementum interdum leo, ut viverra libero eleifend at. In non placerat magna. Integer scelerisque molestie dapibus. Duis tincidunt diam neque, a ullamcorper libero accumsan eget. Aliquam rhoncus diam aliquet, interdum mauris sed, hendrerit risus. Aliquam erat volutpat. Mauris euismod accumsan neque vel gravida. Aenean facilisis augue at metus ultrices, convallis eleifend lectus fringilla. Nunc porta dictum scelerisque. Morbi quis nibh vel leo sodales egestas vitae ut ligula. Quisque eu pellentesque massa. Vivamus tristique rhoncus diam, at fringilla eros fringilla at. Fusce sit amet diam lectus. Cras blandit diam id odio bibendum, et blandit risus condimentum.
Aenean porta orci id sollicitudin cursus. Pellentesque eget mauris scelerisque, efficitur odio nec, aliquet nibh. Nulla quam nisl, placerat non condimentum at, tempus non nibh. Integer faucibus ex mi, at rutrum neque auctor ut. Etiam feugiat elit lectus, ut lacinia mi rhoncus et. Mauris varius mattis metus. Integer in placerat justo, eu placerat dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non sem et ipsum dignissim eleifend vitae at massa. In quis odio in orci blandit scelerisque. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam neque tortor, luctus et massa non, porta egestas erat.
</p>
</div> <!-- Page -->
</body>
As you mention, you need to add transition:all 0.8s ease to it, but you also need to set its initial height.
That is because the default value for height is auto and it cannot be animated.
Demo at https://jsfiddle.net/sbh5fkfx/1/