how do i add continue reading link after limited amount of text

how do i add continue reading link after limited amount of text - javascript

I want to add multiple read more links to continue reading after a limited amount of text like 1000 words or 2 paragraphs
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
var maxLength = 300;
$(".show-read-more").each(function(){
var myStr = $(this).text();
if($.trim(myStr).length > maxLength){
var newStr = myStr.substring(0, maxLength);
var removedStr = myStr.substring(maxLength, $.trim(myStr).length);
$(this).empty().html(newStr);
$(this).append(' read more...');
$(this).append('<span class="more-text">' + removedStr + '</span>');
}
});
$(".read-more").click(function(){
$(this).siblings(".more-text").contents().unwrap();
$(this).remove();
});
});
</script>
<style>
.show-read-more .more-text{
display: none;
}
</style>
</head>
<body>
<p class="show-read-more">Ut auctor velit sed consectetur rhoncus. Nunc dictum facilisis felis nec facilisis. Integer nec justo vitae orci cursus fermentum. Fusce semper, mi non tempus congue, velit leo efficitur quam, laoreet venenatis libero felis et lacus. Pellentesque mattis hendrerit nisi gravida hendrerit. Mauris sagittis tincidunt scelerisque. Vivamus lectus erat, dictum et magna quis, iaculis finibus nisl. Aliquam quis ante odio. Etiam tincidunt tellus tristique turpis tincidunt, eget condimentum urna rutrum. Donec maximus consequat dolor, sit amet condimentum ipsum gravida ac. Etiam posuere tellus mauris, et dignissim nisl rutrum quis. Mauris tincidunt ante sed velit maximus, vel tincidunt leo imperdiet. Morbi nec lacus et metus semper porttitor. Sed pellentesque ex at pellentesque scelerisque. Aliquam placerat gravida tortor, in fermentum ante commodo quis. Etiam vehicula elementum quam. Aliquam eu augue eu lacus dignissim efficitur. Proin ex metus, ornare placerat nisi at, porta lobortis turpis. Praesent euismod nec nulla ultrices maximus. Vivamus imperdiet quam ac lobortis cursus. Nam dapibus ullamcorper magna vehicula aliquam. Vivamus hendrerit molestie neque. Ut interdum diam a purus ultrices facilisis. Suspendisse molestie tempor dolor, sed tristique enim sagittis vitae. Integer eu dignissim lectus, commodo efficitur metus. Morbi quis justo finibus, interdum sem quis, imperdiet tellus. Curabitur blandit vel magna nec elementum. Vivamus tempor, urna pharetra euismod euismod, elit elit tincidunt sem, ut consectetur arcu massa non diam. Etiam scelerisque nisi magna. Nulla facilisi. Sed pharetra nunc lectus, in maximus dolor ornare sit amet.</p>
<p>Etiam posuere tellus mauris, et dignissim nisl rutrum quis. Mauris tincidunt ante sed velit maximus, vel tincidunt leo imperdiet. Morbi nec lacus et metus semper porttitor. Sed pellentesque ex at pellentesque scelerisque. Aliquam placerat gravida tortor, in fermentum ante commodo quis. Etiam vehicula elementum quam. Aliquam eu augue eu lacus dignissim efficitur. Proin ex metus, ornare placerat nisi at, porta lobortis turpis.</p>
<p>Praesent euismod nec nulla ultrices maximus. Vivamus imperdiet quam ac lobortis cursus. Nam dapibus ullamcorper magna vehicula aliquam. Vivamus hendrerit molestie neque. Ut interdum diam a purus ultrices facilisis. Suspendisse molestie tempor dolor, sed tristique enim sagittis vitae. Integer eu dignissim lectus, commodo efficitur metus. Morbi quis justo finibus, interdum sem quis, imperdiet tellus. Curabitur blandit vel magna nec elementum. Vivamus tempor, urna pharetra euismod euismod, elit elit tincidunt sem, ut consectetur arcu massa non diam. Etiam scelerisque nisi magna. Nulla facilisi. Sed pharetra nunc lectus, in maximus dolor ornare sit amet.</p>

Here is a working version
$(function() {
$(".show-read-more").each(function() {
const text = this.textContent;
const newHtml = text.match(/.{1,300}/g).map((str, i) => `<span class="more-text" hidden>${str} read more...</span>`);
$(this).html(newHtml);
$(this).find("span").eq(0).show(); // show the first
$(this).find("span a").last().remove(); // delete the last link
});
$(".show-read-more").on("click", ".read-more", function(e) {
e.preventDefault();
let $span = $(this).next(".more-text"); // span or next span
$span = $span.length>0 ? $span : $(this).parent().next(".more-text");
$span.contents().unwrap();
$(this).remove();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<p class="show-read-more">Ut auctor velit sed consectetur rhoncus. Nunc dictum facilisis felis nec facilisis. Integer nec justo vitae orci cursus fermentum. Fusce semper, mi non tempus congue, velit leo efficitur quam, laoreet venenatis libero felis et lacus. Pellentesque mattis
hendrerit nisi gravida hendrerit. Mauris sagittis tincidunt scelerisque. Vivamus lectus erat, dictum et magna quis, iaculis finibus nisl. Aliquam quis ante odio. Etiam tincidunt tellus tristique turpis tincidunt, eget condimentum urna rutrum. Donec
maximus consequat dolor, sit amet condimentum ipsum gravida ac. Etiam posuere tellus mauris, et dignissim nisl rutrum quis. Mauris tincidunt ante sed velit maximus, vel tincidunt leo imperdiet. Morbi nec lacus et metus semper porttitor. Sed pellentesque
ex at pellentesque scelerisque. Aliquam placerat gravida tortor, in fermentum ante commodo quis. Etiam vehicula elementum quam. Aliquam eu augue eu lacus dignissim efficitur. Proin ex metus, ornare placerat nisi at, porta lobortis turpis. Praesent euismod
nec nulla ultrices maximus. Vivamus imperdiet quam ac lobortis cursus. Nam dapibus ullamcorper magna vehicula aliquam. Vivamus hendrerit molestie neque. Ut interdum diam a purus ultrices facilisis. Suspendisse molestie tempor dolor, sed tristique enim
sagittis vitae. Integer eu dignissim lectus, commodo efficitur metus. Morbi quis justo finibus, interdum sem quis, imperdiet tellus. Curabitur blandit vel magna nec elementum. Vivamus tempor, urna pharetra euismod euismod, elit elit tincidunt sem, ut
consectetur arcu massa non diam. Etiam scelerisque nisi magna. Nulla facilisi. Sed pharetra nunc lectus, in maximus dolor ornare sit amet.</p>
<p>Etiam posuere tellus mauris, et dignissim nisl rutrum quis. Mauris tincidunt ante sed velit maximus, vel tincidunt leo imperdiet. Morbi nec lacus et metus semper porttitor. Sed pellentesque ex at pellentesque scelerisque. Aliquam placerat gravida tortor,
in fermentum ante commodo quis. Etiam vehicula elementum quam. Aliquam eu augue eu lacus dignissim efficitur. Proin ex metus, ornare placerat nisi at, porta lobortis turpis.</p>
<p>Praesent euismod nec nulla ultrices maximus. Vivamus imperdiet quam ac lobortis cursus. Nam dapibus ullamcorper magna vehicula aliquam. Vivamus hendrerit molestie neque. Ut interdum diam a purus ultrices facilisis. Suspendisse molestie tempor dolor, sed
tristique enim sagittis vitae. Integer eu dignissim lectus, commodo efficitur metus. Morbi quis justo finibus, interdum sem quis, imperdiet tellus. Curabitur blandit vel magna nec elementum. Vivamus tempor, urna pharetra euismod euismod, elit elit tincidunt
sem, ut consectetur arcu massa non diam. Etiam scelerisque nisi magna. Nulla facilisi. Sed pharetra nunc lectus, in maximus dolor ornare sit amet.</p>

Related

How to add read more/less in dynamic called texts

I usually call my each posts description in Laravel using
$postDescr.
<div> {{$postDescr}} </div>
I want to add Read More... after 500 string counts, if count is more than 500 and when I click Read More... it shows the remaining part of Description. And Read Less... to revert to initial state

Read the string into a JavaScript variable. Initially show the short string and a button. On button press show the whole string. On the next button press show the short string.
const span = document.querySelector('span');
const text = span.innerText;
span.innerText = text.substring(0, 500);
let showAll = false;
const button = document.querySelector('button');
button.addEventListener('click', () => {
showAll = !showAll;
span.innerText = showAll ? text : text.substring(0, 500);
button.innerText = showAll ? 'Read less' : 'Read more';
});
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dolor risus, tempus eu eros sodales, convallis consequat urna. Phasellus in dui eget purus rhoncus sodales. Fusce ut neque sit amet turpis commodo facilisis. Etiam nunc nisi, porta nec ligula nec, cursus sodales orci. In sed purus venenatis, porttitor mi sed, porta leo. Cras lacinia odio ut elit pretium blandit. Suspendisse potenti. Ut leo est, pulvinar at urna sed, bibendum vestibulum ligula. Aenean arcu justo, convallis ullamcorper ante at, commodo elementum mi.
Mauris efficitur velit in tortor pharetra, ut posuere sapien vulputate. Pellentesque venenatis quam vel suscipit consequat. Aenean suscipit lacinia libero sed varius. Sed quis convallis neque. Praesent quis nisi eu justo porta consectetur. Mauris ligula orci, ultricies quis mattis eu, viverra ut libero. Vivamus scelerisque porttitor imperdiet.
Vestibulum ipsum enim, vulputate ut libero nec, molestie placerat augue. Proin eleifend eros massa, sed convallis augue pharetra condimentum. Vestibulum auctor sem porttitor sollicitudin malesuada. Sed eget tortor ultrices, mattis lorem ac, semper tellus. Suspendisse vel quam nisi. Phasellus tincidunt nisi ut urna eleifend, at vehicula turpis ornare. Nullam viverra est at diam volutpat, nec lacinia orci malesuada. Phasellus tincidunt est sem, quis blandit orci congue sit amet. Pellentesque et sollicitudin ante. Nullam in lacus vel nunc dictum viverra eget et ex. Pellentesque sit amet dui laoreet, vulputate est eget, molestie velit. Nam eu mi eleifend, aliquam velit quis, dignissim metus.
Praesent varius quis mauris pharetra pulvinar. Phasellus tempus nulla non quam faucibus, non pulvinar nulla aliquet. Quisque tempor risus ante, nec porta metus consequat non. Ut et leo odio. In fringilla quam lorem, vel ornare diam hendrerit id. Ut vel arcu sed justo venenatis pretium. Donec ante nibh, scelerisque at vulputate a, pulvinar eget purus. Nam pharetra hendrerit faucibus. Quisque quis iaculis lacus. Aenean mollis pretium metus, vestibulum viverra mi hendrerit a.
Quisque a sem ut nisl interdum efficitur. Maecenas id vehicula purus, ac tempus felis. Sed tincidunt ligula in odio tempor volutpat. Cras dictum ex vitae viverra posuere. Pellentesque eleifend ac leo non dignissim. Mauris volutpat, arcu a pulvinar venenatis, dui tortor porttitor sem, eu congue diam ex quis nibh. Aenean feugiat egestas neque, non laoreet orci fermentum nec. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla facilisi. Phasellus sodales, dolor vitae pharetra gravida, mi erat laoreet quam, et porta velit massa et lectus. Sed mattis cursus nibh. Integer eget ligula interdum est ultrices semper. Fusce eget velit molestie, euismod arcu eget, imperdiet erat. Vivamus in eros velit. Curabitur nec dictum arcu.
Nunc ornare, enim vitae ullamcorper interdum, purus felis congue nibh, sed mattis diam lorem bibendum quam. Nunc sodales varius libero, vitae venenatis libero porta at. Praesent nec enim diam. Phasellus a turpis non odio interdum consectetur. In vitae dolor eget neque mollis venenatis id ac leo. Morbi hendrerit commodo dui, at tristique turpis pellentesque non. Integer aliquet a risus sit amet interdum. Nullam pharetra elementum augue id dictum. Curabitur elementum vehicula velit quis iaculis. Ut convallis consequat nisi, vitae tempus velit tempus id. Aliquam placerat, diam sed pulvinar faucibus, neque est mattis mauris, vel interdum tellus diam quis augue. Vestibulum quis porta dolor. Vivamus porta tristique libero.
Aenean vulputate posuere ipsum, a ornare augue viverra a. Duis semper purus lectus, in dignissim elit maximus a. In hac habitasse platea dictumst. Donec mollis tortor vel nibh elementum consectetur. Duis vel turpis nibh. Integer eget arcu in velit luctus vehicula. Suspendisse pretium felis vitae nulla mollis, ut feugiat velit gravida.
Integer condimentum diam at ipsum posuere, sit amet varius enim pretium. Nulla porttitor vitae velit vel tincidunt. Sed facilisis tempus condimentum. Suspendisse laoreet magna ut quam tincidunt semper. Mauris in urna imperdiet, tristique augue et, elementum sapien. Nullam ullamcorper suscipit massa, non feugiat nibh dictum et. Nulla risus lorem, dictum vitae libero sodales, auctor sodales justo.
Cras ligula justo, sagittis a pretium at, pellentesque et tortor. Maecenas iaculis varius tortor, in sagittis neque sodales quis. Donec aliquet lorem justo. Ut sed ligula quis metus tempus lacinia. Vivamus ut lobortis velit. Pellentesque suscipit commodo rutrum. Aenean laoreet rhoncus rhoncus. Ut ullamcorper in nisi non tempus. Aliquam eget scelerisque elit. Pellentesque rutrum sapien in lobortis placerat. Suspendisse quis urna eget turpis feugiat ornare. Quisque a enim id lacus ullamcorper feugiat. Nam egestas quam malesuada diam dictum, ut maximus arcu pharetra. Maecenas ultrices nibh lectus, vitae hendrerit est bibendum in.
Ut augue tellus, mollis ac dolor id, bibendum pulvinar purus. Ut fermentum luctus tempor. Maecenas imperdiet mi dui.</span>
<button>
Read more
</button>

Hide footer on independent column scroll down, appear on scroll up

I'm working on creating a two-column website; the two columns scroll independently. I need the footer to be hidden when the user scrolls down and to appear again once the user scrolls back up. I'm new to Javascript and I recently learned how to do this with a site that scrolls as a whole. I've already browsed through questions of that nature here too, however I'm having trouble trying to apply that to the independent columns. I got the footer to hide on scroll down of the left column, but I can't get it to reappear when scrolling up. I've put together an example of what I have. Any help would be much appreciated.
var prevScrollpos = document.getElementById("left").pageYOffset;
document.getElementById("left").onscroll = function() {
var currentScrollPos = window.pageYOffset;
if (prevScrollpos > currentScrollPos) {
document.getElementById("navbar").style.bottom = "0";
} else {
document.getElementById("navbar").style.bottom = "-50px";
}
prevScrollpos = currentScrollPos;
}
body {
margin: 0;
background-color: darkgreen;
font-family: Arial, Helvetica, sans-serif;
border-top: 9px solid #f8f25c;
}
p{
padding: 10px 20px 10px 25px;
}
#content, html, body {
height: 99%;
}
#left {
float: left;
width: 50%;
background: #fdfef9;
height: 100%;
overflow: scroll;
}
#right {
float: left;
width: 50%;
background: #4668ff;
height: 100%;
overflow: scroll;
}
#navbar {
background-color: orangered;
position: fixed;
bottom: 0;
width: 100%;
display: block;
transition: bottom 0.3s;
}
#navbar a {
float: left;
display: block;
color: black;
text-align: center;
padding: 15px;
text-decoration: none;
font-size: 17px;
}
#navbar a:hover {
text-decoration: underline;
color: black;
}
<body>
<div id="navbar">
Home
Services
Contact
</div>
<div id="content">
<div id="left">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse vestibulum venenatis purus, id viverra ante laoreet quis. Cras varius, quam at lacinia mollis, tellus massa vulputate ante, at maximus lacus erat in ex. Fusce at suscipit diam, in laoreet neque. Sed aliquam vel dui quis maximus. Nullam ultricies a nisl in consequat. Duis viverra arcu eu ultrices egestas. Duis lacinia leo a velit vehicula, in vestibulum lorem commodo. Duis id ipsum ut libero egestas blandit. Pellentesque ac magna tortor. Vivamus at ornare eros. Suspendisse interdum purus et turpis finibus, quis viverra nulla ultricies.</p>
<p>Nulla ultrices efficitur mi. Aenean facilisis lorem rhoncus dapibus consectetur. Quisque volutpat ipsum enim. Phasellus eros erat, pulvinar vel nibh tincidunt, tincidunt porta augue. Nullam aliquet at ante in ornare. Maecenas et bibendum dui, nec consectetur elit. Sed et elit vel mauris tempor facilisis. Vestibulum sed rhoncus nunc. Cras in orci condimentum, ultricies nulla eu, semper nisl. Sed dignissim nisl a pellentesque euismod. Suspendisse ut nunc a tortor mollis condimentum. Mauris sodales dolor et justo sagittis, quis euismod nunc consectetur. Nunc et condimentum nibh, non viverra risus. Aliquam facilisis mauris vitae quam fringilla interdum.</p>
<p>Morbi porta erat odio, cursus aliquam ipsum feugiat sed. Vivamus rhoncus vitae nisi in pellentesque. Donec eu diam felis. Sed dignissim euismod sem placerat porta. Integer dictum euismod nulla, non lobortis magna fermentum non. Ut et quam libero. Suspendisse at eros nec sapien tempus ornare. Nam pretium vestibulum enim quis congue. Integer in mi tincidunt, imperdiet tellus bibendum, efficitur sem. Aenean suscipit sapien quis erat accumsan congue. Cras finibus, mauris eget sollicitudin consequat, risus mauris placerat nulla, at malesuada erat ipsum vel nibh.</p>
<p>Sed malesuada rhoncus ante, non pellentesque leo lobortis quis. Integer fringilla ut erat sit amet ullamcorper. Nulla eu ultricies eros. Etiam et sollicitudin massa, sit amet finibus turpis. Duis justo sapien, volutpat eget sagittis id, hendrerit sit amet dui. Vivamus arcu dui, ultrices id interdum non, mattis id elit. Phasellus ultrices posuere nisi, at tempor eros accumsan nec. Quisque sem augue, venenatis vitae nunc non, lacinia pharetra mauris. Nullam tempor at ex in tincidunt. Morbi lobortis, ipsum in placerat interdum, metus justo vehicula lectus, vel molestie metus mi ut massa. Sed posuere ligula eget neque convallis varius.</p>
<p>Aenean imperdiet neque pulvinar dolor vestibulum aliquet. Morbi posuere odio eu condimentum consequat. Quisque dignissim lorem quis nulla vulputate, in consectetur arcu commodo. Nunc eros ex, volutpat in varius sed, semper sed turpis. Mauris vitae dictum augue. Maecenas ullamcorper mauris ante, id posuere mi viverra in. Phasellus sed vehicula orci, non venenatis libero. Fusce vehicula pretium gravida. Quisque semper nunc ac arcu tristique, eget consequat tortor blandit. Proin ut lobortis dolor. Ut placerat at leo vitae tincidunt. Pellentesque ac iaculis lorem. Fusce ut mauris metus. Integer nulla purus, vestibulum id maximus sit amet, aliquet non arcu.</p>
<p>Interdum et malesuada fames ac ante ipsum primis in faucibus. Vivamus ultricies placerat magna, sed euismod tellus ultrices ac. Nam id nunc nibh. Integer elementum dui ac tincidunt pulvinar. Integer et est a leo condimentum pulvinar vitae eget orci. Etiam lobortis neque ut tortor tincidunt, eget condimentum velit lacinia. Quisque vel semper velit. Mauris vitae rutrum libero. Phasellus varius nunc nunc, elementum viverra libero rutrum vel. Mauris vitae ex tempor, gravida sem vel, aliquam dui. Mauris ac eleifend neque. Pellentesque eget nulla egestas, tempus massa eget, suscipit neque. Proin sed ligula vel sem rutrum ullamcorper.</p>
<p>Duis eleifend nisl in lectus commodo pharetra. Fusce varius rhoncus semper. Aliquam pellentesque nisl ac orci feugiat, in finibus nibh aliquam. In nec augue vulputate, lobortis nibh ut, consequat augue. Suspendisse sodales enim ac libero finibus fermentum. Curabitur fermentum augue ante, eget pharetra leo dictum at. Sed sapien lacus, bibendum egestas malesuada eget, malesuada nec lectus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus elementum, diam sagittis viverra placerat, diam ante finibus tellus, id feugiat metus lacus in nunc. Nulla imperdiet magna ante, vel volutpat ligula vehicula id. Maecenas et urna massa. Quisque justo quam, tincidunt ac orci at, accumsan volutpat nunc. Pellentesque sem elit, consectetur placerat orci vel, dignissim auctor nulla. Aenean quis dui non odio consectetur sagittis sed nec sapien. Maecenas cursus at quam sed cursus. Aenean tristique odio neque, quis pharetra ipsum blandit eu. Fusce porttitor lacinia quam et vehicula.</p>
<p>Maecenas viverra dolor nisl, sed interdum massa consequat condimentum. Morbi ultrices tellus enim, ac consectetur enim viverra non. Aenean vestibulum vestibulum dolor, id auctor sem placerat vel. Quisque sed ligula ac lorem maximus consectetur nec eu mi. Integer ut felis vitae lorem commodo euismod eget non orci. Nam eleifend tempus lacinia. Donec ac odio non dolor laoreet facilisis. Vivamus blandit venenatis velit sed venenatis. Morbi porttitor efficitur justo, ac varius urna tincidunt interdum. In commodo lorem in nunc placerat sodales nec a velit. Nunc vitae sodales nisl, eget lobortis sem. Nulla in est pretium dolor sollicitudin pulvinar sed nec mi. Phasellus lobortis dui viverra vulputate eleifend. Ut tempus nibh scelerisque, mollis erat sit amet, auctor felis.</p>
<p>Donec tempor sed lorem sed molestie. Nulla facilisi. Donec luctus enim vitae ante vulputate tincidunt. Vestibulum urna leo, egestas sollicitudin nisi et, cursus tristique nulla. Nunc commodo arcu ut dui tincidunt rutrum. Mauris volutpat, leo eget feugiat molestie, ipsum lectus lobortis nibh, nec pellentesque lorem nulla consectetur metus. Nunc condimentum enim eros, sit amet tempor turpis elementum in. Nunc et magna vel augue sagittis ullamcorper.</p>
<p>Nam venenatis ac nibh et hendrerit. Nam nulla nunc, dapibus mollis laoreet sed, lobortis laoreet nisi. Ut sed porttitor felis. Vivamus eget eros velit. Suspendisse porta neque libero, ut placerat metus malesuada et. Cras dictum pharetra ullamcorper. Duis ultrices elit semper, fermentum velit vel, hendrerit massa. Morbi at condimentum erat. Nulla lorem justo, condimentum eu congue eget, vehicula eget mauris. Pellentesque ut nisl at ante molestie ornare in non diam.</p>
<p>Cras feugiat feugiat orci, sed consequat magna ultrices vel. Suspendisse porttitor vulputate ante. Fusce nisl quam, rutrum et odio nec, dapibus porta ligula. Nullam pharetra enim non erat fermentum ultricies. Nam ultrices, ligula et vestibulum ullamcorper, mauris velit rhoncus arcu, sed tempus est ante vel ligula. Proin vitae lacinia erat, ut varius enim. Suspendisse et turpis est. Nulla facilisi. Quisque porttitor vel odio cursus varius. Mauris ac sem purus. Ut ut dignissim diam. Praesent ultricies porta nunc. Vivamus interdum porttitor tellus, quis volutpat eros pharetra vel. Vestibulum vehicula arcu dictum condimentum condimentum. Duis dapibus nunc lectus, sit amet volutpat ipsum finibus commodo. Suspendisse mauris mi, consequat ut aliquet in, laoreet non odio.</p>
<p>Pellentesque lobortis dui nec cursus sollicitudin. Ut fermentum varius purus ut rutrum. Duis at ante sed purus lobortis blandit quis vel massa. Integer a augue semper, consectetur mi eu, luctus risus. Aenean volutpat efficitur aliquet. Proin eu mauris eu odio fermentum sodales. Integer mollis varius ligula et rhoncus. Quisque nec dolor vitae arcu mollis varius eu mollis justo. Pellentesque sagittis leo vitae ipsum ullamcorper, at pulvinar nisl feugiat. Cras ullamcorper ex sed condimentum suscipit. Donec mollis suscipit nunc aliquam malesuada. Nulla interdum commodo quam, a ullamcorper tellus condimentum sit amet. Maecenas purus justo, molestie porta vestibulum luctus, fringilla et erat.</p>
<p>Fusce eu eros eget eros dictum interdum. Aliquam non arcu non risus consequat efficitur. Nam elementum sollicitudin placerat. Aliquam ac massa eu nibh tristique varius quis at diam. Praesent at diam elementum, tristique turpis in, finibus lorem. Ut et dolor mattis, dignissim nulla sed, semper lacus. Cras sit amet elementum arcu, a consectetur risus. Donec id magna sapien. Sed dui nibh, rutrum nec ultrices ut, convallis eu ligula. Nulla sagittis ullamcorper massa et ultrices. Maecenas ut lorem vitae nunc aliquam finibus et sed quam. Pellentesque cursus vel arcu ac faucibus. Suspendisse potenti. Quisque faucibus vitae orci vitae sodales. Mauris non laoreet nisi. Fusce nulla quam, feugiat ac odio vitae, congue pulvinar ligula.</p>
</div>
<div id="right">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse vestibulum venenatis purus, id viverra ante laoreet quis. Cras varius, quam at lacinia mollis, tellus massa vulputate ante, at maximus lacus erat in ex. Fusce at suscipit diam, in laoreet neque. Sed aliquam vel dui quis maximus. Nullam ultricies a nisl in consequat. Duis viverra arcu eu ultrices egestas. Duis lacinia leo a velit vehicula, in vestibulum lorem commodo. Duis id ipsum ut libero egestas blandit. Pellentesque ac magna tortor. Vivamus at ornare eros. Suspendisse interdum purus et turpis finibus, quis viverra nulla ultricies.</p>
<p>Nulla ultrices efficitur mi. Aenean facilisis lorem rhoncus dapibus consectetur. Quisque volutpat ipsum enim. Phasellus eros erat, pulvinar vel nibh tincidunt, tincidunt porta augue. Nullam aliquet at ante in ornare. Maecenas et bibendum dui, nec consectetur elit. Sed et elit vel mauris tempor facilisis. Vestibulum sed rhoncus nunc. Cras in orci condimentum, ultricies nulla eu, semper nisl. Sed dignissim nisl a pellentesque euismod. Suspendisse ut nunc a tortor mollis condimentum. Mauris sodales dolor et justo sagittis, quis euismod nunc consectetur. Nunc et condimentum nibh, non viverra risus. Aliquam facilisis mauris vitae quam fringilla interdum.</p>
<p>Morbi porta erat odio, cursus aliquam ipsum feugiat sed. Vivamus rhoncus vitae nisi in pellentesque. Donec eu diam felis. Sed dignissim euismod sem placerat porta. Integer dictum euismod nulla, non lobortis magna fermentum non. Ut et quam libero. Suspendisse at eros nec sapien tempus ornare. Nam pretium vestibulum enim quis congue. Integer in mi tincidunt, imperdiet tellus bibendum, efficitur sem. Aenean suscipit sapien quis erat accumsan congue. Cras finibus, mauris eget sollicitudin consequat, risus mauris placerat nulla, at malesuada erat ipsum vel nibh.</p>
<p>Sed malesuada rhoncus ante, non pellentesque leo lobortis quis. Integer fringilla ut erat sit amet ullamcorper. Nulla eu ultricies eros. Etiam et sollicitudin massa, sit amet finibus turpis. Duis justo sapien, volutpat eget sagittis id, hendrerit sit amet dui. Vivamus arcu dui, ultrices id interdum non, mattis id elit. Phasellus ultrices posuere nisi, at tempor eros accumsan nec. Quisque sem augue, venenatis vitae nunc non, lacinia pharetra mauris. Nullam tempor at ex in tincidunt. Morbi lobortis, ipsum in placerat interdum, metus justo vehicula lectus, vel molestie metus mi ut massa. Sed posuere ligula eget neque convallis varius.</p>
<p>Aenean imperdiet neque pulvinar dolor vestibulum aliquet. Morbi posuere odio eu condimentum consequat. Quisque dignissim lorem quis nulla vulputate, in consectetur arcu commodo. Nunc eros ex, volutpat in varius sed, semper sed turpis. Mauris vitae dictum augue. Maecenas ullamcorper mauris ante, id posuere mi viverra in. Phasellus sed vehicula orci, non venenatis libero. Fusce vehicula pretium gravida. Quisque semper nunc ac arcu tristique, eget consequat tortor blandit. Proin ut lobortis dolor. Ut placerat at leo vitae tincidunt. Pellentesque ac iaculis lorem. Fusce ut mauris metus. Integer nulla purus, vestibulum id maximus sit amet, aliquet non arcu.</p>
<p>Interdum et malesuada fames ac ante ipsum primis in faucibus. Vivamus ultricies placerat magna, sed euismod tellus ultrices ac. Nam id nunc nibh. Integer elementum dui ac tincidunt pulvinar. Integer et est a leo condimentum pulvinar vitae eget orci. Etiam lobortis neque ut tortor tincidunt, eget condimentum velit lacinia. Quisque vel semper velit. Mauris vitae rutrum libero. Phasellus varius nunc nunc, elementum viverra libero rutrum vel. Mauris vitae ex tempor, gravida sem vel, aliquam dui. Mauris ac eleifend neque. Pellentesque eget nulla egestas, tempus massa eget, suscipit neque. Proin sed ligula vel sem rutrum ullamcorper.</p>
<p>Duis eleifend nisl in lectus commodo pharetra. Fusce varius rhoncus semper. Aliquam pellentesque nisl ac orci feugiat, in finibus nibh aliquam. In nec augue vulputate, lobortis nibh ut, consequat augue. Suspendisse sodales enim ac libero finibus fermentum. Curabitur fermentum augue ante, eget pharetra leo dictum at. Sed sapien lacus, bibendum egestas malesuada eget, malesuada nec lectus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus elementum, diam sagittis viverra placerat, diam ante finibus tellus, id feugiat metus lacus in nunc. Nulla imperdiet magna ante, vel volutpat ligula vehicula id. Maecenas et urna massa. Quisque justo quam, tincidunt ac orci at, accumsan volutpat nunc. Pellentesque sem elit, consectetur placerat orci vel, dignissim auctor nulla. Aenean quis dui non odio consectetur sagittis sed nec sapien. Maecenas cursus at quam sed cursus. Aenean tristique odio neque, quis pharetra ipsum blandit eu. Fusce porttitor lacinia quam et vehicula.</p>
<p>Maecenas viverra dolor nisl, sed interdum massa consequat condimentum. Morbi ultrices tellus enim, ac consectetur enim viverra non. Aenean vestibulum vestibulum dolor, id auctor sem placerat vel. Quisque sed ligula ac lorem maximus consectetur nec eu mi. Integer ut felis vitae lorem commodo euismod eget non orci. Nam eleifend tempus lacinia. Donec ac odio non dolor laoreet facilisis. Vivamus blandit venenatis velit sed venenatis. Morbi porttitor efficitur justo, ac varius urna tincidunt interdum. In commodo lorem in nunc placerat sodales nec a velit. Nunc vitae sodales nisl, eget lobortis sem. Nulla in est pretium dolor sollicitudin pulvinar sed nec mi. Phasellus lobortis dui viverra vulputate eleifend. Ut tempus nibh scelerisque, mollis erat sit amet, auctor felis.</p>
<p>Donec tempor sed lorem sed molestie. Nulla facilisi. Donec luctus enim vitae ante vulputate tincidunt. Vestibulum urna leo, egestas sollicitudin nisi et, cursus tristique nulla. Nunc commodo arcu ut dui tincidunt rutrum. Mauris volutpat, leo eget feugiat molestie, ipsum lectus lobortis nibh, nec pellentesque lorem nulla consectetur metus. Nunc condimentum enim eros, sit amet tempor turpis elementum in. Nunc et magna vel augue sagittis ullamcorper.</p>
<p>Nam venenatis ac nibh et hendrerit. Nam nulla nunc, dapibus mollis laoreet sed, lobortis laoreet nisi. Ut sed porttitor felis. Vivamus eget eros velit. Suspendisse porta neque libero, ut placerat metus malesuada et. Cras dictum pharetra ullamcorper. Duis ultrices elit semper, fermentum velit vel, hendrerit massa. Morbi at condimentum erat. Nulla lorem justo, condimentum eu congue eget, vehicula eget mauris. Pellentesque ut nisl at ante molestie ornare in non diam.</p>
<p>Cras feugiat feugiat orci, sed consequat magna ultrices vel. Suspendisse porttitor vulputate ante. Fusce nisl quam, rutrum et odio nec, dapibus porta ligula. Nullam pharetra enim non erat fermentum ultricies. Nam ultrices, ligula et vestibulum ullamcorper, mauris velit rhoncus arcu, sed tempus est ante vel ligula. Proin vitae lacinia erat, ut varius enim. Suspendisse et turpis est. Nulla facilisi. Quisque porttitor vel odio cursus varius. Mauris ac sem purus. Ut ut dignissim diam. Praesent ultricies porta nunc. Vivamus interdum porttitor tellus, quis volutpat eros pharetra vel. Vestibulum vehicula arcu dictum condimentum condimentum. Duis dapibus nunc lectus, sit amet volutpat ipsum finibus commodo. Suspendisse mauris mi, consequat ut aliquet in, laoreet non odio.</p>
<p>Pellentesque lobortis dui nec cursus sollicitudin. Ut fermentum varius purus ut rutrum. Duis at ante sed purus lobortis blandit quis vel massa. Integer a augue semper, consectetur mi eu, luctus risus. Aenean volutpat efficitur aliquet. Proin eu mauris eu odio fermentum sodales. Integer mollis varius ligula et rhoncus. Quisque nec dolor vitae arcu mollis varius eu mollis justo. Pellentesque sagittis leo vitae ipsum ullamcorper, at pulvinar nisl feugiat. Cras ullamcorper ex sed condimentum suscipit. Donec mollis suscipit nunc aliquam malesuada. Nulla interdum commodo quam, a ullamcorper tellus condimentum sit amet. Maecenas purus justo, molestie porta vestibulum luctus, fringilla et erat.</p>
<p>Fusce eu eros eget eros dictum interdum. Aliquam non arcu non risus consequat efficitur. Nam elementum sollicitudin placerat. Aliquam ac massa eu nibh tristique varius quis at diam. Praesent at diam elementum, tristique turpis in, finibus lorem. Ut et dolor mattis, dignissim nulla sed, semper lacus. Cras sit amet elementum arcu, a consectetur risus. Donec id magna sapien. Sed dui nibh, rutrum nec ultrices ut, convallis eu ligula. Nulla sagittis ullamcorper massa et ultrices. Maecenas ut lorem vitae nunc aliquam finibus et sed quam. Pellentesque cursus vel arcu ac faucibus. Suspendisse potenti. Quisque faucibus vitae orci vitae sodales. Mauris non laoreet nisi. Fusce nulla quam, feugiat ac odio vitae, congue pulvinar ligula.</p>
</div>
</div>
</body>

Please try this:
var prevScrollpos = document.getElementById("left").scrollTop;
document.getElementById("left").onscroll = function () {
var currentScrollPos = document.getElementById("left").scrollTop;
if (prevScrollpos > currentScrollPos) {
document.getElementById("navbar").style.bottom = "0";
} else {
document.getElementById("navbar").style.bottom = "-50px";
}
prevScrollpos = currentScrollPos;
}

Fix/Unfix Div when scrolling

Currently working on a section where there are three rows of content. An image, a title, and some text. When the section hits the top of the window, there's an additional div that becomes fixed 50px from the top of the window and scrolls as the user scrolls.
When the div hits 30px from the bottom of the section, its position is then switched to absolute.
It seems that this is mostly js issue so I'll leave the JS here for review. Ideally I'd like to get away from using a fixed number like I'm currently using so if anyone has any suggestions on how to maybe get away from that or like I mentioned, position the div absolute when 30px from the bottom of the section, regardless of the height.
var stickyTop = $('.scroller_anchor').offset().top;
$(window).on( 'scroll', function(){
if ($(window).scrollTop() >= stickyTop) {
$('.depositionx-contact').addClass('scrolling');
$('.map-anchor').addClass('scrolling');
if ($(window).scrollTop() > 2990) {
$('.depositionx-contact').addClass('unstick');
} else {
$('.depositionx-contact').removeClass('unstick');
}
} else {
$('.depositionx-contact').removeClass('scrolling');
$('.map-anchor').removeClass('scrolling');
}
});
I've attached a pen for the sake of a more visual example.
https://codepen.io/crawbuck/pen/wpeRWW
Any input would be greatly appreciated.

Sorry for the delay. I slapped together a working sample. You can see the fiddle here.
The gist of it is to only scroll the element when it falls in a range of the parent container offset to the parent container height - the height of the element.
function SemiFixElement($container, $element) {
$container = $($container);
$container.width($container.width());
$container.height($container.height());
$container.css('position', 'absolute');
$container.css('left', '0');
$element = $($element);
$element.css('position', 'relative');
$(window).on('scroll', function(ev) {
let top = -$container[0].getBoundingClientRect().top;
top = Math.max(0, top);
top = Math.min(top, $container.height() - $element.height());
$element.css('top', top);
});
}
SemiFixElement('.semi-fixed-container', '.semi-fixed');
.column-layout {
display: flex;
justify-content: flex-end;
}
.column-layout > .semi-fixed-container {
background: LightBlue;
width: 100px;
}
.column-layout > div {
background: LightGreen;
max-width: calc(100% - 100px);
}
ul {
list-style-type: none;
margin-top: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi accumsan lacus libero, vitae finibus elit pretium a. In sit amet neque non urna convallis rutrum a nec dolor. Duis feugiat, odio vel vulputate pretium, orci massa sollicitudin lacus, sed eleifend
mauris augue sed sem. Morbi imperdiet venenatis sollicitudin. Vestibulum ut ipsum sit amet enim mattis sollicitudin. Donec enim nulla, efficitur a scelerisque fringilla, ornare quis mauris. Mauris iaculis odio ut quam tincidunt imperdiet. Nam quam dui,
iaculis nec neque vitae, dapibus accumsan magna. Sed sollicitudin urna sagittis turpis porta, a sagittis diam feugiat. Praesent auctor sodales velit, in vestibulum nisl posuere id. Aenean dapibus felis sit amet mauris commodo, at posuere sem imperdiet.
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Aenean et lorem felis.
</p>
<p>
Fusce rhoncus tristique justo, at ultricies urna lobortis non. Ut mollis, lorem dictum egestas rutrum, dolor erat commodo lacus, sit amet consequat mi massa ac tortor. Nulla tristique euismod odio ut pharetra. Morbi accumsan iaculis lectus, eget suscipit
lacus hendrerit vel. Phasellus elit elit, congue quis lacinia ullamcorper, vulputate et diam. Etiam eu eleifend nunc. Suspendisse nibh mauris, vestibulum id purus vitae, tristique semper nisi. Donec mollis mauris ex, faucibus porta turpis consequat
eget. Proin volutpat quis mauris ut dictum. Nullam ut gravida odio. Praesent finibus turpis non dapibus convallis. Nunc condimentum urna luctus dui sodales malesuada. Vestibulum iaculis consequat sodales. Maecenas ac elit vitae leo luctus mollis. Proin
condimentum dapibus augue et tristique.
</p>
<p>
Pellentesque nec bibendum est, non molestie lacus. Curabitur at magna sapien. Ut suscipit imperdiet finibus. Nam in massa eget felis efficitur finibus. Mauris venenatis placerat elit, a placerat tortor venenatis vitae. Duis et nisl ut augue laoreet dignissim
ut a arcu. Maecenas eu fermentum nisl. Morbi vestibulum leo eu lacus interdum, in tincidunt lacus malesuada. Mauris nec cursus erat, a fermentum magna. Donec bibendum libero et leo ultrices venenatis. Donec eget metus sodales, dapibus ante quis, dictum
mi. Vestibulum orci quam, malesuada ac venenatis vitae, finibus in massa.
</p>
<p>
Aliquam aliquet massa sit amet ipsum porttitor, nec malesuada massa sodales. Phasellus placerat massa et nisl scelerisque, nec egestas leo accumsan. Pellentesque et tempor leo. Suspendisse sit amet iaculis mauris. In sed orci sollicitudin, vestibulum
est sit amet, lobortis tellus. Nunc sit amet hendrerit nibh. Integer dictum nibh at elit euismod, tincidunt sollicitudin libero mollis. Morbi placerat felis sem, a vulputate augue faucibus sed. Morbi bibendum feugiat ornare. Integer id fringilla felis.
Nulla eget est ut tellus iaculis laoreet. Proin eu aliquam nisl, eu consequat eros. Vivamus finibus ligula vel feugiat volutpat.
</p>
<div>
<div class="column-layout">
<div class="semi-fixed-container">
<div class="semi-fixed">
<ul>
<li><a>Link 1</a></li>
<li><a>Link 2</a></li>
<li><a>Link 3</a></li>
<li><a>Link 4</a></li>
<li><a>Link 5</a></li>
</ul>
</div>
</div>
<div>
<p>
Donec et tristique libero. Suspendisse sit amet nunc ante. Sed id aliquet nibh. Praesent sodales ante ullamcorper mauris pellentesque, eu lobortis ipsum accumsan. Nam eget justo nec mi sollicitudin maximus. Phasellus ac lacinia sapien. Sed sed volutpat
velit. In in justo vel odio pellentesque imperdiet at nec augue. Aenean vel pulvinar nisl. Suspendisse efficitur in diam quis vestibulum. Cras egestas metus eget mi lobortis, eu tincidunt augue lobortis. Donec sed enim venenatis, eleifend lacus
in, rutrum enim. Aenean ut est sed leo dapibus auctor.
</p>
<p>
Pellentesque gravida tincidunt faucibus. Nunc in elit sit amet velit efficitur imperdiet ut ac arcu. Vivamus eget nisl in dui accumsan tincidunt hendrerit vitae nisl. Etiam placerat quis elit ut tincidunt. Praesent ipsum metus, vestibulum et odio lacinia,
volutpat maximus est. Donec facilisis aliquam felis at ultricies. Quisque enim lorem, euismod et sapien sit amet, consequat vehicula leo. Nam commodo massa neque, et porttitor urna egestas ut. Vivamus condimentum neque eu mi elementum tincidunt.
Aliquam porta condimentum metus quis maximus. Nunc ornare arcu rhoncus metus sodales fringilla. Morbi elementum est sit amet pellentesque consequat. Quisque sem enim, lobortis a augue nec, fringilla dictum ex. Duis efficitur consectetur ultricies.
</p>
<p>
Aenean eget justo id mi condimentum cursus. Sed molestie erat nec mauris ultricies, sed porttitor nisl fermentum. Curabitur quis luctus metus. Quisque scelerisque consectetur eros consectetur bibendum. Cras quis aliquet quam. Donec ac nunc finibus, pulvinar
libero eu, tincidunt libero. Morbi et commodo mi. Nam ut massa sit amet nulla tristique porta a id dui. Nunc cursus porttitor finibus. Nunc dictum, enim ornare fermentum maximus, eros urna fermentum risus, eu rutrum est turpis sollicitudin ipsum.
Curabitur id urna in lacus dictum commodo nec a urna. Ut quis aliquet mauris. Praesent commodo consectetur consequat. Nulla porttitor nec ante id placerat.
</p>
<p>
Aliquam condimentum purus vel justo congue, vitae iaculis turpis pretium. Suspendisse venenatis purus sed porttitor pellentesque. In nulla nulla, pulvinar vitae maximus in, tincidunt non erat. Donec pharetra commodo semper. Suspendisse potenti. Mauris
metus mauris, venenatis in quam vel, mattis commodo velit. Vivamus in pretium enim, vitae condimentum enim. Nulla dictum, turpis eu porttitor convallis, metus ipsum porttitor urna, eu rhoncus metus dolor vel enim. Nunc vulputate mattis tellus.
In eu tempor ex. Sed quam elit, elementum a ultricies in, efficitur ac nulla. Morbi vel aliquet neque. Quisque sagittis tempor purus, eu lacinia velit gravida nec.
</p>
<p>
Nulla congue luctus mauris at convallis. Sed tortor tortor, faucibus vitae elementum a, mattis in mi. Aenean tellus odio, sagittis vitae finibus eu, finibus eu dui. Duis mattis sollicitudin ante ornare bibendum. Nulla a sapien pellentesque, rhoncus urna
eu, iaculis nunc. Suspendisse pellentesque urna ut nibh hendrerit volutpat. Sed lacinia vehicula luctus. Sed nec ligula eu neque varius ultricies. Sed imperdiet metus et eros sodales auctor. Aenean erat sem, laoreet at placerat nec, feugiat at
nulla. Nulla eu magna mauris. Aenean condimentum tortor velit, et lacinia purus luctus et.
</p>
<p>
Duis in nibh vitae ex elementum malesuada. Aliquam tempus, ligula ac fringilla congue, nibh leo egestas est, ac bibendum tellus nisi sed ex. Donec lobortis suscipit lectus, quis luctus magna aliquam imperdiet. Proin tellus ipsum, tempus eget velit a,
bibendum egestas enim. Interdum et malesuada fames ac ante ipsum primis in faucibus. In convallis convallis nulla eget faucibus. Duis laoreet est in faucibus lacinia. Pellentesque mi nisl, elementum sit amet egestas ac, dapibus in elit. Vestibulum
pulvinar quam arcu. Proin molestie nunc vitae ante varius rutrum.
</p>
</div>
</div>
</div>
<p>
Fusce rhoncus tristique justo, at ultricies urna lobortis non. Ut mollis, lorem dictum egestas rutrum, dolor erat commodo lacus, sit amet consequat mi massa ac tortor. Nulla tristique euismod odio ut pharetra. Morbi accumsan iaculis lectus, eget suscipit
lacus hendrerit vel. Phasellus elit elit, congue quis lacinia ullamcorper, vulputate et diam. Etiam eu eleifend nunc. Suspendisse nibh mauris, vestibulum id purus vitae, tristique semper nisi. Donec mollis mauris ex, faucibus porta turpis consequat
eget. Proin volutpat quis mauris ut dictum. Nullam ut gravida odio. Praesent finibus turpis non dapibus convallis. Nunc condimentum urna luctus dui sodales malesuada. Vestibulum iaculis consequat sodales. Maecenas ac elit vitae leo luctus mollis. Proin
condimentum dapibus augue et tristique.
</p>
<p>
Pellentesque nec bibendum est, non molestie lacus. Curabitur at magna sapien. Ut suscipit imperdiet finibus. Nam in massa eget felis efficitur finibus. Mauris venenatis placerat elit, a placerat tortor venenatis vitae. Duis et nisl ut augue laoreet dignissim
ut a arcu. Maecenas eu fermentum nisl. Morbi vestibulum leo eu lacus interdum, in tincidunt lacus malesuada. Mauris nec cursus erat, a fermentum magna. Donec bibendum libero et leo ultrices venenatis. Donec eget metus sodales, dapibus ante quis, dictum
mi. Vestibulum orci quam, malesuada ac venenatis vitae, finibus in massa.
</p>
<p>
Fusce rhoncus tristique justo, at ultricies urna lobortis non. Ut mollis, lorem dictum egestas rutrum, dolor erat commodo lacus, sit amet consequat mi massa ac tortor. Nulla tristique euismod odio ut pharetra. Morbi accumsan iaculis lectus, eget suscipit
lacus hendrerit vel. Phasellus elit elit, congue quis lacinia ullamcorper, vulputate et diam. Etiam eu eleifend nunc. Suspendisse nibh mauris, vestibulum id purus vitae, tristique semper nisi. Donec mollis mauris ex, faucibus porta turpis consequat
eget. Proin volutpat quis mauris ut dictum. Nullam ut gravida odio. Praesent finibus turpis non dapibus convallis. Nunc condimentum urna luctus dui sodales malesuada. Vestibulum iaculis consequat sodales. Maecenas ac elit vitae leo luctus mollis. Proin
condimentum dapibus augue et tristique.
</p>
<p>
Pellentesque nec bibendum est, non molestie lacus. Curabitur at magna sapien. Ut suscipit imperdiet finibus. Nam in massa eget felis efficitur finibus. Mauris venenatis placerat elit, a placerat tortor venenatis vitae. Duis et nisl ut augue laoreet dignissim
ut a arcu. Maecenas eu fermentum nisl. Morbi vestibulum leo eu lacus interdum, in tincidunt lacus malesuada. Mauris nec cursus erat, a fermentum magna. Donec bibendum libero et leo ultrices venenatis. Donec eget metus sodales, dapibus ante quis, dictum
mi. Vestibulum orci quam, malesuada ac venenatis vitae, finibus in massa.
</p>

jQuery detect element in viewport - calc causing issues

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>

Nonlinear fade on scroll?

I'm using the following code to adjust the opacity of an element as you scroll past it:
$(window).scroll(function () {
this = myfadingdiv
var height = $(this).height();
var offset = $(this).offset().top;
var opacity = (height - homeTop + offset) / height;
$(this).css("opacity", opacity);
});
It works great, but it's linear. A request was made to have it fade "sooner".
I'd like it to behave more like this (sorry for the crude MS Paint).
I'm definitely not an algebra person. How can I accomplish this?

Starting from the formulas of this site: http://gizma.com/easing/
You can calculate the easing in this way:
The linear tweening
linearTween = function (t, b, c, d) {
return c*t/d + b;
};
t = current time
var t = $(window).scrollTop() - offset;
t = t < 0 ? 0 : t;
The "Current time" start when your div is on top of the page. Before is 0 (the negative values), after the value is positive (the scrolled pixel).
b = start value
Is 1, your start opacity
c = change in value
Change the start value of -1 (1-1 = 0 opacity)
d = duration
The time finish when all div is scrolled, the duration is the height of the div
Now you have all easing functions for create your custom animation
$(window).scroll(function() {
var height = $('#scroll').height();
var offset = $('#scroll').offset().top;
var opacity;
//opacity = (height - $(window).scrollTop() + offset) / height;
var t = $(window).scrollTop() - offset;
t = t < 0 ? 0 : t;
opacity = easeOutCirc(t, 1, -1, height);
$('#scroll').css("opacity", opacity);
});
/* SOME EASING */
linearTween = function(t, b, c, d) {
return c * t / d + b;
};
easeInQuad = function(t, b, c, d) {
t /= d;
return c * t * t + b;
};
easeInOutCirc = function(t, b, c, d) {
t /= d / 2;
if (t < 1) return -c / 2 * (Math.sqrt(1 - t * t) - 1) + b;
t -= 2;
return c / 2 * (Math.sqrt(1 - t * t) + 1) + b;
};
easeOutCirc = function(t, b, c, d) {
t /= d;
t--;
return c * Math.sqrt(1 - t * t) + b;
};
#scroll {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Sed placerat consequat suscipit. In et diam in mi auctor viverra vel commodo tortor. Suspendisse at magna diam. Curabitur eu sapien in nibh consequat ultricies vitae eget nulla. Nunc justo enim, porta quis purus non, euismod varius sem. Aenean condimentum
ullamcorper turpis, ac auctor elit. In hac habitasse platea dictumst. Fusce vel semper tellus. Etiam condimentum, felis ut tincidunt venenatis, diam enim rhoncus neque, nec varius ante nulla et tellus. Vestibulum vel auctor leo, at scelerisque ante. Nullam
augue leo, cursus vitae mattis eget, euismod sit amet leo. Integer at commodo purus, a egestas eros. Phasellus a risus ac orci suscipit luctus at iaculis mauris. Fusce et est dui. Aenean a euismod nibh, sit amet vulputate erat. Integer nec sapien felis.
Aliquam bibendum egestas aliquet. Nunc tincidunt sapien sed odio mattis pulvinar id mattis enim. Nam interdum mattis enim, blandit interdum elit auctor in. Nulla quis nisl finibus, venenatis risus vel, rhoncus turpis. Suspendisse condimentum orci id diam
hendrerit, eu laoreet sem pharetra. Sed nec pharetra diam. Vivamus vel massa ante. Sed non leo urna. Proin et commodo magna. Vivamus sed est sollicitudin, egestas quam ornare, vestibulum elit.
<div id="scroll">
Phasellus mattis nulla eget neque dapibus, mattis mollis elit consequat. Nulla facilisi. Nullam ut nulla eu augue luctus viverra. Proin dictum rhoncus finibus. Nulla sed luctus libero, eget sollicitudin purus. Ut pharetra quis neque vel vehicula. Curabitur
fermentum, nibh ac efficitur fringilla, libero augue tempus dolor, in vehicula odio sem in felis. In eu feugiat dui. Aenean est elit, pulvinar sit amet pretium ut, vestibulum non felis. In ullamcorper ullamcorper erat, a aliquam urna finibus et. Curabitur
lobortis dapibus aliquam. Phasellus fringilla augue eget dui condimentum, ac ultricies ligula sodales. Aenean et nisi ut ante maximus porta. Cras sollicitudin blandit purus, eget varius dui. Donec in metus erat. Morbi eget ex dolor. Aenean tellus turpis,
suscipit eu eros vel, ornare feugiat nibh. Suspendisse gravida nunc sem. Cras egestas vestibulum sem at convallis. Nunc eu cursus massa, sed aliquam libero. Sed placerat consequat suscipit. In et diam in mi auctor viverra vel commodo tortor. Suspendisse
at magna diam. Curabitur eu sapien in nibh consequat ultricies vitae eget nulla. Nunc justo enim, porta quis purus non, euismod varius sem. Aenean condimentum ullamcorper turpis, ac auctor elit. In hac habitasse platea dictumst. Fusce vel semper tellus.
Etiam condimentum, felis ut tincidunt venenatis, diam enim rhoncus neque, nec varius ante nulla et tellus. Vestibulum vel auctor leo, at scelerisque ante. Nullam augue leo, cursus vitae mattis eget, euismod sit amet leo. Integer at commodo purus, a
egestas eros. Phasellus a risus ac orci suscipit luctus at iaculis mauris. Fusce et est dui. Aenean a euismod nibh, sit amet vulputate erat. Integer nec sapien felis. Aliquam bibendum egestas aliquet. Nunc tincidunt sapien sed odio mattis pulvinar id
mattis enim. Nam interdum mattis enim, blandit interdum elit auctor in. Nulla quis nisl finibus, venenatis risus vel, rhoncus turpis. Suspendisse condimentum orci id diam hendrerit, eu laoreet sem pharetra. Sed nec pharetra diam. Vivamus vel massa ante.
Sed non leo urna. Proin et commodo magna. Vivamus sed est sollicitudin, egestas quam ornare, vestibulum elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur nec ante aliquet, lacinia risus ac, tristique ipsum. Nam porttitor sed orci
nec volutpat. Etiam finibus enim felis, at lacinia dui tempor at. Sed sem nulla, feugiat sed imperdiet quis, imperdiet nec felis. Nullam eget suscipit tortor. Suspendisse maximus nec sapien id placerat. Cras ullamcorper enim quis blandit sodales. Fusce
ullamcorper turpis libero, quis facilisis arcu condimentum sit amet. Etiam vitae luctus turpis, sed maximus nisl. Maecenas cursus tellus mattis eros placerat pulvinar. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus
mus. Aliquam sit amet enim dolor. Ut et nisi quis urna congue rutrum. Phasellus mattis nulla eget neque dapibus, mattis mollis elit consequat. Nulla facilisi. Nullam ut nulla eu augue luctus viverra. Proin dictum rhoncus finibus. Nulla sed luctus libero,
eget sollicitudin purus. Ut pharetra quis neque vel vehicula. Curabitur fermentum, nibh ac efficitur fringilla, libero augue tempus dolor, in vehicula odio sem in felis. In eu feugiat dui. Aenean est elit, pulvinar sit amet pretium ut, vestibulum non
felis. In ullamcorper ullamcorper erat, a aliquam urna finibus et. Curabitur lobortis dapibus aliquam. Phasellus fringilla augue eget dui condimentum, ac ultricies ligula sodales. Aenean et nisi ut ante maximus porta. Cras sollicitudin blandit purus,
eget varius dui. Donec in metus erat. Morbi eget ex dolor. Aenean tellus turpis, suscipit eu eros vel, ornare feugiat nibh. Suspendisse gravida nunc sem. Cras egestas vestibulum sem at convallis. Nunc eu cursus massa, sed aliquam libero. Sed placerat
consequat suscipit. In et diam in mi auctor viverra vel commodo tortor. Suspendisse at magna diam. Curabitur eu sapien in nibh consequat ultricies vitae eget nulla. Nunc justo enim, porta quis purus non, euismod varius sem. Aenean condimentum ullamcorper
turpis, ac auctor elit. In hac habitasse platea dictumst. Fusce vel semper tellus. Etiam condimentum, felis ut tincidunt venenatis, diam enim rhoncus neque, nec varius ante nulla et tellus. Vestibulum vel auctor leo, at scelerisque ante. Nullam augue
leo, cursus vitae mattis eget, euismod sit amet leo. Integer at commodo purus, a egestas eros. Phasellus a risus ac orci suscipit luctus at iaculis mauris. Fusce et est dui. Aenean a euismod nibh, sit amet vulputate erat. Integer nec sapien felis. Aliquam
bibendum egestas aliquet. Nunc tincidunt sapien sed odio mattis pulvinar id mattis enim. Nam interdum mattis enim, blandit interdum elit auctor in. Nulla quis nisl finibus, venenatis risus vel, rhoncus turpis. Suspendisse condimentum orci id diam hendrerit,
eu laoreet sem pharetra. Sed nec pharetra diam. Vivamus vel massa ante. Sed non leo urna. Proin et commodo magna. Vivamus sed est sollicitudin, egestas quam ornare, vestibulum elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur
nec ante aliquet, lacinia risus ac, tristique ipsum. Nam porttitor sed orci nec volutpat. Etiam finibus enim felis, at lacinia dui tempor at. Sed sem nulla, feugiat sed imperdiet quis, imperdiet nec felis. Nullam eget suscipit tortor. Suspendisse maximus
nec sapien id placerat. Cras ullamcorper enim quis blandit sodales. Fusce ullamcorper turpis libero, quis facilisis arcu condimentum sit amet. Etiam vitae luctus turpis, sed maximus nisl. Maecenas cursus tellus mattis eros placerat pulvinar. Orci varius
natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam sit amet enim dolor. Ut et nisi quis urna congue rutrum. Phasellus mattis nulla eget neque dapibus, mattis mollis elit consequat. Nulla facilisi. Nullam ut nulla eu augue
luctus viverra. Proin dictum rhoncus finibus. Nulla sed luctus libero, eget sollicitudin purus. Ut pharetra quis neque vel vehicula. Curabitur fermentum, nibh ac efficitur fringilla, libero augue tempus dolor, in vehicula odio sem in felis. In eu feugiat
dui. Aenean est elit, pulvinar sit amet pretium ut, vestibulum non felis. In ullamcorper ullamcorper erat, a aliquam urna finibus et. Curabitur lobortis dapibus aliquam. Phasellus fringilla augue eget dui condimentum, ac ultricies ligula sodales. Aenean
et nisi ut ante maximus porta. Cras sollicitudin blandit purus, eget varius dui. Donec in metus erat. Morbi eget ex dolor. Aenean tellus turpis, suscipit eu eros vel, ornare feugiat nibh. Suspendisse gravida nunc sem. Cras egestas vestibulum sem at
convallis. Nunc eu cursus massa, sed aliquam libero. Sed placerat consequat suscipit. In et diam in mi auctor viverra vel commodo tortor. Suspendisse at magna diam. Curabitur eu sapien in nibh consequat ultricies vitae eget nulla. Nunc justo enim, porta
quis purus non, euismod varius sem. Aenean condimentum ullamcorper turpis, ac auctor elit. In hac habitasse platea dictumst. Fusce vel semper tellus. Etiam condimentum, felis ut tincidunt venenatis, diam enim rhoncus neque, nec varius ante nulla et
tellus. Vestibulum vel auctor leo, at scelerisque ante. Nullam augue leo, cursus vitae mattis eget, euismod sit amet leo. Integer at commodo purus, a egestas eros. Phasellus a risus ac orci suscipit luctus at iaculis mauris. Fusce et est dui. Aenean
a euismod nibh, sit amet vulputate erat. Integer nec sapien felis. Aliquam bibendum egestas aliquet. Nunc tincidunt sapien sed odio mattis pulvinar id mattis enim. Nam interdum mattis enim, blandit interdum elit auctor in. Nulla quis nisl finibus, venenatis
risus vel, rhoncus turpis. Suspendisse condimentum orci id diam hendrerit, eu laoreet sem pharetra. Sed nec pharetra diam. Vivamus vel massa ante. Sed non leo urna. Proin et commodo magna. Vivamus sed est sollicitudin, egestas quam ornare, vestibulum
elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur nec ante aliquet, lacinia risus ac, tristique ipsum. Nam porttitor sed orci nec volutpat. Etiam finibus enim felis, at lacinia dui tempor at. Sed sem nulla, feugiat sed imperdiet
quis, imperdiet nec felis. Nullam eget suscipit tortor. Suspendisse maximus nec sapien id placerat. Cras ullamcorper enim quis blandit sodales. Fusce ullamcorper turpis libero, quis facilisis arcu condimentum sit amet. Etiam vitae luctus turpis, sed
maximus nisl. Maecenas cursus tellus mattis eros placerat pulvinar. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam sit amet enim dolor. Ut et nisi quis urna congue rutrum.
</div>
Phasellus mattis nulla eget neque dapibus, mattis mollis elit consequat. Nulla facilisi. Nullam ut nulla eu augue luctus viverra. Proin dictum rhoncus finibus. Nulla sed luctus libero, eget sollicitudin purus. Ut pharetra quis neque vel vehicula. Curabitur
fermentum, nibh ac efficitur fringilla, libero augue tempus dolor, in vehicula odio sem in felis. In eu feugiat dui. Aenean est elit, pulvinar sit amet pretium ut, vestibulum non felis. In ullamcorper ullamcorper erat, a aliquam urna finibus et. Curabitur
lobortis dapibus aliquam. Phasellus fringilla augue eget dui condimentum, ac ultricies ligula sodales. Aenean et nisi ut ante maximus porta. Cras sollicitudin blandit purus, eget varius dui. Donec in metus erat. Morbi eget ex dolor. Aenean tellus turpis,
suscipit eu eros vel, ornare feugiat nibh. Suspendisse gravida nunc sem. Cras egestas vestibulum sem at convallis. Nunc eu cursus massa, sed aliquam libero. Sed placerat consequat suscipit. In et diam in mi auctor viverra vel commodo tortor. Suspendisse
at magna diam. Curabitur eu sapien in nibh consequat ultricies vitae eget nulla. Nunc justo enim, porta quis purus non, euismod varius sem. Aenean condimentum ullamcorper turpis, ac auctor elit. In hac habitasse platea dictumst. Fusce vel semper tellus.
Etiam condimentum, felis ut tincidunt venenatis, diam enim rhoncus neque, nec varius ante nulla et tellus. Vestibulum vel auctor leo, at scelerisque ante. Nullam augue leo, cursus vitae mattis eget, euismod sit amet leo. Integer at commodo purus, a egestas
eros. Phasellus a risus ac orci suscipit luctus at iaculis mauris. Fusce et est dui. Aenean a euismod nibh, sit amet vulputate erat. Integer nec sapien felis. Aliquam bibendum egestas aliquet. Nunc tincidunt sapien sed odio mattis pulvinar id mattis enim.
Nam interdum mattis enim, blandit interdum elit auctor in. Nulla quis nisl finibus, venenatis risus vel, rhoncus turpis. Suspendisse condimentum orci id diam hendrerit, eu laoreet sem pharetra. Sed nec pharetra diam. Vivamus vel massa ante. Sed non leo
urna. Proin et commodo magna. Vivamus sed est sollicitudin, egestas quam ornare, vestibulum elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur nec ante aliquet, lacinia risus ac, tristique ipsum. Nam porttitor sed orci nec volutpat.
Etiam finibus enim felis, at lacinia dui tempor at. Sed sem nulla, feugiat sed imperdiet quis, imperdiet nec felis. Nullam eget suscipit tortor. Suspendisse maximus nec sapien id placerat. Cras ullamcorper enim quis blandit sodales. Fusce ullamcorper
turpis libero, quis facilisis arcu condimentum sit amet. Etiam vitae luctus turpis, sed maximus nisl. Maecenas cursus tellus mattis eros placerat pulvinar. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam
sit amet enim dolor. Ut et nisi quis urna congue rutrum. Phasellus mattis nulla eget neque dapibus, mattis mollis elit consequat. Nulla facilisi. Nullam ut nulla eu augue luctus viverra. Proin dictum rhoncus finibus. Nulla sed luctus libero, eget sollicitudin
purus. Ut pharetra quis neque vel vehicula. Curabitur fermentum, nibh ac efficitur fringilla, libero augue tempus dolor, in vehicula odio sem in felis. In eu feugiat dui. Aenean est elit, pulvinar sit amet pretium ut, vestibulum non felis. In ullamcorper
ullamcorper erat, a aliquam urna finibus et. Curabitur lobortis dapibus aliquam. Phasellus fringilla augue eget dui condimentum, ac ultricies ligula sodales. Aenean et nisi ut ante maximus porta. Cras sollicitudin blandit purus, eget varius dui. Donec
in metus erat. Morbi eget ex dolor. Aenean tellus turpis, suscipit eu eros vel, ornare feugiat nibh. Suspendisse gravida nunc sem. Cras egestas vestibulum sem at convallis. Nunc eu cursus massa, sed aliquam libero. Sed placerat consequat suscipit. In
et diam in mi auctor viverra vel commodo tortor. Suspendisse at magna diam. Curabitur eu sapien in nibh consequat ultricies vitae eget nulla. Nunc justo enim, porta quis purus non, euismod varius sem. Aenean condimentum ullamcorper turpis, ac auctor elit.
In hac habitasse platea dictumst. Fusce vel semper tellus. Etiam condimentum, felis ut tincidunt venenatis, diam enim rhoncus neque, nec varius ante nulla et tellus. Vestibulum vel auctor leo, at scelerisque ante. Nullam augue leo, cursus vitae mattis
eget, euismod sit amet leo. Integer at commodo purus, a egestas eros. Phasellus a risus ac orci suscipit luctus at iaculis mauris. Fusce et est dui. Aenean a euismod nibh, sit amet vulputate erat. Integer nec sapien felis. Aliquam bibendum egestas aliquet.
Nunc tincidunt sapien sed odio mattis pulvinar id mattis enim. Nam interdum mattis enim, blandit interdum elit auctor in. Nulla quis nisl finibus, venenatis risus vel, rhoncus turpis. Suspendisse condimentum orci id diam hendrerit, eu laoreet sem pharetra.
Sed nec pharetra diam. Vivamus vel massa ante. Sed non leo urna. Proin et commodo magna. Vivamus sed est sollicitudin, egestas quam ornare, vestibulum elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur nec ante aliquet, lacinia risus
ac, tristique ipsum. Nam porttitor sed orci nec volutpat. Etiam finibus enim felis, at lacinia dui tempor at. Sed sem nulla, feugiat sed imperdiet quis, imperdiet nec felis. Nullam eget suscipit tortor. Suspendisse maximus nec sapien id placerat. Cras
ullamcorper enim quis blandit sodales. Fusce ullamcorper turpis libero, quis facilisis arcu condimentum sit amet. Etiam vitae luctus turpis, sed maximus nisl. Maecenas cursus tellus mattis eros placerat pulvinar. Orci varius natoque penatibus et magnis
dis parturient montes, nascetur ridiculus mus. Aliquam sit amet enim dolor. Ut et nisi quis urna congue rutrum. Phasellus mattis nulla eget neque dapibus, mattis mollis elit consequat. Nulla facilisi. Nullam ut nulla eu augue luctus viverra. Proin dictum
rhoncus finibus. Nulla sed luctus libero, eget sollicitudin purus. Ut pharetra quis neque vel vehicula. Curabitur fermentum, nibh ac efficitur fringilla, libero augue tempus dolor, in vehicula odio sem in felis. In eu feugiat dui. Aenean est elit, pulvinar
sit amet pretium ut, vestibulum non felis. In ullamcorper ullamcorper erat, a aliquam urna finibus et. Curabitur lobortis dapibus aliquam. Phasellus fringilla augue eget dui condimentum, ac ultricies ligula sodales. Aenean et nisi ut ante maximus porta.
Cras sollicitudin blandit purus, eget varius dui. Donec in metus erat. Morbi eget ex dolor. Aenean tellus turpis, suscipit eu eros vel, ornare feugiat nibh. Suspendisse gravida nunc sem. Cras egestas vestibulum sem at convallis. Nunc eu cursus massa,
sed aliquam libero. Sed placerat consequat suscipit. In et diam in mi auctor viverra vel commodo tortor. Suspendisse at magna diam. Curabitur eu sapien in nibh consequat ultricies vitae eget nulla. Nunc justo enim, porta quis purus non, euismod varius
sem. Aenean condimentum ullamcorper turpis, ac auctor elit. In hac habitasse platea dictumst. Fusce vel semper tellus. Etiam condimentum, felis ut tincidunt venenatis, diam enim rhoncus neque, nec varius ante nulla et tellus. Vestibulum vel auctor leo,
at scelerisque ante. Nullam augue leo, cursus vitae mattis eget, euismod sit amet leo. Integer at commodo purus, a egestas eros. Phasellus a risus ac orci suscipit luctus at iaculis mauris. Fusce et est dui. Aenean a euismod nibh, sit amet vulputate erat.
Integer nec sapien felis. Aliquam bibendum egestas aliquet. Nunc tincidunt sapien sed odio mattis pulvinar id mattis enim. Nam interdum mattis enim, blandit interdum elit auctor in. Nulla quis nisl finibus, venenatis risus vel, rhoncus turpis. Suspendisse
condimentum orci id diam hendrerit, eu laoreet sem pharetra. Sed nec pharetra diam. Vivamus vel massa ante. Sed non leo urna. Proin et commodo magna. Vivamus sed est sollicitudin, egestas quam ornare, vestibulum elit.

var height = $(this).height();
var offset = $(this).offset().top;
var opacity = (height - homeTop + offset) / (height * .9);
$(this).css("opacity", opacity);
Try something "like" that. You may want to put whatever the height "modifier" is in a variable. I'm no math guru either.

We Keep Coding

JavaScript is the programming language of the Web.