Related
I need to disable scrolling for the div # scrolling-disabled on mobile browsers for both iOS and Android devices. I can't use the position: fixed; trick or it will broke my layout. So I'm handling the touchmove event to prevent the default action. The code below works but only if you drag your finger directly in the div # scrolling-disabled element. If you drag your finger in the div # window element or even in the div # scrolling-enabled IOs will still scroll the element in the background, in this case, div # scrolling-disabled.
document.querySelector('#scroll-disabled').addEventListener('touchmove', function(event) { event.preventDefault(); });
#window
{
display: block;
position: fixed;
margin: 30px;
z-index: 999;
background-color: #fff;
border: 1px solid red;
}
#scroll-enabled
{
height: 100px;
overflow: auto;
border: 1px solid red;
margin: 10px;
}
#scroll-disabled
{
}
p
{
margin: 10px;
}
<html>
<body>
<div id="window">
<p><b>Scrolling should be disabled for the DIV element in the background (#scroll-disabled), but should still be possible in the DIV element below (#scroll-enabled).</b></p>
<div id="scroll-enabled">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed laoreet quam non mi sagittis hendrerit. Nulla tristique eget nibh et finibus. Pellentesque placerat hendrerit enim eu convallis. Sed posuere dolor ac est finibus, non egestas lacus pellentesque. Mauris dictum nibh id nisi venenatis dictum. Etiam sit amet congue neque. Cras molestie nulla faucibus ante molestie, a suscipit ligula sagittis. Sed condimentum orci id lacus cursus dignissim. Curabitur et urna erat. Integer sem augue, rhoncus ac venenatis a, viverra sed enim. Nullam fermentum auctor risus nec congue. Sed leo libero, lobortis vitae nisi in, placerat rutrum nisl. Nullam dapibus purus nec nisl aliquet, vel auctor nulla consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed laoreet quam non mi sagittis hendrerit. Nulla tristique eget nibh et finibus. Pellentesque placerat hendrerit enim eu convallis. Sed posuere dolor ac est finibus, non egestas lacus pellentesque. Mauris dictum nibh id nisi venenatis dictum. Etiam sit amet congue neque. Cras molestie nulla faucibus ante molestie, a suscipit ligula sagittis. Sed condimentum orci id lacus cursus dignissim. Curabitur et urna erat. Integer sem augue, rhoncus ac venenatis a, viverra sed enim. Nullam fermentum auctor risus nec congue. Sed leo libero, lobortis vitae nisi in, placerat rutrum nisl. Nullam dapibus purus nec nisl aliquet, vel auctor nulla consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed laoreet quam non mi sagittis hendrerit. Nulla tristique eget nibh et finibus. Pellentesque placerat hendrerit enim eu convallis. Sed posuere dolor ac est finibus, non egestas lacus pellentesque. Mauris dictum nibh id nisi venenatis dictum. Etiam sit amet congue neque. Cras molestie nulla faucibus ante molestie, a suscipit ligula sagittis. Sed condimentum orci id lacus cursus dignissim. Curabitur et urna erat. Integer sem augue, rhoncus ac venenatis a, viverra sed enim. Nullam fermentum auctor risus nec congue. Sed leo libero, lobortis vitae nisi in, placerat rutrum nisl. Nullam dapibus purus nec nisl aliquet, vel auctor nulla consequat.</p>
</div>
</div>
<div id="scroll-disabled">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed laoreet quam non mi sagittis hendrerit. Nulla tristique eget nibh et finibus. Pellentesque placerat hendrerit enim eu convallis. Sed posuere dolor ac est finibus, non egestas lacus pellentesque. Mauris dictum nibh id nisi venenatis dictum. Etiam sit amet congue neque. Cras molestie nulla faucibus ante molestie, a suscipit ligula sagittis. Sed condimentum orci id lacus cursus dignissim. Curabitur et urna erat. Integer sem augue, rhoncus ac venenatis a, viverra sed enim. Nullam fermentum auctor risus nec congue. Sed leo libero, lobortis vitae nisi in, placerat rutrum nisl. Nullam dapibus purus nec nisl aliquet, vel auctor nulla consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed laoreet quam non mi sagittis hendrerit. Nulla tristique eget nibh et finibus. Pellentesque placerat hendrerit enim eu convallis. Sed posuere dolor ac est finibus, non egestas lacus pellentesque. Mauris dictum nibh id nisi venenatis dictum. Etiam sit amet congue neque. Cras molestie nulla faucibus ante molestie, a suscipit ligula sagittis. Sed condimentum orci id lacus cursus dignissim. Curabitur et urna erat. Integer sem augue, rhoncus ac venenatis a, viverra sed enim. Nullam fermentum auctor risus nec congue. Sed leo libero, lobortis vitae nisi in, placerat rutrum nisl. Nullam dapibus purus nec nisl aliquet, vel auctor nulla consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed laoreet quam non mi sagittis hendrerit. Nulla tristique eget nibh et finibus. Pellentesque placerat hendrerit enim eu convallis. Sed posuere dolor ac est finibus, non egestas lacus pellentesque. Mauris dictum nibh id nisi venenatis dictum. Etiam sit amet congue neque. Cras molestie nulla faucibus ante molestie, a suscipit ligula sagittis. Sed condimentum orci id lacus cursus dignissim. Curabitur et urna erat. Integer sem augue, rhoncus ac venenatis a, viverra sed enim. Nullam fermentum auctor risus nec congue. Sed leo libero, lobortis vitae nisi in, placerat rutrum nisl. Nullam dapibus purus nec nisl aliquet, vel auctor nulla consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed laoreet quam non mi sagittis hendrerit. Nulla tristique eget nibh et finibus. Pellentesque placerat hendrerit enim eu convallis. Sed posuere dolor ac est finibus, non egestas lacus pellentesque. Mauris dictum nibh id nisi venenatis dictum. Etiam sit amet congue neque. Cras molestie nulla faucibus ante molestie, a suscipit ligula sagittis. Sed condimentum orci id lacus cursus dignissim. Curabitur et urna erat. Integer sem augue, rhoncus ac venenatis a, viverra sed enim. Nullam fermentum auctor risus nec congue. Sed leo libero, lobortis vitae nisi in, placerat rutrum nisl. Nullam dapibus purus nec nisl aliquet, vel auctor nulla consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed laoreet quam non mi sagittis hendrerit. Nulla tristique eget nibh et finibus. Pellentesque placerat hendrerit enim eu convallis. Sed posuere dolor ac est finibus, non egestas lacus pellentesque. Mauris dictum nibh id nisi venenatis dictum. Etiam sit amet congue neque. Cras molestie nulla faucibus ante molestie, a suscipit ligula sagittis. Sed condimentum orci id lacus cursus dignissim. Curabitur et urna erat. Integer sem augue, rhoncus ac venenatis a, viverra sed enim. Nullam fermentum auctor risus nec congue. Sed leo libero, lobortis vitae nisi in, placerat rutrum nisl. Nullam dapibus purus nec nisl aliquet, vel auctor nulla consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed laoreet quam non mi sagittis hendrerit. Nulla tristique eget nibh et finibus. Pellentesque placerat hendrerit enim eu convallis. Sed posuere dolor ac est finibus, non egestas lacus pellentesque. Mauris dictum nibh id nisi venenatis dictum. Etiam sit amet congue neque. Cras molestie nulla faucibus ante molestie, a suscipit ligula sagittis. Sed condimentum orci id lacus cursus dignissim. Curabitur et urna erat. Integer sem augue, rhoncus ac venenatis a, viverra sed enim. Nullam fermentum auctor risus nec congue. Sed leo libero, lobortis vitae nisi in, placerat rutrum nisl. Nullam dapibus purus nec nisl aliquet, vel auctor nulla consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed laoreet quam non mi sagittis hendrerit. Nulla tristique eget nibh et finibus. Pellentesque placerat hendrerit enim eu convallis. Sed posuere dolor ac est finibus, non egestas lacus pellentesque. Mauris dictum nibh id nisi venenatis dictum. Etiam sit amet congue neque. Cras molestie nulla faucibus ante molestie, a suscipit ligula sagittis. Sed condimentum orci id lacus cursus dignissim. Curabitur et urna erat. Integer sem augue, rhoncus ac venenatis a, viverra sed enim. Nullam fermentum auctor risus nec congue. Sed leo libero, lobortis vitae nisi in, placerat rutrum nisl. Nullam dapibus purus nec nisl aliquet, vel auctor nulla consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed laoreet quam non mi sagittis hendrerit. Nulla tristique eget nibh et finibus. Pellentesque placerat hendrerit enim eu convallis. Sed posuere dolor ac est finibus, non egestas lacus pellentesque. Mauris dictum nibh id nisi venenatis dictum. Etiam sit amet congue neque. Cras molestie nulla faucibus ante molestie, a suscipit ligula sagittis. Sed condimentum orci id lacus cursus dignissim. Curabitur et urna erat. Integer sem augue, rhoncus ac venenatis a, viverra sed enim. Nullam fermentum auctor risus nec congue. Sed leo libero, lobortis vitae nisi in, placerat rutrum nisl. Nullam dapibus purus nec nisl aliquet, vel auctor nulla consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed laoreet quam non mi sagittis hendrerit. Nulla tristique eget nibh et finibus. Pellentesque placerat hendrerit enim eu convallis. Sed posuere dolor ac est finibus, non egestas lacus pellentesque. Mauris dictum nibh id nisi venenatis dictum. Etiam sit amet congue neque. Cras molestie nulla faucibus ante molestie, a suscipit ligula sagittis. Sed condimentum orci id lacus cursus dignissim. Curabitur et urna erat. Integer sem augue, rhoncus ac venenatis a, viverra sed enim. Nullam fermentum auctor risus nec congue. Sed leo libero, lobortis vitae nisi in, placerat rutrum nisl. Nullam dapibus purus nec nisl aliquet, vel auctor nulla consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed laoreet quam non mi sagittis hendrerit. Nulla tristique eget nibh et finibus. Pellentesque placerat hendrerit enim eu convallis. Sed posuere dolor ac est finibus, non egestas lacus pellentesque. Mauris dictum nibh id nisi venenatis dictum. Etiam sit amet congue neque. Cras molestie nulla faucibus ante molestie, a suscipit ligula sagittis. Sed condimentum orci id lacus cursus dignissim. Curabitur et urna erat. Integer sem augue, rhoncus ac venenatis a, viverra sed enim. Nullam fermentum auctor risus nec congue. Sed leo libero, lobortis vitae nisi in, placerat rutrum nisl. Nullam dapibus purus nec nisl aliquet, vel auctor nulla consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed laoreet quam non mi sagittis hendrerit. Nulla tristique eget nibh et finibus. Pellentesque placerat hendrerit enim eu convallis. Sed posuere dolor ac est finibus, non egestas lacus pellentesque. Mauris dictum nibh id nisi venenatis dictum. Etiam sit amet congue neque. Cras molestie nulla faucibus ante molestie, a suscipit ligula sagittis. Sed condimentum orci id lacus cursus dignissim. Curabitur et urna erat. Integer sem augue, rhoncus ac venenatis a, viverra sed enim. Nullam fermentum auctor risus nec congue. Sed leo libero, lobortis vitae nisi in, placerat rutrum nisl. Nullam dapibus purus nec nisl aliquet, vel auctor nulla consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed laoreet quam non mi sagittis hendrerit. Nulla tristique eget nibh et finibus. Pellentesque placerat hendrerit enim eu convallis. Sed posuere dolor ac est finibus, non egestas lacus pellentesque. Mauris dictum nibh id nisi venenatis dictum. Etiam sit amet congue neque. Cras molestie nulla faucibus ante molestie, a suscipit ligula sagittis. Sed condimentum orci id lacus cursus dignissim. Curabitur et urna erat. Integer sem augue, rhoncus ac venenatis a, viverra sed enim. Nullam fermentum auctor risus nec congue. Sed leo libero, lobortis vitae nisi in, placerat rutrum nisl. Nullam dapibus purus nec nisl aliquet, vel auctor nulla consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed laoreet quam non mi sagittis hendrerit. Nulla tristique eget nibh et finibus. Pellentesque placerat hendrerit enim eu convallis. Sed posuere dolor ac est finibus, non egestas lacus pellentesque. Mauris dictum nibh id nisi venenatis dictum. Etiam sit amet congue neque. Cras molestie nulla faucibus ante molestie, a suscipit ligula sagittis. Sed condimentum orci id lacus cursus dignissim. Curabitur et urna erat. Integer sem augue, rhoncus ac venenatis a, viverra sed enim. Nullam fermentum auctor risus nec congue. Sed leo libero, lobortis vitae nisi in, placerat rutrum nisl. Nullam dapibus purus nec nisl aliquet, vel auctor nulla consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed laoreet quam non mi sagittis hendrerit. Nulla tristique eget nibh et finibus. Pellentesque placerat hendrerit enim eu convallis. Sed posuere dolor ac est finibus, non egestas lacus pellentesque. Mauris dictum nibh id nisi venenatis dictum. Etiam sit amet congue neque. Cras molestie nulla faucibus ante molestie, a suscipit ligula sagittis. Sed condimentum orci id lacus cursus dignissim. Curabitur et urna erat. Integer sem augue, rhoncus ac venenatis a, viverra sed enim. Nullam fermentum auctor risus nec congue. Sed leo libero, lobortis vitae nisi in, placerat rutrum nisl. Nullam dapibus purus nec nisl aliquet, vel auctor nulla consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed laoreet quam non mi sagittis hendrerit. Nulla tristique eget nibh et finibus. Pellentesque placerat hendrerit enim eu convallis. Sed posuere dolor ac est finibus, non egestas lacus pellentesque. Mauris dictum nibh id nisi venenatis dictum. Etiam sit amet congue neque. Cras molestie nulla faucibus ante molestie, a suscipit ligula sagittis. Sed condimentum orci id lacus cursus dignissim. Curabitur et urna erat. Integer sem augue, rhoncus ac venenatis a, viverra sed enim. Nullam fermentum auctor risus nec congue. Sed leo libero, lobortis vitae nisi in, placerat rutrum nisl. Nullam dapibus purus nec nisl aliquet, vel auctor nulla consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed laoreet quam non mi sagittis hendrerit. Nulla tristique eget nibh et finibus. Pellentesque placerat hendrerit enim eu convallis. Sed posuere dolor ac est finibus, non egestas lacus pellentesque. Mauris dictum nibh id nisi venenatis dictum. Etiam sit amet congue neque. Cras molestie nulla faucibus ante molestie, a suscipit ligula sagittis. Sed condimentum orci id lacus cursus dignissim. Curabitur et urna erat. Integer sem augue, rhoncus ac venenatis a, viverra sed enim. Nullam fermentum auctor risus nec congue. Sed leo libero, lobortis vitae nisi in, placerat rutrum nisl. Nullam dapibus purus nec nisl aliquet, vel auctor nulla consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed laoreet quam non mi sagittis hendrerit. Nulla tristique eget nibh et finibus. Pellentesque placerat hendrerit enim eu convallis. Sed posuere dolor ac est finibus, non egestas lacus pellentesque. Mauris dictum nibh id nisi venenatis dictum. Etiam sit amet congue neque. Cras molestie nulla faucibus ante molestie, a suscipit ligula sagittis. Sed condimentum orci id lacus cursus dignissim. Curabitur et urna erat. Integer sem augue, rhoncus ac venenatis a, viverra sed enim. Nullam fermentum auctor risus nec congue. Sed leo libero, lobortis vitae nisi in, placerat rutrum nisl. Nullam dapibus purus nec nisl aliquet, vel auctor nulla consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed laoreet quam non mi sagittis hendrerit. Nulla tristique eget nibh et finibus. Pellentesque placerat hendrerit enim eu convallis. Sed posuere dolor ac est finibus, non egestas lacus pellentesque. Mauris dictum nibh id nisi venenatis dictum. Etiam sit amet congue neque. Cras molestie nulla faucibus ante molestie, a suscipit ligula sagittis. Sed condimentum orci id lacus cursus dignissim. Curabitur et urna erat. Integer sem augue, rhoncus ac venenatis a, viverra sed enim. Nullam fermentum auctor risus nec congue. Sed leo libero, lobortis vitae nisi in, placerat rutrum nisl. Nullam dapibus purus nec nisl aliquet, vel auctor nulla consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed laoreet quam non mi sagittis hendrerit. Nulla tristique eget nibh et finibus. Pellentesque placerat hendrerit enim eu convallis. Sed posuere dolor ac est finibus, non egestas lacus pellentesque. Mauris dictum nibh id nisi venenatis dictum. Etiam sit amet congue neque. Cras molestie nulla faucibus ante molestie, a suscipit ligula sagittis. Sed condimentum orci id lacus cursus dignissim. Curabitur et urna erat. Integer sem augue, rhoncus ac venenatis a, viverra sed enim. Nullam fermentum auctor risus nec congue. Sed leo libero, lobortis vitae nisi in, placerat rutrum nisl. Nullam dapibus purus nec nisl aliquet, vel auctor nulla consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed laoreet quam non mi sagittis hendrerit. Nulla tristique eget nibh et finibus. Pellentesque placerat hendrerit enim eu convallis. Sed posuere dolor ac est finibus, non egestas lacus pellentesque. Mauris dictum nibh id nisi venenatis dictum. Etiam sit amet congue neque. Cras molestie nulla faucibus ante molestie, a suscipit ligula sagittis. Sed condimentum orci id lacus cursus dignissim. Curabitur et urna erat. Integer sem augue, rhoncus ac venenatis a, viverra sed enim. Nullam fermentum auctor risus nec congue. Sed leo libero, lobortis vitae nisi in, placerat rutrum nisl. Nullam dapibus purus nec nisl aliquet, vel auctor nulla consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed laoreet quam non mi sagittis hendrerit. Nulla tristique eget nibh et finibus. Pellentesque placerat hendrerit enim eu convallis. Sed posuere dolor ac est finibus, non egestas lacus pellentesque. Mauris dictum nibh id nisi venenatis dictum. Etiam sit amet congue neque. Cras molestie nulla faucibus ante molestie, a suscipit ligula sagittis. Sed condimentum orci id lacus cursus dignissim. Curabitur et urna erat. Integer sem augue, rhoncus ac venenatis a, viverra sed enim. Nullam fermentum auctor risus nec congue. Sed leo libero, lobortis vitae nisi in, placerat rutrum nisl. Nullam dapibus purus nec nisl aliquet, vel auctor nulla consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed laoreet quam non mi sagittis hendrerit. Nulla tristique eget nibh et finibus. Pellentesque placerat hendrerit enim eu convallis. Sed posuere dolor ac est finibus, non egestas lacus pellentesque. Mauris dictum nibh id nisi venenatis dictum. Etiam sit amet congue neque. Cras molestie nulla faucibus ante molestie, a suscipit ligula sagittis. Sed condimentum orci id lacus cursus dignissim. Curabitur et urna erat. Integer sem augue, rhoncus ac venenatis a, viverra sed enim. Nullam fermentum auctor risus nec congue. Sed leo libero, lobortis vitae nisi in, placerat rutrum nisl. Nullam dapibus purus nec nisl aliquet, vel auctor nulla consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed laoreet quam non mi sagittis hendrerit. Nulla tristique eget nibh et finibus. Pellentesque placerat hendrerit enim eu convallis. Sed posuere dolor ac est finibus, non egestas lacus pellentesque. Mauris dictum nibh id nisi venenatis dictum. Etiam sit amet congue neque. Cras molestie nulla faucibus ante molestie, a suscipit ligula sagittis. Sed condimentum orci id lacus cursus dignissim. Curabitur et urna erat. Integer sem augue, rhoncus ac venenatis a, viverra sed enim. Nullam fermentum auctor risus nec congue. Sed leo libero, lobortis vitae nisi in, placerat rutrum nisl. Nullam dapibus purus nec nisl aliquet, vel auctor nulla consequat.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed laoreet quam non mi sagittis hendrerit. Nulla tristique eget nibh et finibus. Pellentesque placerat hendrerit enim eu convallis. Sed posuere dolor ac est finibus, non egestas lacus pellentesque. Mauris dictum nibh id nisi venenatis dictum. Etiam sit amet congue neque. Cras molestie nulla faucibus ante molestie, a suscipit ligula sagittis. Sed condimentum orci id lacus cursus dignissim. Curabitur et urna erat. Integer sem augue, rhoncus ac venenatis a, viverra sed enim. Nullam fermentum auctor risus nec congue. Sed leo libero, lobortis vitae nisi in, placerat rutrum nisl. Nullam dapibus purus nec nisl aliquet, vel auctor nulla consequat.</p>
</div>
</body>
</html>
Here's the JSFiddle: https://jsfiddle.net/56z3aorc/2/
And direct link to results if you wanna try on mobile: https://jsfiddle.net/56z3aorc/2/show
I just found the solution myself.
Disable scrolling on the body or in the element you want by using event.preventDefault(); on a touchmove event listener.
After doing that, you can allow scrolling on the element you need by using event.stopPropagation(); on a touchmove event listener.
If you need to keep IOs from scrolling the elements in the background of the scrollable element (after it finnished it own scrolling) just do event.stopPropagation(); first and then (if the element is full scrolled) do event.preventDefault();.
I hope it helps other people having the same issue I was.
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've got a header which is going to be twice the height of the viewport. When it gets to the end of the header, I've made a simple parallax effect which then reveals the content underneath, however, when you scroll, the content is flicking (I'm guessing because it's having calculate the scroll and adjust with css style "top:xxx"). Does anyone have any ideas on how I can smooth this out or have any tutorials which have similar functionality?
$(window).scroll(function(e){
var scroll = $(window).scrollTop();
var h = $(window).height()*2;
if (scroll < h){
$('#wrapper').css({'top':scroll })
}
});
#top {
width:100%;
position:absolute;
left:0;
z-index:99;
top:0;
height: 200vh;
background: red;
}
#wrapper {
position:Relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="top"></div>
<div id="wrapper">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tempus turpis ligula, ut sagittis ipsum dapibus sed. Proin ipsum risus, vulputate non mi dignissim, elementum commodo arcu. In tellus mauris, semper quis imperdiet quis, semper quis neque. Etiam dolor mi, feugiat non sem pharetra, porta molestie ligula. Pellentesque sed cursus enim, sed interdum ipsum. Donec eu sem eget lorem ullamcorper cursus. Fusce molestie tempor venenatis. Vivamus pellentesque blandit odio, at iaculis lorem ultricies id. Donec sollicitudin, risus eu vehicula faucibus, nisi nisl vestibulum magna, vel eleifend arcu ex ac quam. Duis fringilla tellus sit amet ipsum pulvinar, eu ultricies elit mattis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Curabitur vitae blandit nisi.
</p>
<p>
Praesent placerat quam non dolor faucibus feugiat. Quisque rutrum pellentesque nulla id consequat. Nunc varius, tortor sed vehicula volutpat, nunc leo varius tellus, eu imperdiet magna lacus lobortis mauris. Maecenas dapibus massa et nunc porttitor, ac eleifend arcu euismod. Vestibulum malesuada ex facilisis erat sagittis, at hendrerit nibh imperdiet. Integer in tempus dui. Vestibulum a neque orci. Vestibulum vel purus at quam consequat iaculis nec at ligula. Fusce id iaculis elit. Suspendisse imperdiet quis turpis quis viverra. Suspendisse consequat dignissim leo, vel posuere felis dapibus at. Vivamus sed maximus dolor, ut pellentesque tellus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tempus turpis ligula, ut sagittis ipsum dapibus sed. Proin ipsum risus, vulputate non mi dignissim, elementum commodo arcu. In tellus mauris, semper quis imperdiet quis, semper quis neque. Etiam dolor mi, feugiat non sem pharetra, porta molestie ligula. Pellentesque sed cursus enim, sed interdum ipsum. Donec eu sem eget lorem ullamcorper cursus. Fusce molestie tempor venenatis. Vivamus pellentesque blandit odio, at iaculis lorem ultricies id. Donec sollicitudin, risus eu vehicula faucibus, nisi nisl vestibulum magna, vel eleifend arcu ex ac quam. Duis fringilla tellus sit amet ipsum pulvinar, eu ultricies elit mattis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Curabitur vitae blandit nisi.
</p>
<p>
Praesent placerat quam non dolor faucibus feugiat. Quisque rutrum pellentesque nulla id consequat. Nunc varius, tortor sed vehicula volutpat, nunc leo varius tellus, eu imperdiet magna lacus lobortis mauris. Maecenas dapibus massa et nunc porttitor, ac eleifend arcu euismod. Vestibulum malesuada ex facilisis erat sagittis, at hendrerit nibh imperdiet. Integer in tempus dui. Vestibulum a neque orci. Vestibulum vel purus at quam consequat iaculis nec at ligula. Fusce id iaculis elit. Suspendisse imperdiet quis turpis quis viverra. Suspendisse consequat dignissim leo, vel posuere felis dapibus at. Vivamus sed maximus dolor, ut pellentesque tellus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tempus turpis ligula, ut sagittis ipsum dapibus sed. Proin ipsum risus, vulputate non mi dignissim, elementum commodo arcu. In tellus mauris, semper quis imperdiet quis, semper quis neque. Etiam dolor mi, feugiat non sem pharetra, porta molestie ligula. Pellentesque sed cursus enim, sed interdum ipsum. Donec eu sem eget lorem ullamcorper cursus. Fusce molestie tempor venenatis. Vivamus pellentesque blandit odio, at iaculis lorem ultricies id. Donec sollicitudin, risus eu vehicula faucibus, nisi nisl vestibulum magna, vel eleifend arcu ex ac quam. Duis fringilla tellus sit amet ipsum pulvinar, eu ultricies elit mattis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Curabitur vitae blandit nisi.
</p>
<p>
Praesent placerat quam non dolor faucibus feugiat. Quisque rutrum pellentesque nulla id consequat. Nunc varius, tortor sed vehicula volutpat, nunc leo varius tellus, eu imperdiet magna lacus lobortis mauris. Maecenas dapibus massa et nunc porttitor, ac eleifend arcu euismod. Vestibulum malesuada ex facilisis erat sagittis, at hendrerit nibh imperdiet. Integer in tempus dui. Vestibulum a neque orci. Vestibulum vel purus at quam consequat iaculis nec at ligula. Fusce id iaculis elit. Suspendisse imperdiet quis turpis quis viverra. Suspendisse consequat dignissim leo, vel posuere felis dapibus at. Vivamus sed maximus dolor, ut pellentesque tellus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tempus turpis ligula, ut sagittis ipsum dapibus sed. Proin ipsum risus, vulputate non mi dignissim, elementum commodo arcu. In tellus mauris, semper quis imperdiet quis, semper quis neque. Etiam dolor mi, feugiat non sem pharetra, porta molestie ligula. Pellentesque sed cursus enim, sed interdum ipsum. Donec eu sem eget lorem ullamcorper cursus. Fusce molestie tempor venenatis. Vivamus pellentesque blandit odio, at iaculis lorem ultricies id. Donec sollicitudin, risus eu vehicula faucibus, nisi nisl vestibulum magna, vel eleifend arcu ex ac quam. Duis fringilla tellus sit amet ipsum pulvinar, eu ultricies elit mattis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Curabitur vitae blandit nisi.
</p>
<p>
Praesent placerat quam non dolor faucibus feugiat. Quisque rutrum pellentesque nulla id consequat. Nunc varius, tortor sed vehicula volutpat, nunc leo varius tellus, eu imperdiet magna lacus lobortis mauris. Maecenas dapibus massa et nunc porttitor, ac eleifend arcu euismod. Vestibulum malesuada ex facilisis erat sagittis, at hendrerit nibh imperdiet. Integer in tempus dui. Vestibulum a neque orci. Vestibulum vel purus at quam consequat iaculis nec at ligula. Fusce id iaculis elit. Suspendisse imperdiet quis turpis quis viverra. Suspendisse consequat dignissim leo, vel posuere felis dapibus at. Vivamus sed maximus dolor, ut pellentesque tellus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
</div>
I see the issue you are talking about on Mac in Chrome.
You can fix the "stuttering" with:
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
Your code with new lines of code implemented:
$(window).scroll(function(e){
var scroll = $(window).scrollTop();
var h = $(window).height()*2;
if (scroll < h){
$('#wrapper').css({'top':scroll })
}
});
#top {
width:100%;
position:absolute;
left:0;
z-index:99;
top:0;
height: 200vh;
background: red;
}
#wrapper {
position:Relative;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="top"></div>
<div id="wrapper">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tempus turpis ligula, ut sagittis ipsum dapibus sed. Proin ipsum risus, vulputate non mi dignissim, elementum commodo arcu. In tellus mauris, semper quis imperdiet quis, semper quis neque. Etiam dolor mi, feugiat non sem pharetra, porta molestie ligula. Pellentesque sed cursus enim, sed interdum ipsum. Donec eu sem eget lorem ullamcorper cursus. Fusce molestie tempor venenatis. Vivamus pellentesque blandit odio, at iaculis lorem ultricies id. Donec sollicitudin, risus eu vehicula faucibus, nisi nisl vestibulum magna, vel eleifend arcu ex ac quam. Duis fringilla tellus sit amet ipsum pulvinar, eu ultricies elit mattis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Curabitur vitae blandit nisi.
</p>
<p>
Praesent placerat quam non dolor faucibus feugiat. Quisque rutrum pellentesque nulla id consequat. Nunc varius, tortor sed vehicula volutpat, nunc leo varius tellus, eu imperdiet magna lacus lobortis mauris. Maecenas dapibus massa et nunc porttitor, ac eleifend arcu euismod. Vestibulum malesuada ex facilisis erat sagittis, at hendrerit nibh imperdiet. Integer in tempus dui. Vestibulum a neque orci. Vestibulum vel purus at quam consequat iaculis nec at ligula. Fusce id iaculis elit. Suspendisse imperdiet quis turpis quis viverra. Suspendisse consequat dignissim leo, vel posuere felis dapibus at. Vivamus sed maximus dolor, ut pellentesque tellus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tempus turpis ligula, ut sagittis ipsum dapibus sed. Proin ipsum risus, vulputate non mi dignissim, elementum commodo arcu. In tellus mauris, semper quis imperdiet quis, semper quis neque. Etiam dolor mi, feugiat non sem pharetra, porta molestie ligula. Pellentesque sed cursus enim, sed interdum ipsum. Donec eu sem eget lorem ullamcorper cursus. Fusce molestie tempor venenatis. Vivamus pellentesque blandit odio, at iaculis lorem ultricies id. Donec sollicitudin, risus eu vehicula faucibus, nisi nisl vestibulum magna, vel eleifend arcu ex ac quam. Duis fringilla tellus sit amet ipsum pulvinar, eu ultricies elit mattis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Curabitur vitae blandit nisi.
</p>
<p>
Praesent placerat quam non dolor faucibus feugiat. Quisque rutrum pellentesque nulla id consequat. Nunc varius, tortor sed vehicula volutpat, nunc leo varius tellus, eu imperdiet magna lacus lobortis mauris. Maecenas dapibus massa et nunc porttitor, ac eleifend arcu euismod. Vestibulum malesuada ex facilisis erat sagittis, at hendrerit nibh imperdiet. Integer in tempus dui. Vestibulum a neque orci. Vestibulum vel purus at quam consequat iaculis nec at ligula. Fusce id iaculis elit. Suspendisse imperdiet quis turpis quis viverra. Suspendisse consequat dignissim leo, vel posuere felis dapibus at. Vivamus sed maximus dolor, ut pellentesque tellus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tempus turpis ligula, ut sagittis ipsum dapibus sed. Proin ipsum risus, vulputate non mi dignissim, elementum commodo arcu. In tellus mauris, semper quis imperdiet quis, semper quis neque. Etiam dolor mi, feugiat non sem pharetra, porta molestie ligula. Pellentesque sed cursus enim, sed interdum ipsum. Donec eu sem eget lorem ullamcorper cursus. Fusce molestie tempor venenatis. Vivamus pellentesque blandit odio, at iaculis lorem ultricies id. Donec sollicitudin, risus eu vehicula faucibus, nisi nisl vestibulum magna, vel eleifend arcu ex ac quam. Duis fringilla tellus sit amet ipsum pulvinar, eu ultricies elit mattis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Curabitur vitae blandit nisi.
</p>
<p>
Praesent placerat quam non dolor faucibus feugiat. Quisque rutrum pellentesque nulla id consequat. Nunc varius, tortor sed vehicula volutpat, nunc leo varius tellus, eu imperdiet magna lacus lobortis mauris. Maecenas dapibus massa et nunc porttitor, ac eleifend arcu euismod. Vestibulum malesuada ex facilisis erat sagittis, at hendrerit nibh imperdiet. Integer in tempus dui. Vestibulum a neque orci. Vestibulum vel purus at quam consequat iaculis nec at ligula. Fusce id iaculis elit. Suspendisse imperdiet quis turpis quis viverra. Suspendisse consequat dignissim leo, vel posuere felis dapibus at. Vivamus sed maximus dolor, ut pellentesque tellus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer tempus turpis ligula, ut sagittis ipsum dapibus sed. Proin ipsum risus, vulputate non mi dignissim, elementum commodo arcu. In tellus mauris, semper quis imperdiet quis, semper quis neque. Etiam dolor mi, feugiat non sem pharetra, porta molestie ligula. Pellentesque sed cursus enim, sed interdum ipsum. Donec eu sem eget lorem ullamcorper cursus. Fusce molestie tempor venenatis. Vivamus pellentesque blandit odio, at iaculis lorem ultricies id. Donec sollicitudin, risus eu vehicula faucibus, nisi nisl vestibulum magna, vel eleifend arcu ex ac quam. Duis fringilla tellus sit amet ipsum pulvinar, eu ultricies elit mattis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Curabitur vitae blandit nisi.
</p>
<p>
Praesent placerat quam non dolor faucibus feugiat. Quisque rutrum pellentesque nulla id consequat. Nunc varius, tortor sed vehicula volutpat, nunc leo varius tellus, eu imperdiet magna lacus lobortis mauris. Maecenas dapibus massa et nunc porttitor, ac eleifend arcu euismod. Vestibulum malesuada ex facilisis erat sagittis, at hendrerit nibh imperdiet. Integer in tempus dui. Vestibulum a neque orci. Vestibulum vel purus at quam consequat iaculis nec at ligula. Fusce id iaculis elit. Suspendisse imperdiet quis turpis quis viverra. Suspendisse consequat dignissim leo, vel posuere felis dapibus at. Vivamus sed maximus dolor, ut pellentesque tellus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
</div>
I'm able to add and remove classes that make a div float and unfloat, but I'm restricted to having to enter a scroll amount until the classes gets added.
What I'd like to have, is for the class to be added when the bottom of the div goes out of view, or past the viewport.
Likewise, for the class to be removed when the bottom of the div (in it's original place) can be seen again - although I'm not sure about this, as the div will always be visible now.. as it's being floated.
http://jsfiddle.net/r440tggy/
var header = $("#request-consultation");
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 750) {
header.addClass("fixed-bottom-left");
} else {
header.removeClass("fixed-bottom-left");
}
});
Getting the element position before the scroll event makes sure that rendering problems don't happen.
You just need to get the elements position from the top, add the height and do a check against that.
var header = $("#request-consultation");
var element = header.offset().top + header.outerHeight();
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= element) {
header.addClass("fixed-bottom-left");
} else {
header.removeClass("fixed-bottom-left");
}
});
#request-consultation {
float: right;
width: 250px;
border: 2px solid;
padding: 10px;
margin: 10px;
}
.fixed-bottom-left {
float: none;
position: fixed;
bottom: 0;
left: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="request-consultation">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vitae dolor ligula. Cras at purus eget ante gravida rhoncus. Aliquam dictum, odio a fermentum mollis, lorem ante sagittis est, sed pharetra risus leo sed augue. Aenean sed massa quis elit
tincidunt blandit.</p>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vitae dolor ligula. Cras at purus eget ante gravida rhoncus. Aliquam dictum, odio a fermentum mollis, lorem ante sagittis est, sed pharetra risus leo sed augue. Aenean sed massa quis elit
tincidunt blandit. Proin elementum cursus pretium. Mauris tempor arcu nec sem ullamcorper dictum. Nulla eu tellus vitae justo aliquet maximus. Fusce id mauris sed sapien fermentum interdum. Nunc laoreet ligula sed quam scelerisque, at faucibus elit
euismod. Donec et est imperdiet, pulvinar augue cursus, tincidunt eros. Donec nec ornare mi. Duis eget lacus sed nisl hendrerit elementum sed vel metus. Integer vel lacus at ex lobortis dignissim non in tortor. Vestibulum sit amet metus non velit varius
tristique. Pellentesque in lorem sed mi efficitur elementum. Suspendisse eu fermentum neque, et rhoncus lectus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vitae dolor ligula. Cras at purus eget ante gravida rhoncus. Aliquam dictum, odio a fermentum mollis, lorem ante sagittis est, sed pharetra risus leo sed augue. Aenean sed massa quis elit
tincidunt blandit. Proin elementum cursus pretium. Mauris tempor arcu nec sem ullamcorper dictum. Nulla eu tellus vitae justo aliquet maximus. Fusce id mauris sed sapien fermentum interdum. Nunc laoreet ligula sed quam scelerisque, at faucibus elit
euismod. Donec et est imperdiet, pulvinar augue cursus, tincidunt eros. Donec nec ornare mi. Duis eget lacus sed nisl hendrerit elementum sed vel metus. Integer vel lacus at ex lobortis dignissim non in tortor. Vestibulum sit amet metus non velit varius
tristique. Pellentesque in lorem sed mi efficitur elementum. Suspendisse eu fermentum neque, et rhoncus lectus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vitae dolor ligula. Cras at purus eget ante gravida rhoncus. Aliquam dictum, odio a fermentum mollis, lorem ante sagittis est, sed pharetra risus leo sed augue. Aenean sed massa quis elit
tincidunt blandit. Proin elementum cursus pretium. Mauris tempor arcu nec sem ullamcorper dictum. Nulla eu tellus vitae justo aliquet maximus. Fusce id mauris sed sapien fermentum interdum. Nunc laoreet ligula sed quam scelerisque, at faucibus elit
euismod. Donec et est imperdiet, pulvinar augue cursus, tincidunt eros. Donec nec ornare mi. Duis eget lacus sed nisl hendrerit elementum sed vel metus. Integer vel lacus at ex lobortis dignissim non in tortor. Vestibulum sit amet metus non velit varius
tristique. Pellentesque in lorem sed mi efficitur elementum. Suspendisse eu fermentum neque, et rhoncus lectus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vitae dolor ligula. Cras at purus eget ante gravida rhoncus. Aliquam dictum, odio a fermentum mollis, lorem ante sagittis est, sed pharetra risus leo sed augue. Aenean sed massa quis elit
tincidunt blandit. Proin elementum cursus pretium. Mauris tempor arcu nec sem ullamcorper dictum. Nulla eu tellus vitae justo aliquet maximus. Fusce id mauris sed sapien fermentum interdum. Nunc laoreet ligula sed quam scelerisque, at faucibus elit
euismod. Donec et est imperdiet, pulvinar augue cursus, tincidunt eros. Donec nec ornare mi. Duis eget lacus sed nisl hendrerit elementum sed vel metus. Integer vel lacus at ex lobortis dignissim non in tortor. Vestibulum sit amet metus non velit varius
tristique. Pellentesque in lorem sed mi efficitur elementum. Suspendisse eu fermentum neque, et rhoncus lectus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vitae dolor ligula. Cras at purus eget ante gravida rhoncus. Aliquam dictum, odio a fermentum mollis, lorem ante sagittis est, sed pharetra risus leo sed augue. Aenean sed massa quis elit
tincidunt blandit. Proin elementum cursus pretium. Mauris tempor arcu nec sem ullamcorper dictum. Nulla eu tellus vitae justo aliquet maximus. Fusce id mauris sed sapien fermentum interdum. Nunc laoreet ligula sed quam scelerisque, at faucibus elit
euismod. Donec et est imperdiet, pulvinar augue cursus, tincidunt eros. Donec nec ornare mi. Duis eget lacus sed nisl hendrerit elementum sed vel metus. Integer vel lacus at ex lobortis dignissim non in tortor. Vestibulum sit amet metus non velit varius
tristique. Pellentesque in lorem sed mi efficitur elementum. Suspendisse eu fermentum neque, et rhoncus lectus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vitae dolor ligula. Cras at purus eget ante gravida rhoncus. Aliquam dictum, odio a fermentum mollis, lorem ante sagittis est, sed pharetra risus leo sed augue. Aenean sed massa quis elit
tincidunt blandit. Proin elementum cursus pretium. Mauris tempor arcu nec sem ullamcorper dictum. Nulla eu tellus vitae justo aliquet maximus. Fusce id mauris sed sapien fermentum interdum. Nunc laoreet ligula sed quam scelerisque, at faucibus elit
euismod. Donec et est imperdiet, pulvinar augue cursus, tincidunt eros. Donec nec ornare mi. Duis eget lacus sed nisl hendrerit elementum sed vel metus. Integer vel lacus at ex lobortis dignissim non in tortor. Vestibulum sit amet metus non velit varius
tristique. Pellentesque in lorem sed mi efficitur elementum. Suspendisse eu fermentum neque, et rhoncus lectus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vitae dolor ligula. Cras at purus eget ante gravida rhoncus. Aliquam dictum, odio a fermentum mollis, lorem ante sagittis est, sed pharetra risus leo sed augue. Aenean sed massa quis elit
tincidunt blandit. Proin elementum cursus pretium. Mauris tempor arcu nec sem ullamcorper dictum. Nulla eu tellus vitae justo aliquet maximus. Fusce id mauris sed sapien fermentum interdum. Nunc laoreet ligula sed quam scelerisque, at faucibus elit
euismod. Donec et est imperdiet, pulvinar augue cursus, tincidunt eros. Donec nec ornare mi. Duis eget lacus sed nisl hendrerit elementum sed vel metus. Integer vel lacus at ex lobortis dignissim non in tortor. Vestibulum sit amet metus non velit varius
tristique. Pellentesque in lorem sed mi efficitur elementum. Suspendisse eu fermentum neque, et rhoncus lectus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vitae dolor ligula. Cras at purus eget ante gravida rhoncus. Aliquam dictum, odio a fermentum mollis, lorem ante sagittis est, sed pharetra risus leo sed augue. Aenean sed massa quis elit
tincidunt blandit. Proin elementum cursus pretium. Mauris tempor arcu nec sem ullamcorper dictum. Nulla eu tellus vitae justo aliquet maximus. Fusce id mauris sed sapien fermentum interdum. Nunc laoreet ligula sed quam scelerisque, at faucibus elit
euismod. Donec et est imperdiet, pulvinar augue cursus, tincidunt eros. Donec nec ornare mi. Duis eget lacus sed nisl hendrerit elementum sed vel metus. Integer vel lacus at ex lobortis dignissim non in tortor. Vestibulum sit amet metus non velit varius
tristique. Pellentesque in lorem sed mi efficitur elementum. Suspendisse eu fermentum neque, et rhoncus lectus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vitae dolor ligula. Cras at purus eget ante gravida rhoncus. Aliquam dictum, odio a fermentum mollis, lorem ante sagittis est, sed pharetra risus leo sed augue. Aenean sed massa quis elit
tincidunt blandit. Proin elementum cursus pretium. Mauris tempor arcu nec sem ullamcorper dictum. Nulla eu tellus vitae justo aliquet maximus. Fusce id mauris sed sapien fermentum interdum. Nunc laoreet ligula sed quam scelerisque, at faucibus elit
euismod. Donec et est imperdiet, pulvinar augue cursus, tincidunt eros. Donec nec ornare mi. Duis eget lacus sed nisl hendrerit elementum sed vel metus. Integer vel lacus at ex lobortis dignissim non in tortor. Vestibulum sit amet metus non velit varius
tristique. Pellentesque in lorem sed mi efficitur elementum. Suspendisse eu fermentum neque, et rhoncus lectus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vitae dolor ligula. Cras at purus eget ante gravida rhoncus. Aliquam dictum, odio a fermentum mollis, lorem ante sagittis est, sed pharetra risus leo sed augue. Aenean sed massa quis elit
tincidunt blandit. Proin elementum cursus pretium. Mauris tempor arcu nec sem ullamcorper dictum. Nulla eu tellus vitae justo aliquet maximus. Fusce id mauris sed sapien fermentum interdum. Nunc laoreet ligula sed quam scelerisque, at faucibus elit
euismod. Donec et est imperdiet, pulvinar augue cursus, tincidunt eros. Donec nec ornare mi. Duis eget lacus sed nisl hendrerit elementum sed vel metus. Integer vel lacus at ex lobortis dignissim non in tortor. Vestibulum sit amet metus non velit varius
tristique. Pellentesque in lorem sed mi efficitur elementum. Suspendisse eu fermentum neque, et rhoncus lectus.</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)