Related
This Codepen script uses SCSS to acheive animation to headings during scrolling of the webpage.
I converted it to CSS format and it does not seems to be working when added to a website - W3Spaces Page Output. Is it possible to get the effect with CSS?
<!DOCTYPE html>
<html>
<head><style>
h1.splitting {
color: #84a8ff;
}
h1.splitting .char {
transition: transform 0.3s cubic-bezier(0.3, 0, 0.3, 1), opacity 0.3s linear;
transition-delay: calc(20ms * var(--char-index));
}
h1.splitting[data-scroll="out"] .char {
opacity: 0.1;
transform: translateY(0.25em);
}
</style>
<script type="text/javascript">
Splitting();
ScrollOut({
targets: 'h1,h2,h3,h4'
});
</script>
</head>
<div class="page">
<h1 data-splitting>ScrollOut + Splitting.js</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent bibendum, lorem vel tincidunt imperdiet, nibh elit laoreet felis, a bibendum nisl tortor non orci. Donec pretium fermentum felis, quis aliquet est rutrum ut. Integer quis massa ut lacus viverra pharetra in eu lacus. Aliquam tempus odio adipiscing diam pellentesque rhoncus. Curabitur a bibendum est. Mauris vehicula cursus risus id luctus. Curabitur accumsan venenatis nibh, non egestas ipsum vulputate ac. Vivamus consectetur dolor sit amet enim aliquet eu scelerisque ipsum hendrerit. Donec lobortis suscipit vestibulum. Nullam luctus pellentesque risus in ullamcorper. Nam neque nunc, mattis vitae ornare ut, feugiat a erat. Ut tempus iaculis augue vel pellentesque.</p>
<h1 data-splitting>Triggering Splitting Animations on Scroll</h1>
<p>Vestibulum nunc massa, gravida quis porta nec, feugiat id metus. Nunc ac arcu dolor, quis vestibulum leo. Cras viverra mollis ipsum, non rhoncus lectus aliquam et. Morbi faucibus purus sit amet lacus aliquet elementum. Donec sit amet posuere enim. Cras in eros id tortor fringilla ultricies. Mauris faucibus ullamcorper velit, pulvinar varius odio eleifend eu. Quisque id odio metus. Morbi adipiscing ultricies posuere. Pellentesque elementum porttitor eros in molestie. Maecenas ut leo quis nisi tempor tincidunt.</p>
<p>Donec nunc ligula, vulputate quis mollis eu, interdum quis libero. Donec nulla ante, facilisis sit amet vulputate at, tincidunt a velit. Maecenas vestibulum, nulla sed tincidunt viverra, lorem turpis aliquam urna, ut pretium orci purus consequat augue. Etiam a enim orci, vitae pulvinar odio. In elit urna, tincidunt a pellentesque et, scelerisque at nibh. Sed nec est sapien. Aliquam ullamcorper eros eu quam ultrices vel faucibus eros interdum. Etiam mattis eleifend sapien, eu iaculis massa feugiat sed. Aliquam erat volutpat. Vivamus facilisis ultricies eros, a pretium purus mollis id. Sed dapibus elit ut neque rutrum dignissim. Nulla eros nisl, venenatis quis rhoncus sit amet, molestie nec nisl. Pellentesque vel neque sapien, et sagittis nulla.</p>
<h1 data-splitting>Add a <code>transition</code> to your splits (<code>.char</code> for example)</h1>
<p>Aliquam eu iaculis mauris. Etiam arcu lectus, imperdiet sit amet volutpat vitae, commodo sed nibh. Fusce faucibus tempor cursus. Donec ut ligula tortor. Maecenas malesuada, diam vitae pharetra dictum, erat ante iaculis risus, sed sollicitudin nisl nisl vel metus. Nulla libero augue, convallis nec luctus id, iaculis nec urna. Cras vitae mi ut augue ultricies tempus.</p>
<p>Vestibulum euismod vehicula sollicitudin. Duis nibh justo, rhoncus ac ullamcorper nec, rutrum sit amet leo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum varius posuere nisi sed aliquet. Etiam dolor nisi, placerat vel congue tempus, posuere sed erat. Phasellus turpis eros, molestie sed consequat in, pretium at erat. In sed faucibus metus. Vestibulum fermentum libero nec eros fermentum dapibus. Duis nec libero eros. Pellentesque magna ligula, sagittis dictum fringilla at, posuere porttitor sem. Donec aliquam, ipsum quis pulvinar dapibus, augue sem viverra sapien, nec tempus odio nulla ac metus. Nunc ut augue mi, nec consequat urna.</p>
<h1 data-splitting>Target <code>[data-scroll="out"]</code> for the default state</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent bibendum, lorem vel tincidunt imperdiet, nibh elit laoreet felis, a bibendum nisl tortor non orci. Donec pretium fermentum felis, quis aliquet est rutrum ut. Integer quis massa ut lacus viverra pharetra in eu lacus. Aliquam tempus odio adipiscing diam pellentesque rhoncus. Curabitur a bibendum est. Mauris vehicula cursus risus id luctus. Curabitur accumsan venenatis nibh, non egestas ipsum vulputate ac. Vivamus consectetur dolor sit amet enim aliquet eu scelerisque ipsum hendrerit. Donec lobortis suscipit vestibulum. Nullam luctus pellentesque risus in ullamcorper. Nam neque nunc, mattis vitae ornare ut, feugiat a erat. Ut tempus iaculis augue vel pellentesque.</p>
<p>Vestibulum nunc massa, gravida quis porta nec, feugiat id metus. Nunc ac arcu dolor, quis vestibulum leo. Cras viverra mollis ipsum, non rhoncus lectus aliquam et. Morbi faucibus purus sit amet lacus aliquet elementum. Donec sit amet posuere enim. Cras in eros id tortor fringilla ultricies. Mauris faucibus ullamcorper velit, pulvinar varius odio eleifend eu. Quisque id odio metus. Morbi adipiscing ultricies posuere. Pellentesque elementum porttitor eros in molestie. Maecenas ut leo quis nisi tempor tincidunt.</p>
<h1 data-splitting>That's about it!</h1>
<p>Donec nunc ligula, vulputate quis mollis eu, interdum quis libero. Donec nulla ante, facilisis sit amet vulputate at, tincidunt a velit. Maecenas vestibulum, nulla sed tincidunt viverra, lorem turpis aliquam urna, ut pretium orci purus consequat augue. Etiam a enim orci, vitae pulvinar odio. In elit urna, tincidunt a pellentesque et, scelerisque at nibh. Sed nec est sapien. Aliquam ullamcorper eros eu quam ultrices vel faucibus eros interdum. Etiam mattis eleifend sapien, eu iaculis massa feugiat sed. Aliquam erat volutpat. Vivamus facilisis ultricies eros, a pretium purus mollis id. Sed dapibus elit ut neque rutrum dignissim. Nulla eros nisl, venenatis quis rhoncus sit amet, molestie nec nisl. Pellentesque vel neque sapien, et sagittis nulla.</p>
<p>Aliquam eu iaculis mauris. Etiam arcu lectus, imperdiet sit amet volutpat vitae, commodo sed nibh. Fusce faucibus tempor cursus. Donec ut ligula tortor. Maecenas malesuada, diam vitae pharetra dictum, erat ante iaculis risus, sed sollicitudin nisl nisl vel metus. Nulla libero augue, convallis nec luctus id, iaculis nec urna. Cras vitae mi ut augue ultricies tempus.</p>
<h1 data-splitting>For real. It's easy!</h1>
<p>Vestibulum euismod vehicula sollicitudin. Duis nibh justo, rhoncus ac ullamcorper nec, rutrum sit amet leo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum varius posuere nisi sed aliquet. Etiam dolor nisi, placerat vel congue tempus, posuere sed erat. Phasellus turpis eros, molestie sed consequat in, pretium at erat. In sed faucibus metus. Vestibulum fermentum libero nec eros fermentum dapibus. Duis nec libero eros. Pellentesque magna ligula, sagittis dictum fringilla at, posuere porttitor sem. Donec aliquam, ipsum quis pulvinar dapibus, augue sem viverra sapien, nec tempus odio nulla ac metus. Nunc ut augue mi, nec consequat urna.</p>
</div>
<script>
Splitting();
ScrollOut({
targets: 'h1,h2,h3,h4'
});
</script>
</body>
</html>
However, I have changed the JS code to just target all the headings:
ScrollOut({
targets: 'h1,h2,h3,h4'
});
The SCSS also converted into CSS.
But the code is not working.
You missed external CSS and Js library call,
<link rel='stylesheet' href='https://unpkg.com/splitting/dist/splitting.css' type='text/css' />
<style>
h1.splitting {
color: #84a8ff;
}
h1.splitting .char {
transition: transform 0.3s cubic-bezier(0.3, 0, 0.3, 1), opacity 0.3s linear;
transition-delay: calc( 20ms * var(--char-index) );
}
h1.splitting[data-scroll=out] .char {
opacity: 0.1;
transform: translateY(0.25em);
}
</style>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://unpkg.com/splitting/dist/splitting.js"></script>
<script src="https://unpkg.com/scroll-out/dist/scroll-out.js"></script>
Then, use it's method/options
<script>
Splitting();
ScrollOut({
targets: '[data-splitting]'
});
</script>
you need to add these resources for it to work the way you want
EXTERNAL CSS
css resource
EXTERNAL JAVASCRIPT
js resource#1
js resource#2
I am trying to scroll a page down by 100px on page load using jQuery. I have this so far..
jQuery(window).load(function() {
window.scrollBy(0, 100);
});
body {
background:lightgray;
}
h1, h2 {
text-align:center;
}
.center {
text-align:center;
width:100%;
object-fit:cover;
height:200px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>
Title
</h1>
<h2>
Subtitle
</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque mollis quam in orci consequat, a lacinia leo ultricies. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus eu eros tellus. Maecenas suscipit ultricies vehicula. Proin viverra velit magna, id consequat urna varius non. Pellentesque dictum libero sed justo suscipit ullamcorper. Nulla mollis mi eu hendrerit viverra. Nam consectetur quam condimentum elit aliquam euismod. Vivamus convallis at urna a convallis. In imperdiet nulla et cursus ultricies. Vestibulum sed dictum justo.
</p>
<p>
Nullam quis iaculis nisi. Nullam in justo id tellus eleifend pharetra a a nunc. Suspendisse ante nunc, auctor in purus vitae, ultricies molestie neque. Etiam in ultricies erat, sit amet venenatis sem. In id nulla finibus, luctus massa a, efficitur libero. Ut mollis metus at eros faucibus, ut ornare lectus ultrices. Ut dignissim venenatis erat, vel tincidunt risus gravida quis. Nullam nec sem elit. Fusce vehicula lectus non augue dictum aliquet. Donec finibus eros ut ante fermentum semper vel et sem. Pellentesque purus magna, ornare at nisi non, blandit pulvinar libero. Fusce nisl lectus, aliquet et aliquet ac, consectetur in metus. Duis diam mi, malesuada mollis dignissim ac, semper id nisl. Integer pulvinar sem non condimentum congue.
</p>
<img class="center" src="http://lorempixel.com/g/600/300/">
<p>
Fusce quam sem, rutrum sit amet finibus at, varius ut sem. Integer venenatis vitae nisi suscipit commodo. Integer nec erat dui. Sed aliquet consectetur elit quis blandit. Mauris condimentum tortor arcu, ut vehicula elit euismod vel. Vestibulum non consectetur nunc, non ornare mi. Nulla eu maximus tortor. Ut velit dolor, ultrices at feugiat feugiat, condimentum a nisi. Vivamus at eleifend turpis. Pellentesque sed varius lorem, vitae eleifend ante. Donec id feugiat felis. Vestibulum id sagittis augue.
</p>
<p>
Fusce sit amet risus ligula. Phasellus facilisis, orci eu tempus venenatis, metus dolor euismod nulla, vitae pulvinar diam metus ac augue. Quisque auctor lectus vitae erat pretium, et scelerisque urna bibendum. Nunc efficitur ornare risus eget tincidunt. Aliquam sit amet ultrices nulla. Praesent eget tempus dolor. Cras molestie mi et consequat malesuada. Cras vel mattis purus. Fusce vel mattis urna, in semper sem. Maecenas convallis faucibus quam, eu fermentum nisl hendrerit sed. Duis ullamcorper mattis laoreet. Cras feugiat egestas diam, ut viverra dolor elementum ac. Ut ac odio purus. Maecenas eget malesuada urna, eu aliquam odio.
</p>
<p>
Nam et nulla sed lorem eleifend pretium at ultrices lorem. Duis viverra tristique posuere. Sed scelerisque odio et viverra molestie. Donec varius id neque in commodo. Proin dui ipsum, pharetra vitae quam vitae, blandit feugiat velit. Proin sed malesuada urna. Donec ut luctus leo, a fringilla lacus. Duis at leo lorem. Duis vestibulum tincidunt mi, ac varius risus scelerisque eget. Mauris ut hendrerit nunc. Aliquam porta, justo a sagittis faucibus, lacus dolor condimentum enim, nec laoreet odio dui quis elit.
</p>
<img class="center" src="http://lorempixel.com/g/600/299/">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque mollis quam in orci consequat, a lacinia leo ultricies. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus eu eros tellus. Maecenas suscipit ultricies vehicula. Proin viverra velit magna, id consequat urna varius non. Pellentesque dictum libero sed justo suscipit ullamcorper. Nulla mollis mi eu hendrerit viverra. Nam consectetur quam condimentum elit aliquam euismod. Vivamus convallis at urna a convallis. In imperdiet nulla et cursus ultricies. Vestibulum sed dictum justo.
</p>
<p>
Nullam quis iaculis nisi. Nullam in justo id tellus eleifend pharetra a a nunc. Suspendisse ante nunc, auctor in purus vitae, ultricies molestie neque. Etiam in ultricies erat, sit amet venenatis sem. In id nulla finibus, luctus massa a, efficitur libero. Ut mollis metus at eros faucibus, ut ornare lectus ultrices. Ut dignissim venenatis erat, vel tincidunt risus gravida quis. Nullam nec sem elit. Fusce vehicula lectus non augue dictum aliquet. Donec finibus eros ut ante fermentum semper vel et sem. Pellentesque purus magna, ornare at nisi non, blandit pulvinar libero. Fusce nisl lectus, aliquet et aliquet ac, consectetur in metus. Duis diam mi, malesuada mollis dignissim ac, semper id nisl. Integer pulvinar sem non condimentum congue.
</p>
<p>
Fusce quam sem, rutrum sit amet finibus at, varius ut sem. Integer venenatis vitae nisi suscipit commodo. Integer nec erat dui. Sed aliquet consectetur elit quis blandit. Mauris condimentum tortor arcu, ut vehicula elit euismod vel. Vestibulum non consectetur nunc, non ornare mi. Nulla eu maximus tortor. Ut velit dolor, ultrices at feugiat feugiat, condimentum a nisi. Vivamus at eleifend turpis. Pellentesque sed varius lorem, vitae eleifend ante. Donec id feugiat felis. Vestibulum id sagittis augue.
</p>
<p>
Fusce sit amet risus ligula. Phasellus facilisis, orci eu tempus venenatis, metus dolor euismod nulla, vitae pulvinar diam metus ac augue. Quisque auctor lectus vitae erat pretium, et scelerisque urna bibendum. Nunc efficitur ornare risus eget tincidunt. Aliquam sit amet ultrices nulla. Praesent eget tempus dolor. Cras molestie mi et consequat malesuada. Cras vel mattis purus. Fusce vel mattis urna, in semper sem. Maecenas convallis faucibus quam, eu fermentum nisl hendrerit sed. Duis ullamcorper mattis laoreet. Cras feugiat egestas diam, ut viverra dolor elementum ac. Ut ac odio purus. Maecenas eget malesuada urna, eu aliquam odio.
</p>
<img class="center" src="http://lorempixel.com/g/600/301/">
<p>
Nam et nulla sed lorem eleifend pretium at ultrices lorem. Duis viverra tristique posuere. Sed scelerisque odio et viverra molestie. Donec varius id neque in commodo. Proin dui ipsum, pharetra vitae quam vitae, blandit feugiat velit. Proin sed malesuada urna. Donec ut luctus leo, a fringilla lacus. Duis at leo lorem. Duis vestibulum tincidunt mi, ac varius risus scelerisque eget. Mauris ut hendrerit nunc. Aliquam porta, justo a sagittis faucibus, lacus dolor condimentum enim, nec laoreet odio dui quis elit.
</p>
I am getting a script error, can anyone see why?
jQuery load is different, window.onload is different
use this code
$(window).on("load", function() {
window.scrollBy(0, 500);
});
$(window).on("load", function() {
window.scrollBy(0, 500);
});
body {
background:lightgray;
}
h1, h2 {
text-align:center;
}
.center {
text-align:center;
width:100%;
object-fit:cover;
height:200px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>
Title
</h1>
<h2>
Subtitle
</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque mollis quam in orci consequat, a lacinia leo ultricies. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus eu eros tellus. Maecenas suscipit ultricies vehicula. Proin viverra velit magna, id consequat urna varius non. Pellentesque dictum libero sed justo suscipit ullamcorper. Nulla mollis mi eu hendrerit viverra. Nam consectetur quam condimentum elit aliquam euismod. Vivamus convallis at urna a convallis. In imperdiet nulla et cursus ultricies. Vestibulum sed dictum justo.
</p>
<p>
Nullam quis iaculis nisi. Nullam in justo id tellus eleifend pharetra a a nunc. Suspendisse ante nunc, auctor in purus vitae, ultricies molestie neque. Etiam in ultricies erat, sit amet venenatis sem. In id nulla finibus, luctus massa a, efficitur libero. Ut mollis metus at eros faucibus, ut ornare lectus ultrices. Ut dignissim venenatis erat, vel tincidunt risus gravida quis. Nullam nec sem elit. Fusce vehicula lectus non augue dictum aliquet. Donec finibus eros ut ante fermentum semper vel et sem. Pellentesque purus magna, ornare at nisi non, blandit pulvinar libero. Fusce nisl lectus, aliquet et aliquet ac, consectetur in metus. Duis diam mi, malesuada mollis dignissim ac, semper id nisl. Integer pulvinar sem non condimentum congue.
</p>
<img class="center" src="http://lorempixel.com/g/600/300/">
<p>
Fusce quam sem, rutrum sit amet finibus at, varius ut sem. Integer venenatis vitae nisi suscipit commodo. Integer nec erat dui. Sed aliquet consectetur elit quis blandit. Mauris condimentum tortor arcu, ut vehicula elit euismod vel. Vestibulum non consectetur nunc, non ornare mi. Nulla eu maximus tortor. Ut velit dolor, ultrices at feugiat feugiat, condimentum a nisi. Vivamus at eleifend turpis. Pellentesque sed varius lorem, vitae eleifend ante. Donec id feugiat felis. Vestibulum id sagittis augue.
</p>
<p>
Fusce sit amet risus ligula. Phasellus facilisis, orci eu tempus venenatis, metus dolor euismod nulla, vitae pulvinar diam metus ac augue. Quisque auctor lectus vitae erat pretium, et scelerisque urna bibendum. Nunc efficitur ornare risus eget tincidunt. Aliquam sit amet ultrices nulla. Praesent eget tempus dolor. Cras molestie mi et consequat malesuada. Cras vel mattis purus. Fusce vel mattis urna, in semper sem. Maecenas convallis faucibus quam, eu fermentum nisl hendrerit sed. Duis ullamcorper mattis laoreet. Cras feugiat egestas diam, ut viverra dolor elementum ac. Ut ac odio purus. Maecenas eget malesuada urna, eu aliquam odio.
</p>
<p>
Nam et nulla sed lorem eleifend pretium at ultrices lorem. Duis viverra tristique posuere. Sed scelerisque odio et viverra molestie. Donec varius id neque in commodo. Proin dui ipsum, pharetra vitae quam vitae, blandit feugiat velit. Proin sed malesuada urna. Donec ut luctus leo, a fringilla lacus. Duis at leo lorem. Duis vestibulum tincidunt mi, ac varius risus scelerisque eget. Mauris ut hendrerit nunc. Aliquam porta, justo a sagittis faucibus, lacus dolor condimentum enim, nec laoreet odio dui quis elit.
</p>
<img class="center" src="http://lorempixel.com/g/600/299/">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque mollis quam in orci consequat, a lacinia leo ultricies. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus eu eros tellus. Maecenas suscipit ultricies vehicula. Proin viverra velit magna, id consequat urna varius non. Pellentesque dictum libero sed justo suscipit ullamcorper. Nulla mollis mi eu hendrerit viverra. Nam consectetur quam condimentum elit aliquam euismod. Vivamus convallis at urna a convallis. In imperdiet nulla et cursus ultricies. Vestibulum sed dictum justo.
</p>
<p>
Nullam quis iaculis nisi. Nullam in justo id tellus eleifend pharetra a a nunc. Suspendisse ante nunc, auctor in purus vitae, ultricies molestie neque. Etiam in ultricies erat, sit amet venenatis sem. In id nulla finibus, luctus massa a, efficitur libero. Ut mollis metus at eros faucibus, ut ornare lectus ultrices. Ut dignissim venenatis erat, vel tincidunt risus gravida quis. Nullam nec sem elit. Fusce vehicula lectus non augue dictum aliquet. Donec finibus eros ut ante fermentum semper vel et sem. Pellentesque purus magna, ornare at nisi non, blandit pulvinar libero. Fusce nisl lectus, aliquet et aliquet ac, consectetur in metus. Duis diam mi, malesuada mollis dignissim ac, semper id nisl. Integer pulvinar sem non condimentum congue.
</p>
<p>
Fusce quam sem, rutrum sit amet finibus at, varius ut sem. Integer venenatis vitae nisi suscipit commodo. Integer nec erat dui. Sed aliquet consectetur elit quis blandit. Mauris condimentum tortor arcu, ut vehicula elit euismod vel. Vestibulum non consectetur nunc, non ornare mi. Nulla eu maximus tortor. Ut velit dolor, ultrices at feugiat feugiat, condimentum a nisi. Vivamus at eleifend turpis. Pellentesque sed varius lorem, vitae eleifend ante. Donec id feugiat felis. Vestibulum id sagittis augue.
</p>
<p>
Fusce sit amet risus ligula. Phasellus facilisis, orci eu tempus venenatis, metus dolor euismod nulla, vitae pulvinar diam metus ac augue. Quisque auctor lectus vitae erat pretium, et scelerisque urna bibendum. Nunc efficitur ornare risus eget tincidunt. Aliquam sit amet ultrices nulla. Praesent eget tempus dolor. Cras molestie mi et consequat malesuada. Cras vel mattis purus. Fusce vel mattis urna, in semper sem. Maecenas convallis faucibus quam, eu fermentum nisl hendrerit sed. Duis ullamcorper mattis laoreet. Cras feugiat egestas diam, ut viverra dolor elementum ac. Ut ac odio purus. Maecenas eget malesuada urna, eu aliquam odio.
</p>
<img class="center" src="http://lorempixel.com/g/600/301/">
<p>
Nam et nulla sed lorem eleifend pretium at ultrices lorem. Duis viverra tristique posuere. Sed scelerisque odio et viverra molestie. Donec varius id neque in commodo. Proin dui ipsum, pharetra vitae quam vitae, blandit feugiat velit. Proin sed malesuada urna. Donec ut luctus leo, a fringilla lacus. Duis at leo lorem. Duis vestibulum tincidunt mi, ac varius risus scelerisque eget. Mauris ut hendrerit nunc. Aliquam porta, justo a sagittis faucibus, lacus dolor condimentum enim, nec laoreet odio dui quis elit.
</p>
According to this answer on stackoverflow scrollHeight, clientHeight and offsetHeight all return different values.
scrollHeight
is a measurement of the height of an element's content including
content not visible on the screen due to overflow
clientHeight
returns the inner height of an element in pixels, including padding
but not the horizontal scrollbar height, border, or margin
offsetHeight
is a measurement which includes the element borders, the element
vertical padding, the element horizontal scrollbar (if present, if
rendered) and the element CSS height.
However when I tested these properties they returned identical values. This was true in Chrome, Firefox and IE. I included my test code for all 3 methods below. What am I doing wrong? Shouldn't they return different values?
scrollHeight value
"use strict"
console.log(document.querySelector('.testDiv').scrollHeight);
.testDiv {
background-color: red;
padding: 10px
}
<div class="testDiv">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse scelerisque quam a ultricies eleifend. Duis pharetra mi sit amet est tempor auctor. Vestibulum pellentesque metus at blandit pharetra. Cras sodales sem eu nisl interdum, placerat ornare nisi malesuada. Nam at bibendum nunc, eu feugiat neque. Sed quis lacus in lacus ornare ultricies. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris accumsan libero eget libero iaculis varius.
Nulla eget orci dolor. Curabitur varius volutpat arcu, sed porta erat faucibus vitae. Nulla vitae consequat tortor. Sed ornare, elit sit amet tempus tincidunt, leo arcu malesuada elit, iaculis aliquam neque tortor a nisi. Aliquam placerat faucibus tortor, et interdum massa tristique vitae. Maecenas commodo lobortis libero ac placerat. Nam tincidunt augue non sollicitudin iaculis. Etiam consectetur libero non neque varius efficitur. Maecenas id tortor ipsum.
In hac habitasse platea dictumst. Phasellus ut quam et eros ullamcorper posuere nec vitae sapien. Cras id leo placerat, porttitor felis vel, accumsan mauris. Nullam eget mauris vitae libero tincidunt dictum non et sem. Integer ipsum orci, blandit sit amet porta sollicitudin, interdum id nisl. Duis ac nulla mauris. Fusce dictum porttitor dolor vel viverra. Integer tempus nisi sed enim semper tristique. Maecenas feugiat, lectus ac viverra semper, orci libero lobortis urna, placerat accumsan nulla quam non libero. Proin ex ante, vehicula quis aliquam id, consectetur efficitur orci. Quisque nisi quam, volutpat at convallis condimentum, sodales eget magna.
Integer accumsan vehicula sagittis. Donec sed malesuada mauris, at sagittis odio. Donec facilisis orci at sapien gravida, ac cursus dolor consectetur. Integer gravida at elit non eleifend. Fusce maximus mauris vitae lectus venenatis, id volutpat mauris viverra. Etiam libero urna, porttitor ut neque feugiat, maximus sollicitudin lorem. Morbi convallis ultrices sem quis rutrum. Aenean varius risus non justo accumsan posuere. Nam egestas quis leo quis suscipit. Morbi ac quam quam. Aliquam erat volutpat.
Morbi eget dui ut mauris bibendum laoreet vitae sed nunc. Duis dignissim, lacus ornare condimentum semper, est elit fringilla nisi, ac pharetra risus diam eu sem. Curabitur eget urna nec ex pharetra lacinia. Proin eu metus felis. Nunc luctus sem eget nulla volutpat vestibulum. Phasellus ut interdum velit, sit amet vestibulum tortor. Donec pretium euismod pharetra. Donec consequat in sem quis consectetur. Proin tempor nulla nibh, sed porta dolor hendrerit a. Nam tincidunt nisl eget leo ornare, non fringilla nulla viverra. Suspendisse volutpat est vel tellus gravida tempor.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse scelerisque quam a ultricies eleifend. Duis pharetra mi sit amet est tempor auctor. Vestibulum pellentesque metus at blandit pharetra. Cras sodales sem eu nisl interdum, placerat ornare nisi malesuada. Nam at bibendum nunc, eu feugiat neque. Sed quis lacus in lacus ornare ultricies. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris accumsan libero eget libero iaculis varius.
Nulla eget orci dolor. Curabitur varius volutpat arcu, sed porta erat faucibus vitae. Nulla vitae consequat tortor. Sed ornare, elit sit amet tempus tincidunt, leo arcu malesuada elit, iaculis aliquam neque tortor a nisi. Aliquam placerat faucibus tortor, et interdum massa tristique vitae. Maecenas commodo lobortis libero ac placerat. Nam tincidunt augue non sollicitudin iaculis. Etiam consectetur libero non neque varius efficitur. Maecenas id tortor ipsum.
In hac habitasse platea dictumst. Phasellus ut quam et eros ullamcorper posuere nec vitae sapien. Cras id leo placerat, porttitor felis vel, accumsan mauris. Nullam eget mauris vitae libero tincidunt dictum non et sem. Integer ipsum orci, blandit sit amet porta sollicitudin, interdum id nisl. Duis ac nulla mauris. Fusce dictum porttitor dolor vel viverra. Integer tempus nisi sed enim semper tristique. Maecenas feugiat, lectus ac viverra semper, orci libero lobortis urna, placerat accumsan nulla quam non libero. Proin ex ante, vehicula quis aliquam id, consectetur efficitur orci. Quisque nisi quam, volutpat at convallis condimentum, sodales eget magna.
</div>
clientHeight value
"use strict"
console.log(document.querySelector('.testDiv').clientHeight);
.testDiv {
background-color: red;
padding: 10px
}
<div class="testDiv">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse scelerisque quam a ultricies eleifend. Duis pharetra mi sit amet est tempor auctor. Vestibulum pellentesque metus at blandit pharetra. Cras sodales sem eu nisl interdum, placerat ornare nisi malesuada. Nam at bibendum nunc, eu feugiat neque. Sed quis lacus in lacus ornare ultricies. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris accumsan libero eget libero iaculis varius.
Nulla eget orci dolor. Curabitur varius volutpat arcu, sed porta erat faucibus vitae. Nulla vitae consequat tortor. Sed ornare, elit sit amet tempus tincidunt, leo arcu malesuada elit, iaculis aliquam neque tortor a nisi. Aliquam placerat faucibus tortor, et interdum massa tristique vitae. Maecenas commodo lobortis libero ac placerat. Nam tincidunt augue non sollicitudin iaculis. Etiam consectetur libero non neque varius efficitur. Maecenas id tortor ipsum.
In hac habitasse platea dictumst. Phasellus ut quam et eros ullamcorper posuere nec vitae sapien. Cras id leo placerat, porttitor felis vel, accumsan mauris. Nullam eget mauris vitae libero tincidunt dictum non et sem. Integer ipsum orci, blandit sit amet porta sollicitudin, interdum id nisl. Duis ac nulla mauris. Fusce dictum porttitor dolor vel viverra. Integer tempus nisi sed enim semper tristique. Maecenas feugiat, lectus ac viverra semper, orci libero lobortis urna, placerat accumsan nulla quam non libero. Proin ex ante, vehicula quis aliquam id, consectetur efficitur orci. Quisque nisi quam, volutpat at convallis condimentum, sodales eget magna.
Integer accumsan vehicula sagittis. Donec sed malesuada mauris, at sagittis odio. Donec facilisis orci at sapien gravida, ac cursus dolor consectetur. Integer gravida at elit non eleifend. Fusce maximus mauris vitae lectus venenatis, id volutpat mauris viverra. Etiam libero urna, porttitor ut neque feugiat, maximus sollicitudin lorem. Morbi convallis ultrices sem quis rutrum. Aenean varius risus non justo accumsan posuere. Nam egestas quis leo quis suscipit. Morbi ac quam quam. Aliquam erat volutpat.
Morbi eget dui ut mauris bibendum laoreet vitae sed nunc. Duis dignissim, lacus ornare condimentum semper, est elit fringilla nisi, ac pharetra risus diam eu sem. Curabitur eget urna nec ex pharetra lacinia. Proin eu metus felis. Nunc luctus sem eget nulla volutpat vestibulum. Phasellus ut interdum velit, sit amet vestibulum tortor. Donec pretium euismod pharetra. Donec consequat in sem quis consectetur. Proin tempor nulla nibh, sed porta dolor hendrerit a. Nam tincidunt nisl eget leo ornare, non fringilla nulla viverra. Suspendisse volutpat est vel tellus gravida tempor.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse scelerisque quam a ultricies eleifend. Duis pharetra mi sit amet est tempor auctor. Vestibulum pellentesque metus at blandit pharetra. Cras sodales sem eu nisl interdum, placerat ornare nisi malesuada. Nam at bibendum nunc, eu feugiat neque. Sed quis lacus in lacus ornare ultricies. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris accumsan libero eget libero iaculis varius.
Nulla eget orci dolor. Curabitur varius volutpat arcu, sed porta erat faucibus vitae. Nulla vitae consequat tortor. Sed ornare, elit sit amet tempus tincidunt, leo arcu malesuada elit, iaculis aliquam neque tortor a nisi. Aliquam placerat faucibus tortor, et interdum massa tristique vitae. Maecenas commodo lobortis libero ac placerat. Nam tincidunt augue non sollicitudin iaculis. Etiam consectetur libero non neque varius efficitur. Maecenas id tortor ipsum.
In hac habitasse platea dictumst. Phasellus ut quam et eros ullamcorper posuere nec vitae sapien. Cras id leo placerat, porttitor felis vel, accumsan mauris. Nullam eget mauris vitae libero tincidunt dictum non et sem. Integer ipsum orci, blandit sit amet porta sollicitudin, interdum id nisl. Duis ac nulla mauris. Fusce dictum porttitor dolor vel viverra. Integer tempus nisi sed enim semper tristique. Maecenas feugiat, lectus ac viverra semper, orci libero lobortis urna, placerat accumsan nulla quam non libero. Proin ex ante, vehicula quis aliquam id, consectetur efficitur orci. Quisque nisi quam, volutpat at convallis condimentum, sodales eget magna.
</div>
offsetHeight value
"use strict"
console.log(document.querySelector('.testDiv').offsetHeight);
.testDiv {
background-color: red;
padding: 10px
}
<div class="testDiv">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse scelerisque quam a ultricies eleifend. Duis pharetra mi sit amet est tempor auctor. Vestibulum pellentesque metus at blandit pharetra. Cras sodales sem eu nisl interdum, placerat ornare nisi malesuada. Nam at bibendum nunc, eu feugiat neque. Sed quis lacus in lacus ornare ultricies. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris accumsan libero eget libero iaculis varius.
Nulla eget orci dolor. Curabitur varius volutpat arcu, sed porta erat faucibus vitae. Nulla vitae consequat tortor. Sed ornare, elit sit amet tempus tincidunt, leo arcu malesuada elit, iaculis aliquam neque tortor a nisi. Aliquam placerat faucibus tortor, et interdum massa tristique vitae. Maecenas commodo lobortis libero ac placerat. Nam tincidunt augue non sollicitudin iaculis. Etiam consectetur libero non neque varius efficitur. Maecenas id tortor ipsum.
In hac habitasse platea dictumst. Phasellus ut quam et eros ullamcorper posuere nec vitae sapien. Cras id leo placerat, porttitor felis vel, accumsan mauris. Nullam eget mauris vitae libero tincidunt dictum non et sem. Integer ipsum orci, blandit sit amet porta sollicitudin, interdum id nisl. Duis ac nulla mauris. Fusce dictum porttitor dolor vel viverra. Integer tempus nisi sed enim semper tristique. Maecenas feugiat, lectus ac viverra semper, orci libero lobortis urna, placerat accumsan nulla quam non libero. Proin ex ante, vehicula quis aliquam id, consectetur efficitur orci. Quisque nisi quam, volutpat at convallis condimentum, sodales eget magna.
Integer accumsan vehicula sagittis. Donec sed malesuada mauris, at sagittis odio. Donec facilisis orci at sapien gravida, ac cursus dolor consectetur. Integer gravida at elit non eleifend. Fusce maximus mauris vitae lectus venenatis, id volutpat mauris viverra. Etiam libero urna, porttitor ut neque feugiat, maximus sollicitudin lorem. Morbi convallis ultrices sem quis rutrum. Aenean varius risus non justo accumsan posuere. Nam egestas quis leo quis suscipit. Morbi ac quam quam. Aliquam erat volutpat.
Morbi eget dui ut mauris bibendum laoreet vitae sed nunc. Duis dignissim, lacus ornare condimentum semper, est elit fringilla nisi, ac pharetra risus diam eu sem. Curabitur eget urna nec ex pharetra lacinia. Proin eu metus felis. Nunc luctus sem eget nulla volutpat vestibulum. Phasellus ut interdum velit, sit amet vestibulum tortor. Donec pretium euismod pharetra. Donec consequat in sem quis consectetur. Proin tempor nulla nibh, sed porta dolor hendrerit a. Nam tincidunt nisl eget leo ornare, non fringilla nulla viverra. Suspendisse volutpat est vel tellus gravida tempor.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse scelerisque quam a ultricies eleifend. Duis pharetra mi sit amet est tempor auctor. Vestibulum pellentesque metus at blandit pharetra. Cras sodales sem eu nisl interdum, placerat ornare nisi malesuada. Nam at bibendum nunc, eu feugiat neque. Sed quis lacus in lacus ornare ultricies. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris accumsan libero eget libero iaculis varius.
Nulla eget orci dolor. Curabitur varius volutpat arcu, sed porta erat faucibus vitae. Nulla vitae consequat tortor. Sed ornare, elit sit amet tempus tincidunt, leo arcu malesuada elit, iaculis aliquam neque tortor a nisi. Aliquam placerat faucibus tortor, et interdum massa tristique vitae. Maecenas commodo lobortis libero ac placerat. Nam tincidunt augue non sollicitudin iaculis. Etiam consectetur libero non neque varius efficitur. Maecenas id tortor ipsum.
In hac habitasse platea dictumst. Phasellus ut quam et eros ullamcorper posuere nec vitae sapien. Cras id leo placerat, porttitor felis vel, accumsan mauris. Nullam eget mauris vitae libero tincidunt dictum non et sem. Integer ipsum orci, blandit sit amet porta sollicitudin, interdum id nisl. Duis ac nulla mauris. Fusce dictum porttitor dolor vel viverra. Integer tempus nisi sed enim semper tristique. Maecenas feugiat, lectus ac viverra semper, orci libero lobortis urna, placerat accumsan nulla quam non libero. Proin ex ante, vehicula quis aliquam id, consectetur efficitur orci. Quisque nisi quam, volutpat at convallis condimentum, sodales eget magna.
</div>
In your example the div itself doesn't scroll, the scroll you see belongs to the body, that's why you're seeing the same results...try this:
const el = document.querySelector('.testDiv');
console.log('clientHeight:', el.clientHeight);
console.log('scrollHeight:', el.scrollHeight);
console.log('offsetHeight:', el.offsetHeight);
.testDiv {
background-color: red;
border: 50px solid yellow;
height: 500px;
overflow: auto;
}
<div class="testDiv">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse scelerisque quam a ultricies eleifend. Duis pharetra mi sit amet est tempor auctor. Vestibulum pellentesque metus at blandit pharetra. Cras sodales sem eu nisl interdum, placerat ornare nisi malesuada. Nam at bibendum nunc, eu feugiat neque. Sed quis lacus in lacus ornare ultricies. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris accumsan libero eget libero iaculis varius.
Nulla eget orci dolor. Curabitur varius volutpat arcu, sed porta erat faucibus vitae. Nulla vitae consequat tortor. Sed ornare, elit sit amet tempus tincidunt, leo arcu malesuada elit, iaculis aliquam neque tortor a nisi. Aliquam placerat faucibus tortor, et interdum massa tristique vitae. Maecenas commodo lobortis libero ac placerat. Nam tincidunt augue non sollicitudin iaculis. Etiam consectetur libero non neque varius efficitur. Maecenas id tortor ipsum.
In hac habitasse platea dictumst. Phasellus ut quam et eros ullamcorper posuere nec vitae sapien. Cras id leo placerat, porttitor felis vel, accumsan mauris. Nullam eget mauris vitae libero tincidunt dictum non et sem. Integer ipsum orci, blandit sit amet porta sollicitudin, interdum id nisl. Duis ac nulla mauris. Fusce dictum porttitor dolor vel viverra. Integer tempus nisi sed enim semper tristique. Maecenas feugiat, lectus ac viverra semper, orci libero lobortis urna, placerat accumsan nulla quam non libero. Proin ex ante, vehicula quis aliquam id, consectetur efficitur orci. Quisque nisi quam, volutpat at convallis condimentum, sodales eget magna.
Integer accumsan vehicula sagittis. Donec sed malesuada mauris, at sagittis odio. Donec facilisis orci at sapien gravida, ac cursus dolor consectetur. Integer gravida at elit non eleifend. Fusce maximus mauris vitae lectus venenatis, id volutpat mauris viverra. Etiam libero urna, porttitor ut neque feugiat, maximus sollicitudin lorem. Morbi convallis ultrices sem quis rutrum. Aenean varius risus non justo accumsan posuere. Nam egestas quis leo quis suscipit. Morbi ac quam quam. Aliquam erat volutpat.
Morbi eget dui ut mauris bibendum laoreet vitae sed nunc. Duis dignissim, lacus ornare condimentum semper, est elit fringilla nisi, ac pharetra risus diam eu sem. Curabitur eget urna nec ex pharetra lacinia. Proin eu metus felis. Nunc luctus sem eget nulla volutpat vestibulum. Phasellus ut interdum velit, sit amet vestibulum tortor. Donec pretium euismod pharetra. Donec consequat in sem quis consectetur. Proin tempor nulla nibh, sed porta dolor hendrerit a. Nam tincidunt nisl eget leo ornare, non fringilla nulla viverra. Suspendisse volutpat est vel tellus gravida tempor.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse scelerisque quam a ultricies eleifend. Duis pharetra mi sit amet est tempor auctor. Vestibulum pellentesque metus at blandit pharetra. Cras sodales sem eu nisl interdum, placerat ornare nisi malesuada. Nam at bibendum nunc, eu feugiat neque. Sed quis lacus in lacus ornare ultricies. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris accumsan libero eget libero iaculis varius.
Nulla eget orci dolor. Curabitur varius volutpat arcu, sed porta erat faucibus vitae. Nulla vitae consequat tortor. Sed ornare, elit sit amet tempus tincidunt, leo arcu malesuada elit, iaculis aliquam neque tortor a nisi. Aliquam placerat faucibus tortor, et interdum massa tristique vitae. Maecenas commodo lobortis libero ac placerat. Nam tincidunt augue non sollicitudin iaculis. Etiam consectetur libero non neque varius efficitur. Maecenas id tortor ipsum.
In hac habitasse platea dictumst. Phasellus ut quam et eros ullamcorper posuere nec vitae sapien. Cras id leo placerat, porttitor felis vel, accumsan mauris. Nullam eget mauris vitae libero tincidunt dictum non et sem. Integer ipsum orci, blandit sit amet porta sollicitudin, interdum id nisl. Duis ac nulla mauris. Fusce dictum porttitor dolor vel viverra. Integer tempus nisi sed enim semper tristique. Maecenas feugiat, lectus ac viverra semper, orci libero lobortis urna, placerat accumsan nulla quam non libero. Proin ex ante, vehicula quis aliquam id, consectetur efficitur orci. Quisque nisi quam, volutpat at convallis condimentum, sodales eget magna.
</div>
These three values aren't necessarily the same, but they certainly can be the same, as they will be when the content doesn't have to scroll, vertical padding is zero, and there are no borders.
I am trying to detect when an element is completely out of the viewport, I have this so far...
/* Pause video if out of viewport */
jQuery(function($) {
//this function runs every time you are scrolling
$(window).scroll(function() {
var top_of_element = $(".element").offset().top;
var bottom_of_element = $(".element").offset().top + $(".element").outerHeight();
var bottom_of_screen = $(window).scrollTop() + $(window).height();
if((bottom_of_screen > top_of_element) && (bottom_of_screen < bottom_of_element)){
// The element is visible, do something
console.log('visible');
}
else {
console.log('not visible');
// The element is not visible, do something else
}
});
})
html, body {
padding:0;
margin:0;
}
.header {
background:blue;
position:fixed;
height:100px;
width:100%;
color:white;
text-align:center;
z-index:9999;
}
.element {
height:calc(100vh - 100px);
background:wheat;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="header">
This is a fixed header
</div>
Scroll Down
<div class="element">
This is a test element
</div>
</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sed mauris sed elit porttitor ultricies. Donec ut dolor vestibulum massa viverra fermentum. Maecenas dignissim risus turpis, et euismod urna tincidunt sed. Nulla facilisi. Nulla facilisi. In ut erat felis. Suspendisse in magna et odio tempus mattis eget auctor sem. Nullam vitae euismod ex, sed auctor nisi. Aenean placerat enim et arcu pulvinar rutrum. Mauris ligula risus, mollis at libero vel, lobortis semper magna. Integer at felis lacus. Quisque massa quam, cursus vel mauris convallis, pellentesque molestie ipsum. Donec efficitur orci et dui fermentum, id porttitor nisi scelerisque. Suspendisse elementum finibus luctus. Suspendisse varius sem et lorem sodales ultrices.
</p>
<p>
Nulla ex enim, convallis sit amet rutrum egestas, blandit non arcu. Aliquam erat volutpat. Mauris eget auctor est, et congue velit. Nulla pellentesque, tellus vitae ultrices rutrum, purus sem fermentum neque, eget eleifend sem sapien eget nunc. Praesent nec nunc quis nunc dignissim efficitur. Sed erat augue, volutpat sed mattis id, consequat sit amet metus. Morbi dignissim justo lorem. Ut ultrices mattis tincidunt. Quisque posuere, leo eget congue venenatis, urna velit accumsan justo, consequat vulputate ligula odio placerat enim. Duis eu venenatis lorem. Sed volutpat, libero sed fringilla viverra, augue ante sagittis massa, nec tristique nibh mi eu justo. Aenean viverra mauris nunc, vel porttitor diam dictum ac.
</p>
<p>
Fusce commodo tempor sem, non tempus metus lobortis at. Ut hendrerit placerat nisi nec venenatis. Quisque congue accumsan nulla, sit amet suscipit neque eleifend sit amet. Donec lacinia velit in odio ornare, at congue ante auctor. Suspendisse lacinia magna purus, a tempor erat lacinia nec. Etiam sed orci varius, euismod ante efficitur, lobortis neque. Phasellus varius libero gravida erat placerat, ornare euismod lectus dignissim. Suspendisse at lacus ut massa aliquam eleifend.
</p>
<p>
Proin semper orci et augue eleifend tempus eu in urna. Vivamus elementum massa sed ligula fringilla, nec blandit ante efficitur. Etiam varius maximus sem, at laoreet sem sodales nec. Nunc quis dolor in orci ultrices congue a ac turpis. Praesent pharetra quam felis, molestie luctus sem maximus sed. Phasellus consequat felis sed tortor sagittis mollis. Ut at interdum lacus. Quisque ac turpis id arcu pulvinar volutpat. Vestibulum finibus mi euismod arcu ultrices, ac efficitur nibh tempus. Nulla in magna porta, bibendum libero ut, molestie est.
</p>
<p>
Curabitur tristique rutrum erat, non tristique quam feugiat at. Nunc id urna eget eros tincidunt dapibus. Aliquam ut ornare sem, at mattis risus. Aliquam blandit bibendum aliquet. Nunc rhoncus euismod libero. Phasellus congue sit amet sem non ornare. Morbi justo ligula, auctor et turpis vitae, euismod vestibulum nunc.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sed mauris sed elit porttitor ultricies. Donec ut dolor vestibulum massa viverra fermentum. Maecenas dignissim risus turpis, et euismod urna tincidunt sed. Nulla facilisi. Nulla facilisi. In ut erat felis. Suspendisse in magna et odio tempus mattis eget auctor sem. Nullam vitae euismod ex, sed auctor nisi. Aenean placerat enim et arcu pulvinar rutrum. Mauris ligula risus, mollis at libero vel, lobortis semper magna. Integer at felis lacus. Quisque massa quam, cursus vel mauris convallis, pellentesque molestie ipsum. Donec efficitur orci et dui fermentum, id porttitor nisi scelerisque. Suspendisse elementum finibus luctus. Suspendisse varius sem et lorem sodales ultrices.
</p>
<p>
Nulla ex enim, convallis sit amet rutrum egestas, blandit non arcu. Aliquam erat volutpat. Mauris eget auctor est, et congue velit. Nulla pellentesque, tellus vitae ultrices rutrum, purus sem fermentum neque, eget eleifend sem sapien eget nunc. Praesent nec nunc quis nunc dignissim efficitur. Sed erat augue, volutpat sed mattis id, consequat sit amet metus. Morbi dignissim justo lorem. Ut ultrices mattis tincidunt. Quisque posuere, leo eget congue venenatis, urna velit accumsan justo, consequat vulputate ligula odio placerat enim. Duis eu venenatis lorem. Sed volutpat, libero sed fringilla viverra, augue ante sagittis massa, nec tristique nibh mi eu justo. Aenean viverra mauris nunc, vel porttitor diam dictum ac.
</p>
<p>
Fusce commodo tempor sem, non tempus metus lobortis at. Ut hendrerit placerat nisi nec venenatis. Quisque congue accumsan nulla, sit amet suscipit neque eleifend sit amet. Donec lacinia velit in odio ornare, at congue ante auctor. Suspendisse lacinia magna purus, a tempor erat lacinia nec. Etiam sed orci varius, euismod ante efficitur, lobortis neque. Phasellus varius libero gravida erat placerat, ornare euismod lectus dignissim. Suspendisse at lacus ut massa aliquam eleifend.
</p>
<p>
Proin semper orci et augue eleifend tempus eu in urna. Vivamus elementum massa sed ligula fringilla, nec blandit ante efficitur. Etiam varius maximus sem, at laoreet sem sodales nec. Nunc quis dolor in orci ultrices congue a ac turpis. Praesent pharetra quam felis, molestie luctus sem maximus sed. Phasellus consequat felis sed tortor sagittis mollis. Ut at interdum lacus. Quisque ac turpis id arcu pulvinar volutpat. Vestibulum finibus mi euismod arcu ultrices, ac efficitur nibh tempus. Nulla in magna porta, bibendum libero ut, molestie est.
</p>
<p>
Curabitur tristique rutrum erat, non tristique quam feugiat at. Nunc id urna eget eros tincidunt dapibus. Aliquam ut ornare sem, at mattis risus. Aliquam blandit bibendum aliquet. Nunc rhoncus euismod libero. Phasellus congue sit amet sem non ornare. Morbi justo ligula, auctor et turpis vitae, euismod vestibulum nunc.
</p>
It is not working for unless I remove the calc from the .element height.
How can I modify this so that it takes my sticky header into account?
/* Pause video if out of viewport */
jQuery(function($) {
//this function runs every time you are scrolling
$(window).scroll(function() {
var top_of_element = $(".element").offset().top;
var bottom_of_element = top_of_element + $(".element").outerHeight();
var scrolled = $(window).scrollTop();
if (scrolled + $('.header').height() < bottom_of_element && scrolled + $(window).height() > top_of_element) {
console.log('visible');
} else {
console.log('not visible');
}
});
});
html,
body {
padding: 0;
margin: 0;
}
.header {
background: blue;
position: fixed;
height: 100px;
width: 100%;
color: white;
text-align: center;
z-index: 9999;
}
.element {
height: calc(100vh - 100px);
background: wheat;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="header">
This is a fixed header
</div>
Scroll Down
</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sed mauris sed elit porttitor ultricies. Donec ut dolor vestibulum massa viverra fermentum. Maecenas dignissim risus turpis, et euismod urna tincidunt sed. Nulla facilisi. Nulla facilisi.
In ut erat felis. Suspendisse in magna et odio tempus mattis eget auctor sem. Nullam vitae euismod ex, sed auctor nisi. Aenean placerat enim et arcu pulvinar rutrum. Mauris ligula risus, mollis at libero vel, lobortis semper magna. Integer at felis
lacus. Quisque massa quam, cursus vel mauris convallis, pellentesque molestie ipsum. Donec efficitur orci et dui fermentum, id porttitor nisi scelerisque. Suspendisse elementum finibus luctus. Suspendisse varius sem et lorem sodales ultrices.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sed mauris sed elit porttitor ultricies. Donec ut dolor vestibulum massa viverra fermentum. Maecenas dignissim risus turpis, et euismod urna tincidunt sed. Nulla facilisi. Nulla facilisi.
In ut erat felis. Suspendisse in magna et odio tempus mattis eget auctor sem. Nullam vitae euismod ex, sed auctor nisi. Aenean placerat enim et arcu pulvinar rutrum. Mauris ligula risus, mollis at libero vel, lobortis semper magna. Integer at felis
lacus. Quisque massa quam, cursus vel mauris convallis, pellentesque molestie ipsum. Donec efficitur orci et dui fermentum, id porttitor nisi scelerisque. Suspendisse elementum finibus luctus. Suspendisse varius sem et lorem sodales ultrices.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sed mauris sed elit porttitor ultricies. Donec ut dolor vestibulum massa viverra fermentum. Maecenas dignissim risus turpis, et euismod urna tincidunt sed. Nulla facilisi. Nulla facilisi.
In ut erat felis. Suspendisse in magna et odio tempus mattis eget auctor sem. Nullam vitae euismod ex, sed auctor nisi. Aenean placerat enim et arcu pulvinar rutrum. Mauris ligula risus, mollis at libero vel, lobortis semper magna. Integer at felis
lacus. Quisque massa quam, cursus vel mauris convallis, pellentesque molestie ipsum. Donec efficitur orci et dui fermentum, id porttitor nisi scelerisque. Suspendisse elementum finibus luctus. Suspendisse varius sem et lorem sodales ultrices.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sed mauris sed elit porttitor ultricies. Donec ut dolor vestibulum massa viverra fermentum. Maecenas dignissim risus turpis, et euismod urna tincidunt sed. Nulla facilisi. Nulla facilisi.
In ut erat felis. Suspendisse in magna et odio tempus mattis eget auctor sem. Nullam vitae euismod ex, sed auctor nisi. Aenean placerat enim et arcu pulvinar rutrum. Mauris ligula risus, mollis at libero vel, lobortis semper magna. Integer at felis
lacus. Quisque massa quam, cursus vel mauris convallis, pellentesque molestie ipsum. Donec efficitur orci et dui fermentum, id porttitor nisi scelerisque. Suspendisse elementum finibus luctus. Suspendisse varius sem et lorem sodales ultrices.
</p>
<p>
Nulla ex enim, convallis sit amet rutrum egestas, blandit non arcu. Aliquam erat volutpat. Mauris eget auctor est, et congue velit. Nulla pellentesque, tellus vitae ultrices rutrum, purus sem fermentum neque, eget eleifend sem sapien eget nunc. Praesent
nec nunc quis nunc dignissim efficitur. Sed erat augue, volutpat sed mattis id, consequat sit amet metus. Morbi dignissim justo lorem. Ut ultrices mattis tincidunt. Quisque posuere, leo eget congue venenatis, urna velit accumsan justo, consequat vulputate
ligula odio placerat enim. Duis eu venenatis lorem. Sed volutpat, libero sed fringilla viverra, augue ante sagittis massa, nec tristique nibh mi eu justo. Aenean viverra mauris nunc, vel porttitor diam dictum ac.
</p>
<div class="element">
This is a test element
</div>
<p>
Fusce commodo tempor sem, non tempus metus lobortis at. Ut hendrerit placerat nisi nec venenatis. Quisque congue accumsan nulla, sit amet suscipit neque eleifend sit amet. Donec lacinia velit in odio ornare, at congue ante auctor. Suspendisse lacinia
magna purus, a tempor erat lacinia nec. Etiam sed orci varius, euismod ante efficitur, lobortis neque. Phasellus varius libero gravida erat placerat, ornare euismod lectus dignissim. Suspendisse at lacus ut massa aliquam eleifend.
</p>
<p>
Proin semper orci et augue eleifend tempus eu in urna. Vivamus elementum massa sed ligula fringilla, nec blandit ante efficitur. Etiam varius maximus sem, at laoreet sem sodales nec. Nunc quis dolor in orci ultrices congue a ac turpis. Praesent pharetra
quam felis, molestie luctus sem maximus sed. Phasellus consequat felis sed tortor sagittis mollis. Ut at interdum lacus. Quisque ac turpis id arcu pulvinar volutpat. Vestibulum finibus mi euismod arcu ultrices, ac efficitur nibh tempus. Nulla in magna
porta, bibendum libero ut, molestie est.
</p>
<p>
Curabitur tristique rutrum erat, non tristique quam feugiat at. Nunc id urna eget eros tincidunt dapibus. Aliquam ut ornare sem, at mattis risus. Aliquam blandit bibendum aliquet. Nunc rhoncus euismod libero. Phasellus congue sit amet sem non ornare.
Morbi justo ligula, auctor et turpis vitae, euismod vestibulum nunc.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sed mauris sed elit porttitor ultricies. Donec ut dolor vestibulum massa viverra fermentum. Maecenas dignissim risus turpis, et euismod urna tincidunt sed. Nulla facilisi. Nulla facilisi.
In ut erat felis. Suspendisse in magna et odio tempus mattis eget auctor sem. Nullam vitae euismod ex, sed auctor nisi. Aenean placerat enim et arcu pulvinar rutrum. Mauris ligula risus, mollis at libero vel, lobortis semper magna. Integer at felis
lacus. Quisque massa quam, cursus vel mauris convallis, pellentesque molestie ipsum. Donec efficitur orci et dui fermentum, id porttitor nisi scelerisque. Suspendisse elementum finibus luctus. Suspendisse varius sem et lorem sodales ultrices.
</p>
<p>
Nulla ex enim, convallis sit amet rutrum egestas, blandit non arcu. Aliquam erat volutpat. Mauris eget auctor est, et congue velit. Nulla pellentesque, tellus vitae ultrices rutrum, purus sem fermentum neque, eget eleifend sem sapien eget nunc. Praesent
nec nunc quis nunc dignissim efficitur. Sed erat augue, volutpat sed mattis id, consequat sit amet metus. Morbi dignissim justo lorem. Ut ultrices mattis tincidunt. Quisque posuere, leo eget congue venenatis, urna velit accumsan justo, consequat vulputate
ligula odio placerat enim. Duis eu venenatis lorem. Sed volutpat, libero sed fringilla viverra, augue ante sagittis massa, nec tristique nibh mi eu justo. Aenean viverra mauris nunc, vel porttitor diam dictum ac.
</p>
<p>
Fusce commodo tempor sem, non tempus metus lobortis at. Ut hendrerit placerat nisi nec venenatis. Quisque congue accumsan nulla, sit amet suscipit neque eleifend sit amet. Donec lacinia velit in odio ornare, at congue ante auctor. Suspendisse lacinia
magna purus, a tempor erat lacinia nec. Etiam sed orci varius, euismod ante efficitur, lobortis neque. Phasellus varius libero gravida erat placerat, ornare euismod lectus dignissim. Suspendisse at lacus ut massa aliquam eleifend.
</p>
<p>
Proin semper orci et augue eleifend tempus eu in urna. Vivamus elementum massa sed ligula fringilla, nec blandit ante efficitur. Etiam varius maximus sem, at laoreet sem sodales nec. Nunc quis dolor in orci ultrices congue a ac turpis. Praesent pharetra
quam felis, molestie luctus sem maximus sed. Phasellus consequat felis sed tortor sagittis mollis. Ut at interdum lacus. Quisque ac turpis id arcu pulvinar volutpat. Vestibulum finibus mi euismod arcu ultrices, ac efficitur nibh tempus. Nulla in magna
porta, bibendum libero ut, molestie est.
</p>
<p>
Curabitur tristique rutrum erat, non tristique quam feugiat at. Nunc id urna eget eros tincidunt dapibus. Aliquam ut ornare sem, at mattis risus. Aliquam blandit bibendum aliquet. Nunc rhoncus euismod libero. Phasellus congue sit amet sem non ornare.
Morbi justo ligula, auctor et turpis vitae, euismod vestibulum nunc.
</p>
I need to get a position of a DIV relative to the body or html tag.
So for example:
I have a element going up the screen.
When you scroll the page vertically, and the DIV is at certain height on the screen, it changes color.
When the DIV is off the screen, it changes back to its normal color.
I have done something similar to this, but I have to use Next/Previous buttons for it:
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
var number = 0;
var goSign = "";
function goToByScroll(id){
$('html,body').animate({scrollTop: $("#"+id).offset().top-100},'slow','swing', function()
{
$('#'+id).css('background', '#8b00cb');
$('#'+(id-1)).css('background', 'none');
$('#'+(id+1)).css('background', 'none');
});
}
function iterate(goSign)
{
if(goSign == "next")
{
if(number < 12 && number >= 0)
{
goToByScroll(++number);
}
//alert(number);
}
else if(goSign == "previous")
{
if(number <= 12 && number >= 1)
{
goToByScroll(--number);
}
//alert(number);
}
}
</script>
</head>
<body>
<div style = "position:fixed; top:90px;right:200px;width:200px;height:50px">
Next<br/>
Previous
</div>
<div style="width:600px">
<div id="1">
<h1>1</h1>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin orci erat, gravida vitae auctor sed, fringilla sit amet sem. Etiam scelerisque, ligula ac scelerisque egestas, sem arcu commodo ligula, in imperdiet arcu ipsum nec magna. Proin purus tellus, dictum at volutpat tempor, ultrices ut arcu. Nam ut diam vitae dui tristique tincidunt sed a est. Aenean rutrum, lectus at laoreet consectetur, erat leo vestibulum massa, eu pellentesque justo nisi a arcu. Aliquam fermentum volutpat eros, sed tempus dolor luctus eget. Sed sodales dapibus nisi ut venenatis. Phasellus suscipit risus nunc, non adipiscing purus. Morbi tristique dolor ac lacus euismod lacinia. Praesent ac nisi nec elit pharetra pulvinar. Vestibulum porttitor turpis vitae velit pretium vitae tincidunt sapien varius. Nullam suscipit malesuada elit, et lacinia mauris pretium id. In sem felis, fermentum nec lobortis vel, elementum quis odio. Nullam bibendum magna quis lacus condimentum ut vestibulum nunc ultricies. In augue nisl, tincidunt vel convallis a, pretium vel diam. Sed tincidunt odio sit amet nulla cursus porta. Aenean sed quam sem, a semper mauris. Maecenas ac nulla metus.
</div>
<div id="2">
<h1>2</h1>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin orci erat, gravida vitae auctor sed, fringilla sit amet sem. Etiam scelerisque, ligula ac scelerisque egestas, sem arcu commodo ligula, in imperdiet arcu ipsum nec magna. Proin purus tellus, dictum at volutpat tempor, ultrices ut arcu. Nam ut diam vitae dui tristique tincidunt sed a est. Aenean rutrum, lectus at laoreet consectetur, erat leo vestibulum massa, eu pellentesque justo nisi a arcu. Aliquam fermentum volutpat eros, sed tempus dolor luctus eget. Sed sodales dapibus nisi ut venenatis. Phasellus suscipit risus nunc, non adipiscing purus. Morbi tristique dolor ac lacus euismod lacinia. Praesent ac nisi nec elit pharetra pulvinar. Vestibulum porttitor turpis vitae velit pretium vitae tincidunt sapien varius. Nullam suscipit malesuada elit, et lacinia mauris pretium id. In sem felis, fermentum nec lobortis vel, elementum quis odio. Nullam bibendum magna quis lacus condimentum ut vestibulum nunc ultricies. In augue nisl, tincidunt vel convallis a, pretium vel diam. Sed tincidunt odio sit amet nulla cursus porta. Aenean sed quam sem, a semper mauris. Maecenas ac nulla metus.
</div>
<div id="3">
<h1>3</h1>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin orci erat, gravida vitae auctor sed, fringilla sit amet sem. Etiam scelerisque, ligula ac scelerisque egestas, sem arcu commodo ligula, in imperdiet arcu ipsum nec magna. Proin purus tellus, dictum at volutpat tempor, ultrices ut arcu. Nam ut diam vitae dui tristique tincidunt sed a est. Aenean rutrum, lectus at laoreet consectetur, erat leo vestibulum massa, eu pellentesque justo nisi a arcu. Aliquam fermentum volutpat eros, sed tempus dolor luctus eget. Sed sodales dapibus nisi ut venenatis. Phasellus suscipit risus nunc, non adipiscing purus. Morbi tristique dolor ac lacus euismod lacinia. Praesent ac nisi nec elit pharetra pulvinar. Vestibulum porttitor turpis vitae velit pretium vitae tincidunt sapien varius. Nullam suscipit malesuada elit, et lacinia mauris pretium id. In sem felis, fermentum nec lobortis vel, elementum quis odio. Nullam bibendum magna quis lacus condimentum ut vestibulum nunc ultricies. In augue nisl, tincidunt vel convallis a, pretium vel diam. Sed tincidunt odio sit amet nulla cursus porta. Aenean sed quam sem, a semper mauris. Maecenas ac nulla metus.
</div>
<div id="4">
<h1>4</h1>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin orci erat, gravida vitae auctor sed, fringilla sit amet sem. Etiam scelerisque, ligula ac scelerisque egestas, sem arcu commodo ligula, in imperdiet arcu ipsum nec magna. Proin purus tellus, dictum at volutpat tempor, ultrices ut arcu. Nam ut diam vitae dui tristique tincidunt sed a est. Aenean rutrum, lectus at laoreet consectetur, erat leo vestibulum massa, eu pellentesque justo nisi a arcu. Aliquam fermentum volutpat eros, sed tempus dolor luctus eget. Sed sodales dapibus nisi ut venenatis. Phasellus suscipit risus nunc, non adipiscing purus. Morbi tristique dolor ac lacus euismod lacinia. Praesent ac nisi nec elit pharetra pulvinar. Vestibulum porttitor turpis vitae velit pretium vitae tincidunt sapien varius. Nullam suscipit malesuada elit, et lacinia mauris pretium id. In sem felis, fermentum nec lobortis vel, elementum quis odio. Nullam bibendum magna quis lacus condimentum ut vestibulum nunc ultricies. In augue nisl, tincidunt vel convallis a, pretium vel diam. Sed tincidunt odio sit amet nulla cursus porta. Aenean sed quam sem, a semper mauris. Maecenas ac nulla metus.
</div>
<div id="5">
<h1>1</h1>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin orci erat, gravida vitae auctor sed, fringilla sit amet sem. Etiam scelerisque, ligula ac scelerisque egestas, sem arcu commodo ligula, in imperdiet arcu ipsum nec magna. Proin purus tellus, dictum at volutpat tempor, ultrices ut arcu. Nam ut diam vitae dui tristique tincidunt sed a est. Aenean rutrum, lectus at laoreet consectetur, erat leo vestibulum massa, eu pellentesque justo nisi a arcu. Aliquam fermentum volutpat eros, sed tempus dolor luctus eget. Sed sodales dapibus nisi ut venenatis. Phasellus suscipit risus nunc, non adipiscing purus. Morbi tristique dolor ac lacus euismod lacinia. Praesent ac nisi nec elit pharetra pulvinar. Vestibulum porttitor turpis vitae velit pretium vitae tincidunt sapien varius. Nullam suscipit malesuada elit, et lacinia mauris pretium id. In sem felis, fermentum nec lobortis vel, elementum quis odio. Nullam bibendum magna quis lacus condimentum ut vestibulum nunc ultricies. In augue nisl, tincidunt vel convallis a, pretium vel diam. Sed tincidunt odio sit amet nulla cursus porta. Aenean sed quam sem, a semper mauris. Maecenas ac nulla metus.
</div>
<div id="6">
<h1>2</h1>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin orci erat, gravida vitae auctor sed, fringilla sit amet sem. Etiam scelerisque, ligula ac scelerisque egestas, sem arcu commodo ligula, in imperdiet arcu ipsum nec magna. Proin purus tellus, dictum at volutpat tempor, ultrices ut arcu. Nam ut diam vitae dui tristique tincidunt sed a est. Aenean rutrum, lectus at laoreet consectetur, erat leo vestibulum massa, eu pellentesque justo nisi a arcu. Aliquam fermentum volutpat eros, sed tempus dolor luctus eget. Sed sodales dapibus nisi ut venenatis. Phasellus suscipit risus nunc, non adipiscing purus. Morbi tristique dolor ac lacus euismod lacinia. Praesent ac nisi nec elit pharetra pulvinar. Vestibulum porttitor turpis vitae velit pretium vitae tincidunt sapien varius. Nullam suscipit malesuada elit, et lacinia mauris pretium id. In sem felis, fermentum nec lobortis vel, elementum quis odio. Nullam bibendum magna quis lacus condimentum ut vestibulum nunc ultricies. In augue nisl, tincidunt vel convallis a, pretium vel diam. Sed tincidunt odio sit amet nulla cursus porta. Aenean sed quam sem, a semper mauris. Maecenas ac nulla metus.
</div>
<div id="7">
<h1>3</h1>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin orci erat, gravida vitae auctor sed, fringilla sit amet sem. Etiam scelerisque, ligula ac scelerisque egestas, sem arcu commodo ligula, in imperdiet arcu ipsum nec magna. Proin purus tellus, dictum at volutpat tempor, ultrices ut arcu. Nam ut diam vitae dui tristique tincidunt sed a est. Aenean rutrum, lectus at laoreet consectetur, erat leo vestibulum massa, eu pellentesque justo nisi a arcu. Aliquam fermentum volutpat eros, sed tempus dolor luctus eget. Sed sodales dapibus nisi ut venenatis. Phasellus suscipit risus nunc, non adipiscing purus. Morbi tristique dolor ac lacus euismod lacinia. Praesent ac nisi nec elit pharetra pulvinar. Vestibulum porttitor turpis vitae velit pretium vitae tincidunt sapien varius. Nullam suscipit malesuada elit, et lacinia mauris pretium id. In sem felis, fermentum nec lobortis vel, elementum quis odio. Nullam bibendum magna quis lacus condimentum ut vestibulum nunc ultricies. In augue nisl, tincidunt vel convallis a, pretium vel diam. Sed tincidunt odio sit amet nulla cursus porta. Aenean sed quam sem, a semper mauris. Maecenas ac nulla metus.
</div>
<div id="8">
<h1>4</h1>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin orci erat, gravida vitae auctor sed, fringilla sit amet sem. Etiam scelerisque, ligula ac scelerisque egestas, sem arcu commodo ligula, in imperdiet arcu ipsum nec magna. Proin purus tellus, dictum at volutpat tempor, ultrices ut arcu. Nam ut diam vitae dui tristique tincidunt sed a est. Aenean rutrum, lectus at laoreet consectetur, erat leo vestibulum massa, eu pellentesque justo nisi a arcu. Aliquam fermentum volutpat eros, sed tempus dolor luctus eget. Sed sodales dapibus nisi ut venenatis. Phasellus suscipit risus nunc, non adipiscing purus. Morbi tristique dolor ac lacus euismod lacinia. Praesent ac nisi nec elit pharetra pulvinar. Vestibulum porttitor turpis vitae velit pretium vitae tincidunt sapien varius. Nullam suscipit malesuada elit, et lacinia mauris pretium id. In sem felis, fermentum nec lobortis vel, elementum quis odio. Nullam bibendum magna quis lacus condimentum ut vestibulum nunc ultricies. In augue nisl, tincidunt vel convallis a, pretium vel diam. Sed tincidunt odio sit amet nulla cursus porta. Aenean sed quam sem, a semper mauris. Maecenas ac nulla metus.
</div>
<div id="9">
<h1>1</h1>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin orci erat, gravida vitae auctor sed, fringilla sit amet sem. Etiam scelerisque, ligula ac scelerisque egestas, sem arcu commodo ligula, in imperdiet arcu ipsum nec magna. Proin purus tellus, dictum at volutpat tempor, ultrices ut arcu. Nam ut diam vitae dui tristique tincidunt sed a est. Aenean rutrum, lectus at laoreet consectetur, erat leo vestibulum massa, eu pellentesque justo nisi a arcu. Aliquam fermentum volutpat eros, sed tempus dolor luctus eget. Sed sodales dapibus nisi ut venenatis. Phasellus suscipit risus nunc, non adipiscing purus. Morbi tristique dolor ac lacus euismod lacinia. Praesent ac nisi nec elit pharetra pulvinar. Vestibulum porttitor turpis vitae velit pretium vitae tincidunt sapien varius. Nullam suscipit malesuada elit, et lacinia mauris pretium id. In sem felis, fermentum nec lobortis vel, elementum quis odio. Nullam bibendum magna quis lacus condimentum ut vestibulum nunc ultricies. In augue nisl, tincidunt vel convallis a, pretium vel diam. Sed tincidunt odio sit amet nulla cursus porta. Aenean sed quam sem, a semper mauris. Maecenas ac nulla metus.
</div>
<div id="10">
<h1>2</h1>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin orci erat, gravida vitae auctor sed, fringilla sit amet sem. Etiam scelerisque, ligula ac scelerisque egestas, sem arcu commodo ligula, in imperdiet arcu ipsum nec magna. Proin purus tellus, dictum at volutpat tempor, ultrices ut arcu. Nam ut diam vitae dui tristique tincidunt sed a est. Aenean rutrum, lectus at laoreet consectetur, erat leo vestibulum massa, eu pellentesque justo nisi a arcu. Aliquam fermentum volutpat eros, sed tempus dolor luctus eget. Sed sodales dapibus nisi ut venenatis. Phasellus suscipit risus nunc, non adipiscing purus. Morbi tristique dolor ac lacus euismod lacinia. Praesent ac nisi nec elit pharetra pulvinar. Vestibulum porttitor turpis vitae velit pretium vitae tincidunt sapien varius. Nullam suscipit malesuada elit, et lacinia mauris pretium id. In sem felis, fermentum nec lobortis vel, elementum quis odio. Nullam bibendum magna quis lacus condimentum ut vestibulum nunc ultricies. In augue nisl, tincidunt vel convallis a, pretium vel diam. Sed tincidunt odio sit amet nulla cursus porta. Aenean sed quam sem, a semper mauris. Maecenas ac nulla metus.
</div>
<div id="11">
<h1>3</h1>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin orci erat, gravida vitae auctor sed, fringilla sit amet sem. Etiam scelerisque, ligula ac scelerisque egestas, sem arcu commodo ligula, in imperdiet arcu ipsum nec magna. Proin purus tellus, dictum at volutpat tempor, ultrices ut arcu. Nam ut diam vitae dui tristique tincidunt sed a est. Aenean rutrum, lectus at laoreet consectetur, erat leo vestibulum massa, eu pellentesque justo nisi a arcu. Aliquam fermentum volutpat eros, sed tempus dolor luctus eget. Sed sodales dapibus nisi ut venenatis. Phasellus suscipit risus nunc, non adipiscing purus. Morbi tristique dolor ac lacus euismod lacinia. Praesent ac nisi nec elit pharetra pulvinar. Vestibulum porttitor turpis vitae velit pretium vitae tincidunt sapien varius. Nullam suscipit malesuada elit, et lacinia mauris pretium id. In sem felis, fermentum nec lobortis vel, elementum quis odio. Nullam bibendum magna quis lacus condimentum ut vestibulum nunc ultricies. In augue nisl, tincidunt vel convallis a, pretium vel diam. Sed tincidunt odio sit amet nulla cursus porta. Aenean sed quam sem, a semper mauris. Maecenas ac nulla metus.
</div>
<div id="12">
<h1>4</h1>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin orci erat, gravida vitae auctor sed, fringilla sit amet sem. Etiam scelerisque, ligula ac scelerisque egestas, sem arcu commodo ligula, in imperdiet arcu ipsum nec magna. Proin purus tellus, dictum at volutpat tempor, ultrices ut arcu. Nam ut diam vitae dui tristique tincidunt sed a est. Aenean rutrum, lectus at laoreet consectetur, erat leo vestibulum massa, eu pellentesque justo nisi a arcu. Aliquam fermentum volutpat eros, sed tempus dolor luctus eget. Sed sodales dapibus nisi ut venenatis. Phasellus suscipit risus nunc, non adipiscing purus. Morbi tristique dolor ac lacus euismod lacinia. Praesent ac nisi nec elit pharetra pulvinar. Vestibulum porttitor turpis vitae velit pretium vitae tincidunt sapien varius. Nullam suscipit malesuada elit, et lacinia mauris pretium id. In sem felis, fermentum nec lobortis vel, elementum quis odio. Nullam bibendum magna quis lacus condimentum ut vestibulum nunc ultricies. In augue nisl, tincidunt vel convallis a, pretium vel diam. Sed tincidunt odio sit amet nulla cursus porta. Aenean sed quam sem, a semper mauris. Maecenas ac nulla metus.
</div>
</div>
</body>
Is there a way to do this?
I was thinking of using jQuery .position() http://api.jquery.com/position/
.position() will give you the location of an element based on it's offset parent (so if the element is inside an absolutely positioned element you probably won't get the coordinates from the document element).
Try using .offset() instead:
Get the current coordinates of the first element in the set of matched
elements, relative to the document.
Source: http://api.jquery.com/offset
Here is a demo: http://jsfiddle.net/PNCbK/ (JSFiddle seems to be having issues right now, here is a JSBin of the same code: http://jsbin.com/ezobux/edit#javascript,html,live)