I just want to make a DIV jiggle on mouse stop. So I thought I'd set the style.left property using javascript and some timers. To simulate a mouse stop even, I created a timer that is set and cleared as long as the mouse is moving. When the mouse stops, the timer is no longer cleared, and the simulated event "fires." This sets up three more timers. First timer moves the DIV left by 5 pixels. Next timer moves the DIV right by 5 pixels. Final timer moves DIV back to original position.
Sounds easy, and the style.left property of the DIV gets written to the console, which reports the correct values.
But...I never see the DIV move. Why????
The complete code is:
var jLeft = document.getElementById('jiggle').style.left;
function myMoveFunction() {
//Keep clearing and setting the timeout event as long as the mouse is in motion.
//When the mouse stops, the timeout event will fire.
if (typeof touchTimeout == 'undefined') {
touchTimeout = setTimeout(myTimeOut, 50);
} else {
clearTimeout(touchTimeout);
touchTimeout = setTimeout(myTimeOut, 50);
}
//If the mouse is in motion, clear all jiggling events
if (typeof jigLeft !== 'undefined') clearTimeout(jigLeft);
if (typeof jigRight !== 'undefined') clearTimeout(jigRight);
if (typeof jigZero !== 'undefined') clearTimeout(jigZero);
console.clear();
}
function myTimeOut() {
//set up all jiggling events
setTimeout(jigLeft(), 1);
setTimeout(jigRight(), 50);
setTimeout(jigZero(), 99);
}
function jigLeft() {
jLeft = '45px';
console.log('Move Left: ' + jLeft);
}
function jigRight() {
jLeft = '55px';
console.log('Move Right: ' + jLeft);
}
function jigZero() {
jLeft = '50px';
console.log('Move Zero: ' + jLeft);
}
DIV#jiggle {
position: absolute;
left: 50px;
top: 10px;
width: 500px;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id='jiggle' onmousemove="myMoveFunction()">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed id libero a enim semper bibendum. Suspendisse sodales vulputate posuere. Nulla ac blandit neque, ultricies molestie eros. Donec mauris dolor, rhoncus ac varius sit amet, condimentum sed libero.
Nunc pellentesque quam odio, sit amet vulputate justo blandit sit amet. Sed lorem eros, aliquet at ex quis, cursus gravida urna. Aliquam erat volutpat. Suspendisse rhoncus vulputate nisi non ornare. Proin tincidunt sollicitudin elit, eget aliquam
nisi bibendum at. Duis eget lectus nisi. Praesent nec purus efficitur, pharetra felis sit amet, varius magna. Donec eu justo pretium metus sagittis congue id et lacus. Fusce posuere lacinia nulla a elementum. Nulla consequat mauris orci, ullamcorper
viverra arcu tincidunt sed. Morbi a sem porta est tincidunt semper eu sit amet quam. Integer placerat non risus et elementum. Phasellus eu orci viverra, aliquet est id, condimentum leo. Nunc ac interdum nunc. Morbi at risus nunc. Morbi semper turpis
elit, vel lacinia elit congue id. Maecenas cursus, tellus condimentum pulvinar viverra, ante orci placerat erat, vitae pharetra urna neque quis sem. Nullam non sollicitudin ante, at iaculis sem. Mauris sagittis eros dolor, vitae tempus libero gravida
in. Suspendisse et placerat urna, sed tincidunt nulla. Nam tincidunt pulvinar nisi in condimentum. Sed sem ante, scelerisque eget nulla vitae, elementum mattis turpis. Vestibulum in imperdiet risus. Vestibulum aliquam augue nec tristique pretium.
Nullam vestibulum, felis ut iaculis interdum, ante enim suscipit justo, ac consequat lacus nulla vel turpis. Sed lacinia, leo vel hendrerit aliquet, elit lectus tempor augue, tincidunt condimentum turpis erat eget ipsum. Nam lectus nibh, laoreet sed
accumsan nec, ullamcorper suscipit lectus. Cras faucibus in elit vitae interdum. Morbi vulputate sapien lacus, vel aliquet erat posuere nec. Suspendisse non nibh sapien. Nullam pulvinar diam a aliquam placerat. Donec porttitor commodo nulla, vel egestas
libero facilisis sit amet. Donec eget justo pretium, sagittis ligula in, aliquam orci. Pellentesque ornare purus ut nisi accumsan vehicula. Sed imperdiet dictum odio, in tempor diam rhoncus ut. Mauris vel urna vel turpis cursus facilisis. Suspendisse
eget posuere dolor, eget vulputate massa. Mauris eget ante ac ante accumsan luctus. Curabitur imperdiet condimentum felis, eget faucibus nisl dapibus eu. Curabitur aliquet consectetur dolor, dapibus hendrerit lectus bibendum in. Lorem ipsum dolor
sit amet, consectetur adipiscing elit. Ut ligula nisl, malesuada at tortor at, faucibus maximus dolor. Vivamus condimentum mi at est lobortis, quis pulvinar justo consectetur. Cras eu nunc quis velit placerat consectetur. Quisque dui felis, placerat
id tempor eget, maximus ut lacus. In ante lacus, luctus vel turpis lobortis, dictum dictum massa. Curabitur rutrum dolor ut tincidunt venenatis. Vivamus aliquam ante quam, non cursus enim sollicitudin vitae. Sed rhoncus metus tempor scelerisque interdum.
Pellentesque metus mi, varius ac purus et, euismod commodo purus. Donec eu purus consequat, gravida ipsum quis, efficitur eros. Nulla ornare turpis et nulla consectetur feugiat.
</div>
</body>
</html>
In case you're looking for the fixed code, here it is
HTML
<div id='jiggle' onmousemove="myMoveFunction()">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed id libero a enim semper bibendum. Suspendisse sodales vulputate posuere. Nulla ac blandit neque, ultricies molestie eros. Donec mauris dolor, rhoncus ac varius sit amet, condimentum sed libero. Nunc pellentesque quam odio, sit amet vulputate justo blandit sit amet. Sed lorem eros, aliquet at ex quis, cursus gravida urna. Aliquam erat volutpat. Suspendisse rhoncus vulputate nisi non ornare. Proin tincidunt sollicitudin elit, eget aliquam nisi bibendum at. Duis eget lectus nisi. Praesent nec purus efficitur, pharetra felis sit amet, varius magna. Donec eu justo pretium metus sagittis congue id et lacus. Fusce posuere lacinia nulla a elementum. Nulla consequat mauris orci, ullamcorper viverra arcu tincidunt sed. Morbi a sem porta est tincidunt semper eu sit amet quam.
</div>
CSS
DIV#jiggle{
position:absolute;
left:50px;
top:10px;
width:500px;
}
JS
var jLeft = document.getElementById('jiggle').style.left;
function myMoveFunction(){
//Keep clearing and setting the timeout event as long as the mouse is in motion.
//When the mouse stops, the timeout event will fire.
if (typeof touchTimeout == 'undefined') {
touchTimeout = setTimeout(myTimeOut, 50);
} else {
clearTimeout(touchTimeout);
touchTimeout = setTimeout(myTimeOut, 50);
}
//If the mouse is in motion, clear all jiggling events
if (typeof jigLeft !== 'undefined') clearTimeout(jigLeft);
if (typeof jigRight !== 'undefined') clearTimeout(jigRight);
if (typeof jigZero !== 'undefined') clearTimeout(jigZero);
console.clear();
}
function myTimeOut(){
//set up all jiggling events
setTimeout(jigLeft, 1);
setTimeout(jigRight, 50);
setTimeout(jigZero, 99);
}
function jigLeft() {
document.getElementById('jiggle').style.left ='45px';
console.log('Move Left: ' + jLeft);
}
function jigRight() {
document.getElementById('jiggle').style.left = '55px';
console.log('Move Right: ' + jLeft);
}
function jigZero(){
document.getElementById('jiggle').style.left = '50px';
console.log('Move Zero: ' + jLeft);
}
As pointed out by #Quentin, there's a lot of things wrong with your code. This answer fixes most of them.
Here's a fiddle:
https://codepen.io/faisalrashid/pen/dybVvdQ
Problem 1
document.getElementById('jiggle')
This throws an exception. The element does not exist in the DOM at the time you run it.
Problem 2
var jLeft = document.getElementById('jiggle').style.left;
This copies the value. It does not create a reference.
Later, when you assign to jLeft you change only the value of the variable. Not the value of the property.
Problem 3
setTimeout(jigLeft(), 1);
You're calling jigLeft immediately and assigning the return value as the function to run later. It doesn't return a function.
Problem 4
(typeof jigLeft !== 'undefined')
This will never be undefined. It will always be a function.
Related
If anyone remembers the Apple product page for the cylindrical Mac Pro, the site had a feature that had each layer of the Mac Pro slide off as you continue to scroll down.
I have been looking everywhere for possible indication as to how to code this dynamic page, but I have been unsuccessful.
You can create the animation with CSS class and #keyframes rule, then add the class to your element once it reaches the scroll threshold you set in the conditional within a scroll event listener. Below is not an exact replica of Apples animation, however it will illustrate how one could achieve this with vanilla JS and CSS animations tween.
I further explain how I have done this in the code below...
// get the selector nodes we wish to animate
const images = document.querySelectorAll('#main img');
// create a function and pass in the selector node and the top
// fold position (how far off the top fold you wish to slideOut) as a param
const slideOut = (images, foldPos) => {
// run each element in the nodeList through a loop
images.forEach((el) => {
// add a scroll eventlistener on the window
window.addEventListener('scroll', () => {
// define each elements position using the forEach loop
// el.getBoundingClientRect and get the top position
let elPos = el.getBoundingClientRect().top;
// get the unique ID that was set in the elements we wish to animate
// we'll use this to get the element selector using its ID
let elId = el.id;
// conditional that checks the top position in
// relation to the top fold of page, this will pass
// as a parameter in the main function slideOut()
if (elPos < foldPos) {
// lets target the id selector of the animated element
// that has reached the set threshhold
let slideEl = document.getElementById(el.id);
// lets add our class to the element so the CSS can
// do its animation using an #keyframes rule
// * see the css code `.slideoff` and its `#keyframes` `slideoff` rule
slideEl.className = 'slideoff';
// optional, remove element from display using a timeOut()
// set to work in conjuntion with the CSS animation duration
setTimeout(() => slideEl.style.display = 'none', 500)
}
})
})
}
// call function and pass in the paramter (nodeList, topFoldThreshold)
slideOut(images, 125)
#main {
position: relative;
}
p {
max-width: 50%;
}
#main img {
width: 50%;
height: 50%;
}
.slideoff {
position: relative;
animation: slideoff 1s ease-in-out;
left: 50;
opacity: 0;
height: 50%;
width: 50%;
}
#keyframes slideoff {
0% {
opacity: 1;
top: 0;
left: 0;
}
50% {
opacity: 0;
top: 500px;
}
100% {
left: 10000px;
}
}
SCROLL DOWN
<p> Sed augue metus, iaculis non congue a, convallis ut sem. Etiam pulvinar est lorem, non fringilla velit aliquet sit amet. Cras vel eleifend nisl. Suspendisse vitae elit efficitur orci lacinia porta. Aliquam sed quam id velit mattis molestie. Aliquam id
ultricies velit, eu dictum purus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ac porttitor tortor.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque nec interdum elit. Praesent eu dui mi. Vestibulum facilisis elit in mi convallis, eget consectetur arcu vehicula. Pellentesque ultricies elit tellus, non ultrices erat volutpat at.
Ut dui dolor, tempor nec porta at, aliquet eget urna. Etiam congue vestibulum ante. In et diam sapien. Suspendisse mattis eros eget ex convallis, nec tempor risus lobortis. Quisque ullamcorper libero arcu, quis ultrices magna aliquet non. Donec et ornare
eros. Proin viverra metus enim, vitae egestas tellus lacinia eu. Aenean molestie sollicitudin augue, placerat cursus enim consequat eu. Aenean semper pellentesque augue. Phasellus vel dictum neque. Donec vel imperdiet nisi. Ut sapien turpis, mattis
quis lobortis ut, placerat eget metus.
</p>
<div id="main">
<img id="first" src="https://www.pixelstalk.net/wp-content/uploads/2016/07/HD-Peaceful-Background.jpg">
<p>Sed augue metus, iaculis non congue a, convallis ut sem. Etiam pulvinar est lorem, non fringilla velit aliquet sit amet. Cras vel eleifend nisl. Suspendisse vitae elit efficitur orci lacinia porta. Aliquam sed quam id velit mattis molestie. Aliquam
id ultricies velit, eu dictum purus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ac porttitor tortor.
</p>
<img id="second" src="https://www.pixelstalk.net/wp-content/uploads/2016/07/HD-Peaceful-Backgrounds.jpg">
<p>Ut vel mi facilisis, mattis diam sit amet, consectetur elit. Nam mollis vestibulum enim, posuere blandit sem. Quisque euismod odio est, vel maximus metus efficitur quis. Morbi ac dignissim massa, in egestas ex. Proin efficitur feugiat libero nec ornare.
Duis vel sapien molestie, efficitur lacus et, ullamcorper tortor. Vestibulum sodales viverra porta. Aenean tincidunt velit nisi, non tempus odio vulputate ut. Praesent accumsan urna et turpis pharetra, vitae consequat diam tempor. Vestibulum sed odio
sem.
</p>
<img id="third" src="https://www.pixelstalk.net/wp-content/uploads/2016/07/HD-Peaceful-Images.jpg">
<p>Aliquam sed quam id velit mattis molestie. Aliquam id ultricies velit, eu dictum purus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ac porttitor tortor.
</p>
<img id="fourth" src="https://www.pixelstalk.net/wp-content/uploads/2016/07/HD-Peaceful-Picture.jpg">
<p>Proin viverra metus enim, vitae egestas tellus lacinia eu. Aenean molestie sollicitudin augue, placerat cursus enim consequat eu. Aenean semper pellentesque augue. Phasellus vel dictum neque. Donec vel imperdiet nisi. Ut sapien turpis, mattis quis lobortis
ut, placerat eget metus. Vestibulum neque ante, lobortis id accumsan a, pellentesque quis nisl. Quisque ac ante ut arcu faucibus molestie sit amet ac dui. Fusce elit nisi, ullamcorper eu eros eget, tempus suscipit purus. Aenean sed nibh urna. Vestibulum
vehicula dapibus ante at viverra. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed purus urna, condimentum sed dictum quis, blandit vel tellus. Sed pretium elit eros, sed congue lectus dictum in. In auctor diam sit amet augue congue
blandit. Vivamus ut enim in mauris venenatis vulputate. Nulla felis tellus, vestibulum at hendrerit auctor, porta a purus. Aenean ac ante vitae turpis rutrum hendrerit eget nec ante. Phasellus bibendum egestas nisi, ac aliquet mi sollicitudin ac.
Sed bibendum quam et mi bibendum ultricies. Pellentesque nec ante viverra, dictum turpis ac, sollicitudin dolor. Vestibulum ut interdum neque. Cras aliquet porta dui, sit amet luctus mauris egestas et. Aliquam quis imperdiet sapien, sollicitudin facilisis diam. Fusce at commodo sapien. Nam at erat nisl. Sed placerat risus vel consequat congue. Nam ultricies ultricies suscipit. Nunc ultrices, dui ut blandit porta, lorem sem dapibus diam, vitae porta tellus nisi ac nibh. Cras pulvinar laoreet dignissim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae;
</p>
<p> Sed augue metus, iaculis non congue a, convallis ut sem. Etiam pulvinar est lorem, non fringilla velit aliquet sit amet. Cras vel eleifend nisl. Suspendisse vitae elit efficitur orci lacinia porta. Aliquam sed quam id velit mattis molestie. Aliquam id ultricies velit, eu dictum purus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus ac porttitor tortor.
</p>
</div>
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>
I have an element at the top of the screen with position:sticky; and a JS scroll eventlistener to add a stuck class when the element is stuck (scroll Y is bigger than 0).
This stuck makes an element (that has CSS transition) inside the sticky element to reduce in height.
When you scroll very slowly, this change in height makes the scrollY jump back to zero and removes the stuck class, and this creates a jolty scrolling loop which is infinite until you scroll faster and outscroll the issue.
How can I make this smooth when using position: sticky, you can see it live here:
https://jsfiddle.net/27rzba5v/
This is happening because you're changing the element's height, which is affecting the box model and thus the dimensions of your document. A simple fix would be to instead use a transform on .wrap instead of transitioning its height. It's better to animate transforms and opacity as it can be handled by the GPU rather than by making the browser repaint.
var lastScrollY = 0;
var ticking = false;
window.addEventListener('scroll', function(e) {
lastScrollY = window.scrollY;
if ( ! ticking ) {
window.requestAnimationFrame(function() {
console.log( lastScrollY );
if ( lastScrollY > 0 ) {
document.body.classList.add('stuck');
} else {
document.body.classList.remove('stuck');
}
ticking = false;
});
ticking = true;
}
} );
body {
margin: 0;
}
.wrap {
background: #666;
text-align: center;
position: sticky;
top: 0;
transition: 0.5s; /* Move transition here */
transform-origin: top left; /* Make sure transition happens from the top left */
}
.block {
width: 80px;
height: 80px;
background: red;
display: block;
}
.stuck .wrap { /* Transform wrap instead of block */
transform: scaleY(.5); /* Change scale instead of height */
}
<div class="wrap">
<span class="block"></span>
</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ac lorem a metus tincidunt eleifend id in odio. Nam malesuada hendrerit tristique. Pellentesque id ornare elit, ac lobortis metus. Sed iaculis et nisi et consectetur. Proin pellentesque metus mi, quis fringilla mauris pulvinar et. Vivamus pharetra elit ligula, eu consectetur magna consequat nec. Donec sed enim sit amet augue malesuada varius id a libero. Nullam nec ante id justo elementum congue quis in purus. Integer finibus cursus volutpat. Donec non laoreet ipsum.
Maecenas id venenatis velit, eu feugiat dolor. Vestibulum malesuada erat ut turpis mattis vehicula. Vestibulum sem leo, cursus quis lacinia eu, tincidunt eu velit. Nulla odio elit, tristique vel bibendum vitae, placerat nec eros. Proin auctor id leo sed rutrum. Proin convallis erat sit amet neque aliquam vestibulum. Ut sodales vel nisl eu imperdiet.
Donec a porttitor dui, vitae ullamcorper nibh. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam non elit eu elit blandit hendrerit id ut eros. Duis sagittis elementum ligula eu venenatis. Aenean nunc mauris, dignissim ut venenatis ac, pharetra eget magna. Curabitur elementum enim sed pharetra rhoncus. Praesent sodales at ex at consectetur. Curabitur sed dictum mi, ut eleifend arcu. Nam feugiat risus quis congue porttitor. Maecenas vehicula lorem ultrices ante sollicitudin, placerat sollicitudin dolor fermentum. Aliquam arcu turpis, faucibus vel placerat a, molestie vel lectus. Sed condimentum euismod tincidunt. Mauris odio tortor, luctus id eleifend vitae, aliquet ut libero. Vestibulum vitae placerat turpis. Duis nec facilisis eros. Morbi ipsum arcu, tempus ac massa nec, mollis aliquet lacus.
Phasellus maximus eros quis massa maximus, et mattis tellus cursus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras id lacus interdum, cursus diam ut, posuere purus. Duis non vestibulum nulla, vitae egestas elit. Phasellus venenatis libero in nunc lobortis tempor in vel orci. Praesent varius lacus eleifend, pretium lectus ut, pulvinar arcu. Nunc ornare dolor velit, id pulvinar urna semper eget. Aenean finibus dui vitae dolor ullamcorper finibus. Cras consequat viverra tellus, a accumsan sem viverra sed. Nulla felis tortor, laoreet non tincidunt elementum, tempus ac risus. Sed nibh nisl, ultrices vel iaculis in, fringilla at ipsum. Curabitur metus ligula, tincidunt non arcu eget, ultricies pellentesque ligula. Duis id est posuere, molestie urna non, gravida tortor. Praesent lacinia erat ac diam sagittis, quis faucibus nunc blandit.
Fusce aliquet tincidunt turpis, ut consequat metus consectetur at. Nunc volutpat semper enim, ut finibus orci luctus in. Mauris pharetra consectetur arcu sed pulvinar. Sed cursus fermentum velit, mattis varius ante commodo ac. Fusce erat mauris, sagittis quis eros vitae, consectetur venenatis nibh. Fusce porttitor tortor lectus, at efficitur diam dictum et. Quisque et suscipit sem. Mauris vulputate orci tellus, non efficitur eros blandit ut. Donec eget hendrerit elit.
If you must transition the element's height then you could offset the effects of the dimensions changing by using a container as a buffer.
var lastScrollY = 0;
var ticking = false;
window.addEventListener('scroll', function(e) {
lastScrollY = window.scrollY;
if ( ! ticking ) {
window.requestAnimationFrame(function() {
console.log( lastScrollY );
if ( lastScrollY > 0 ) {
document.body.classList.add('stuck');
} else {
document.body.classList.remove('stuck');
}
ticking = false;
});
ticking = true;
}
} );
body {
margin: 0;
}
.wrapoffset { /* Make this element sticky instead */
height: 80px;
position: sticky;
top: 0;
width: 100%;
}
.wrap {
background: #666;
text-align: center;
width: 100%;
}
.block {
height: 80px;
width: 80px;
background: red;
display: block;
transition: 0.5s;
}
.stuck .block {
height: 40px;
}
<div class="wrapoffset"> <!-- new element -->
<div class="wrap">
<span class="block"></span>
</div>
</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ac lorem a metus tincidunt eleifend id in odio. Nam malesuada hendrerit tristique. Pellentesque id ornare elit, ac lobortis metus. Sed iaculis et nisi et consectetur. Proin pellentesque metus mi, quis fringilla mauris pulvinar et. Vivamus pharetra elit ligula, eu consectetur magna consequat nec. Donec sed enim sit amet augue malesuada varius id a libero. Nullam nec ante id justo elementum congue quis in purus. Integer finibus cursus volutpat. Donec non laoreet ipsum.
Maecenas id venenatis velit, eu feugiat dolor. Vestibulum malesuada erat ut turpis mattis vehicula. Vestibulum sem leo, cursus quis lacinia eu, tincidunt eu velit. Nulla odio elit, tristique vel bibendum vitae, placerat nec eros. Proin auctor id leo sed rutrum. Proin convallis erat sit amet neque aliquam vestibulum. Ut sodales vel nisl eu imperdiet.
Donec a porttitor dui, vitae ullamcorper nibh. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam non elit eu elit blandit hendrerit id ut eros. Duis sagittis elementum ligula eu venenatis. Aenean nunc mauris, dignissim ut venenatis ac, pharetra eget magna. Curabitur elementum enim sed pharetra rhoncus. Praesent sodales at ex at consectetur. Curabitur sed dictum mi, ut eleifend arcu. Nam feugiat risus quis congue porttitor. Maecenas vehicula lorem ultrices ante sollicitudin, placerat sollicitudin dolor fermentum. Aliquam arcu turpis, faucibus vel placerat a, molestie vel lectus. Sed condimentum euismod tincidunt. Mauris odio tortor, luctus id eleifend vitae, aliquet ut libero. Vestibulum vitae placerat turpis. Duis nec facilisis eros. Morbi ipsum arcu, tempus ac massa nec, mollis aliquet lacus.
Phasellus maximus eros quis massa maximus, et mattis tellus cursus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras id lacus interdum, cursus diam ut, posuere purus. Duis non vestibulum nulla, vitae egestas elit. Phasellus venenatis libero in nunc lobortis tempor in vel orci. Praesent varius lacus eleifend, pretium lectus ut, pulvinar arcu. Nunc ornare dolor velit, id pulvinar urna semper eget. Aenean finibus dui vitae dolor ullamcorper finibus. Cras consequat viverra tellus, a accumsan sem viverra sed. Nulla felis tortor, laoreet non tincidunt elementum, tempus ac risus. Sed nibh nisl, ultrices vel iaculis in, fringilla at ipsum. Curabitur metus ligula, tincidunt non arcu eget, ultricies pellentesque ligula. Duis id est posuere, molestie urna non, gravida tortor. Praesent lacinia erat ac diam sagittis, quis faucibus nunc blandit.
Fusce aliquet tincidunt turpis, ut consequat metus consectetur at. Nunc volutpat semper enim, ut finibus orci luctus in. Mauris pharetra consectetur arcu sed pulvinar. Sed cursus fermentum velit, mattis varius ante commodo ac. Fusce erat mauris, sagittis quis eros vitae, consectetur venenatis nibh. Fusce porttitor tortor lectus, at efficitur diam dictum et. Quisque et suscipit sem. Mauris vulputate orci tellus, non efficitur eros blandit ut. Donec eget hendrerit elit.
If you want to optimize the performance even more you can look into using IntersectionObserver with a polyfill instead of listening for events on scroll.
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);
I want to make an scrollable div that scrolls down when the user hovers another div. The content inside the scrollable div will change (it's gonna be only text) so I can't set up an absolute height value for that DIV, this is why div's height is 'auto'.
I have come into a solution that works when I set up an absolut height value on '.post-right' div's CSS, but it returns no value if div's height is 'auto' just I like I need it to be.
I've tried putting jQuery block of code on the (document).ready function as well, result is exactly the same.
Any ideas? Thank's in advance.
HTML CODE:
<div class="post-right-cont">
<div class="post-right">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut aliquam libero ut nisi consectetur pretium. Donec auctor auctor mauris, in tempor mauris blandit et. Aliquam nibh felis, tincidunt a auctor vel, feugiat at enim. Duis faucibus porta mi ut fringilla. Pellentesque eleifend erat a tellus aliquam sodales. Nullam lorem tellus, accumsan quis laoreet id, luctus et urna. Curabitur eleifend tellus non orci ullamcorper adipiscing. Integer est tellus, bibendum at ultricies a, viverra at orci. Curabitur porta tincidunt nunc, at placerat ipsum malesuada et. Vivamus et est purus, id suscipit tortor. Curabitur turpis metus, dapibus et consectetur non, tincidunt in est. Vestibulum nisl libero, sodales sit amet auctor eu, congue at velit. Vivamus et erat massa, nec viverra risus. Fusce iaculis dolor vel augue ornare accumsan.<br/><br/>
Quisque a metus arcu. Suspendisse hendrerit commodo justo in sagittis. Phasellus a scelerisque quam. Fusce lacinia lacinia justo. Duis id hendrerit enim. Sed eleifend eros et turpis rutrum consectetur. Maecenas pulvinar volutpat odio, non imperdiet augue pretium quis. Proin rutrum, est vitae auctor dapibus, diam dolor rutrum libero, sed feugiat metus turpis sed mauris. Sed eleifend dolor arcu. Cras laoreet nibh convallis magna congue sit amet consequat tortor porttitor. Duis et mauris non lorem consectetur luctus. Aliquam mollis sem sit amet tortor iaculis egestas. Duis tincidunt pellentesque leo, nec vulputate turpis dapibus sit amet. Aliquam rhoncus luctus orci, et aliquet eros porttitor in. Etiam arcu eros, viverra tristique tincidunt vel, facilisis et mauris.<br/><br/>
Morbi congue auctor luctus. Sed nisl dui, varius id ornare et, tincidunt sit amet enim. Aliquam egestas ultricies nisl, id condimentum erat fermentum quis. Morbi lectus nunc, aliquam volutpat egestas quis, iaculis a nulla. Pellentesque fermentum mauris at libero pulvinar viverra. Aliquam a ante orci, a luctus purus. Vivamus ut est ut mauris pulvinar mattis ac et magna. Aenean congue dictum lectus at suscipit. Suspendisse interdum, erat pulvinar gravida vulputate, mi mauris feugiat justo, at euismod augue sapien eu sapien. Praesent at quam purus. In hac habitasse platea dictumst. Fusce vel tellus a massa tempor volutpat a at magna. In eu enim odio. Quisque bibendum tortor est. Phasellus a scelerisque quam. Fusce lacinia lacinia justo. Duis id hendrerit enim. Sed eleifend eros et turpis rutrum consectetur. Maecenas pulvinar volutpat odio, non imperdiet augue pretium quis. Proin rutrum, est vitae auctor dapibus, diam dolor rutrum libero, sed feugiat metus turpis sed mauris. Sed eleifend dolor arcu.
</div>
<div class="scroll-down"></div>
<div class="scroll-up"></div>
</div>
CSS:
.post-right-cont {
width: 540px;
height: auto;
overflow: hidden;
position: relative;
}
.post-right {
position: absolute;
top: 0;
left: 20px;
height: auto;
width: 480px;
padding-top: 40px;
}
jQuery:
$(window).load(function() {
// SCROLL POST
// EDIT - post-right-cont height was set up before. I just past it here now.
var wHeight = $(window).height();
$('.post-right-cont').css('height', wHeight - 36);
if ($('div.post-right').height() > $('.post-right-cont').height()) {
$('div.scroll-down').hover(function() {animateContent('down');}, function() {
$('div.post-right').stop();
});
$('div.scroll-up').hover(function() {animateContent('up');}, function() {
$('div.post-right').stop();
});
}
function animateContent(direction) {
var containerHeight = $('.post-right-cont').height();
var textHeight = $('div.post-right').height();
var animationOffset = textHeight - containerHeight;
if (direction == "up") {
animationOffset = 0;
}
$('div.post-right').animate({"top" : -animationOffset + "px" }, 8500);
}
});
$('.post-right-cont').height() will return a value 0 because you have wrapped just one item inside, which have absolute positioning, so the absolute positioned element will not increase the size of .post-right-cont. So jQuery returns the correct value - 0. The height of .post-right will not increase the height of .post-right-cont because absolute positioned elements do not increase the height or width of their wrapping tag.