Fixed position element contained inside of container div of variable height

Fixed position element contained inside of container div of variable height - javascript

I am trying to make an element(social links) 'fixed' inside of a container div(blog post) that varies in height and doesn't continue past the container. So relative to the container div, not the window itself. If the Footer/Header are 500px in height, the social links span can overflow the blog container div. I would like it to snap to the top or bottom of the container div, only scrolling within.
example: https://jsfiddle.net/j8ayod1v/6/
<header></header>
<div class="blog-container">
<span class="social-links"></span>
</div>
<footer></footer>

You could try setting the position as sticky or absolute on the element you want to remain "fixed" within the grey container depending on the behavior you're looking for.
I added both below:
header {
background: red;
height: 100px;
}
footer {
background: red;
height: 300px;
}
article {
position: relative;
background: grey;
}
h1 {
padding: 10px 40px;
}
p {
padding: 10px 40px;
}
span {
background: green;
top: 0;
}
.sticky {
position: -webkit-sticky;
position: sticky;
float: left;
}
.absolute {
position: absolute;
right: 0;
}
<header>
</header>
<article>
<span class="sticky">Fixed (sticky)</span>
<span class="absolute">Fixed (absolute)</span>
<h1>Blog Post</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean pulvinar finibus dolor, quis commodo lacus tristique in. Donec mattis massa volutpat, tristique lacus id, aliquam dolor. Mauris sed imperdiet lacus. Sed vitae cursus enim. Mauris lacinia lectus commodo nunc sodales pellentesque. Proin luctus commodo mi, vestibulum tempor elit. Praesent in dolor eleifend ante rutrum ultrices in eu nibh.
Nullam scelerisque lobortis diam, lobortis accumsan nunc molestie ac. Curabitur quis lorem id neque egestas scelerisque vitae id tellus. Morbi convallis, ante id viverra sagittis, lorem neque viverra eros, in finibus lorem purus id velit. Vivamus vitae nunc id nunc condimentum fringilla. Vivamus elementum semper mattis. Sed et porttitor lorem. Vivamus egestas hendrerit nisi, vitae sodales turpis molestie eget. Aliquam erat volutpat. Proin augue ante, dignissim ac nisi ac, blandit laoreet elit.
Donec feugiat leo suscipit diam pharetra efficitur. Curabitur augue sapien, pretium eu congue a, iaculis in tortor. Morbi nec sapien et elit venenatis pulvinar. Ut nec arcu egestas, dignissim enim sit amet, condimentum nulla. Morbi nisi nunc, interdum quis elementum id, vehicula vel risus. Sed eu sem ut eros euismod condimentum ac vel arcu. Duis gravida mattis sem, in porttitor ligula.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Donec maximus augue at nunc hendrerit, nec lobortis libero tincidunt. Mauris at viverra dolor. Praesent sed dolor ut nibh ultrices rutrum. Vestibulum aliquam, quam nec euismod dignissim, ipsum neque semper arcu, eu fringilla nibh velit ut tortor. Curabitur molestie enim vitae accumsan venenatis. Nullam sit amet turpis enim. In tincidunt nisl et nisi posuere, in semper massa fermentum. Phasellus sodales justo ac mauris malesuada, non aliquam mauris ultricies. Curabitur vel neque non augue pulvinar consequat. Duis quis elit sodales, tincidunt ipsum sed, ullamcorper tellus. Fusce sed felis euismod, aliquam lacus eget, blandit turpis. Vivamus sapien elit, gravida ac rhoncus eget, interdum nec velit. Praesent quis velit in ex aliquet cursus vitae sit amet metus. Aliquam molestie enim vitae mauris ornare, non ullamcorper augue lacinia.
Donec consectetur id justo quis aliquam. Fusce sollicitudin turpis ligula. Etiam vel viverra tellus. Curabitur eu cursus nisi. Morbi euismod maximus malesuada. Donec condimentum, orci quis fermentum tempor, turpis enim tincidunt enim, ac posuere nisl nisl non ipsum. Aliquam iaculis risus a urna molestie auctor. Suspendisse ac lorem dui. In hac habitasse platea dictumst. Quisque risus nisl, tempus et nunc id, dictum mattis erat. Nulla pulvinar lectus ac turpis sagittis porttitor. Duis sed bibendum est, ut tincidunt eros. Donec eleifend rutrum turpis nec luctus. Maecenas auctor, libero quis dictum dictum, odio lorem cursus metus, sed viverra nulla tortor ut lorem. Ut at mattis augue, sit amet consequat elit. Quisque vehicula nulla et suscipit facilisis.
</p>
</article>
<footer>
</footer>

Is this what you need?
header {
background: red;
height: 500px;
}
footer {
background: red;
height: 500px;
}
article {
position: relative;
background: grey;
}
h1 {
padding: 10px 40px;
}
p {
padding: 10px 40px;
}
span {
background: green;
position: sticky;
top:0;
}
<header>
</header>
<article>
<span>Fixed</span>
<h1>Blog Post</h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean pulvinar finibus dolor, quis commodo lacus tristique in. Donec mattis massa volutpat, tristique lacus id, aliquam dolor. Mauris sed imperdiet lacus. Sed vitae cursus enim. Mauris lacinia lectus commodo nunc sodales pellentesque. Proin luctus commodo mi, vestibulum tempor elit. Praesent in dolor eleifend ante rutrum ultrices in eu nibh.
Nullam scelerisque lobortis diam, lobortis accumsan nunc molestie ac. Curabitur quis lorem id neque egestas scelerisque vitae id tellus. Morbi convallis, ante id viverra sagittis, lorem neque viverra eros, in finibus lorem purus id velit. Vivamus vitae nunc id nunc condimentum fringilla. Vivamus elementum semper mattis. Sed et porttitor lorem. Vivamus egestas hendrerit nisi, vitae sodales turpis molestie eget. Aliquam erat volutpat. Proin augue ante, dignissim ac nisi ac, blandit laoreet elit.
Donec feugiat leo suscipit diam pharetra efficitur. Curabitur augue sapien, pretium eu congue a, iaculis in tortor. Morbi nec sapien et elit venenatis pulvinar. Ut nec arcu egestas, dignissim enim sit amet, condimentum nulla. Morbi nisi nunc, interdum quis elementum id, vehicula vel risus. Sed eu sem ut eros euismod condimentum ac vel arcu. Duis gravida mattis sem, in porttitor ligula.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Donec maximus augue at nunc hendrerit, nec lobortis libero tincidunt. Mauris at viverra dolor. Praesent sed dolor ut nibh ultrices rutrum. Vestibulum aliquam, quam nec euismod dignissim, ipsum neque semper arcu, eu fringilla nibh velit ut tortor. Curabitur molestie enim vitae accumsan venenatis. Nullam sit amet turpis enim. In tincidunt nisl et nisi posuere, in semper massa fermentum. Phasellus sodales justo ac mauris malesuada, non aliquam mauris ultricies. Curabitur vel neque non augue pulvinar consequat. Duis quis elit sodales, tincidunt ipsum sed, ullamcorper tellus. Fusce sed felis euismod, aliquam lacus eget, blandit turpis. Vivamus sapien elit, gravida ac rhoncus eget, interdum nec velit. Praesent quis velit in ex aliquet cursus vitae sit amet metus. Aliquam molestie enim vitae mauris ornare, non ullamcorper augue lacinia.
Donec consectetur id justo quis aliquam. Fusce sollicitudin turpis ligula. Etiam vel viverra tellus. Curabitur eu cursus nisi. Morbi euismod maximus malesuada. Donec condimentum, orci quis fermentum tempor, turpis enim tincidunt enim, ac posuere nisl nisl non ipsum. Aliquam iaculis risus a urna molestie auctor. Suspendisse ac lorem dui. In hac habitasse platea dictumst. Quisque risus nisl, tempus et nunc id, dictum mattis erat. Nulla pulvinar lectus ac turpis sagittis porttitor. Duis sed bibendum est, ut tincidunt eros. Donec eleifend rutrum turpis nec luctus. Maecenas auctor, libero quis dictum dictum, odio lorem cursus metus, sed viverra nulla tortor ut lorem. Ut at mattis augue, sit amet consequat elit. Quisque vehicula nulla et suscipit facilisis.
</p>
</article>
<footer>
</footer>

Related

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;
}

Is there a way to use slide toggle from a footer while keeping scroll position at the bottom?

So I'm working on a footer for a site that has a button which expands the footer to show/hide some more information (so regular footer on the bottom, expanded section above that). I'm just using a basic slideToggle now, but the problem is this scrolls the screen away from the bottom position (where it was when the toggle is clicked) so it gives the appearance of it sliding down rather than up. Is there a way to force the scroll position to stick to the bottom so the content is sliding in and everything is visible?
Thanks in advance everyone, this has been driving me nuts and I'm feeling kind of stuck!
Some more specifics -
HTML:
<div>
<p>Random Content</p>
<footer>
<div class="expand-me">
<p>Extra Info Here</p>
</div>
<div class="main-footer">
<p>Main Footer Stuff</p>
<a class="expand">Expand!</a>
</div>
</footer>
</div>
CSS:
.main-footer {
text-align:center;
background-color: #e0e0e0;
padding:20px;
}
.expand-me {
display: none;
background-color: purple;
padding:20px;
}
.expand {
cursor:pointer;
background-color: blue;
color: white;
padding: 10px;
}
JS:
$( ".expand" ).click(function() {
$( ".expand-me" ).slideToggle();
});
https://codepen.io/anon/pen/gvmzwB

i have done this by forcing window to scroll to bottom of the page.
$( ".expand" ).click(function() {
$( ".expand-me" ).slideToggle(function(){
var height = $('#mydiv').height();
if($(this).is(':visible')){
$(document).scrollTop($(document).height()-$('.expand-me').height());
}
});
});
.main-footer {
text-align:center;
background-color: #e0e0e0;
padding:20px;
}
.expand-me {
display: none;
background-color: purple;
padding:20px;
}
.expand {
cursor:pointer;
background-color: blue;
color: white;
padding: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc viverra ultrices tellus, eget sollicitudin nibh elementum eu. Cras at metus ut arcu lacinia faucibus. Proin quis leo ut turpis fermentum lacinia nec nec augue. Donec commodo libero eget mi dignissim, quis mattis nibh congue. Ut dignissim condimentum porta. Curabitur feugiat condimentum nisi, a fermentum massa. Nulla blandit fringilla bibendum. Nullam auctor, quam a mollis cursus, nibh nunc fermentum ipsum, vitae tincidunt felis ante at sem. Mauris pharetra porttitor erat.</p>
<p>Duis et nulla malesuada, dictum nunc a, fermentum neque. Sed et purus non lacus rutrum tristique. Sed euismod sagittis commodo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam ipsum justo, commodo sodales augue sit amet, convallis facilisis ligula. Suspendisse molestie, quam et porta eleifend, turpis ligula facilisis erat, at eleifend urna augue vel augue. Maecenas ut lorem dolor. Vestibulum tempor malesuada aliquet.</p>
<p>Aliquam quis mauris non erat sagittis fermentum. Morbi sed feugiat est. Donec interdum tellus id libero porttitor, sed porta nunc viverra. Curabitur lobortis elit non eros consectetur, ut faucibus magna lacinia. Sed ipsum nisl, viverra vehicula ipsum et, fringilla scelerisque libero. Donec sit amet justo sit amet lorem sodales fermentum ut sed neque. Aliquam ornare ornare ex, vel rhoncus erat hendrerit ut. Fusce placerat, dolor in facilisis tristique, magna est ullamcorper lectus, sed molestie dolor felis eu est. Cras aliquam sed ante nec pellentesque. Vestibulum lectus odio, vestibulum iaculis ante sed, cursus ullamcorper sapien.</p>
<p>Mauris at tellus a massa posuere ornare. Duis at euismod nunc. Sed pellentesque elit non diam eleifend, vitae pretium lectus dapibus. Praesent nec ex mi. Vestibulum consectetur eros nunc, in varius tortor facilisis eget. Maecenas ac sapien sit amet magna gravida mollis vel feugiat risus. Donec consectetur tincidunt dui, sed laoreet nisi lobortis in. Nam sollicitudin lorem finibus, rhoncus nunc nec, rutrum dolor. Etiam pellentesque risus eu magna accumsan dapibus. Pellentesque placerat sit amet sapien sed congue. Quisque eu bibendum libero, id pellentesque enim. Donec vel nisl eu tellus varius tempus.</p>
<p>Nulla vestibulum a nulla ac aliquam. Donec eu nisl porta, convallis lectus eu, hendrerit libero. Morbi viverra lorem ut tellus tincidunt mattis. Curabitur nisi nulla, faucibus ut tempor non, varius sit amet nibh. Fusce nulla tortor, convallis non ex ac, rhoncus dictum augue. Fusce maximus dui vitae lacus elementum, condimentum fermentum ex consectetur. Vivamus et sapien posuere, tristique massa sed, sodales nisl. Mauris est arcu, lacinia quis rutrum molestie, scelerisque in eros.</p>
<footer>
<div class="expand-me">
<p>Extra Info: Donec eu nisl porta, convallis lectus eu, hendrerit libero. Morbi viverra lorem ut tellus tincidunt mattis. Curabitur nisi nulla, faucibus ut tempor non, varius sit amet nibh. Fusce nulla tortor, convallis non ex ac, rhoncus dictum augue.</p>
</div>
<div class="main-footer">
<p>Main Footer Stuff</p>
<a class="expand">Expand!</a>
</div>
</footer>
</div>
or like this one
$( ".expand" ).click(function() {
$( ".expand-me" ).slideToggle(function(){
var height = $('.expand').height();
if($('.expand-me').is(':visible')){
$('html, body').animate({
scrollTop: $(document).height()
}, 'slow');
}
});
});
.main-footer {
text-align:center;
background-color: #e0e0e0;
padding:20px;
}
.expand-me {
display: none;
background-color: purple;
padding:20px;
}
.expand {
cursor:pointer;
background-color: blue;
color: white;
padding: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc viverra ultrices tellus, eget sollicitudin nibh elementum eu. Cras at metus ut arcu lacinia faucibus. Proin quis leo ut turpis fermentum lacinia nec nec augue. Donec commodo libero eget mi dignissim, quis mattis nibh congue. Ut dignissim condimentum porta. Curabitur feugiat condimentum nisi, a fermentum massa. Nulla blandit fringilla bibendum. Nullam auctor, quam a mollis cursus, nibh nunc fermentum ipsum, vitae tincidunt felis ante at sem. Mauris pharetra porttitor erat.</p>
<p>Duis et nulla malesuada, dictum nunc a, fermentum neque. Sed et purus non lacus rutrum tristique. Sed euismod sagittis commodo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam ipsum justo, commodo sodales augue sit amet, convallis facilisis ligula. Suspendisse molestie, quam et porta eleifend, turpis ligula facilisis erat, at eleifend urna augue vel augue. Maecenas ut lorem dolor. Vestibulum tempor malesuada aliquet.</p>
<p>Aliquam quis mauris non erat sagittis fermentum. Morbi sed feugiat est. Donec interdum tellus id libero porttitor, sed porta nunc viverra. Curabitur lobortis elit non eros consectetur, ut faucibus magna lacinia. Sed ipsum nisl, viverra vehicula ipsum et, fringilla scelerisque libero. Donec sit amet justo sit amet lorem sodales fermentum ut sed neque. Aliquam ornare ornare ex, vel rhoncus erat hendrerit ut. Fusce placerat, dolor in facilisis tristique, magna est ullamcorper lectus, sed molestie dolor felis eu est. Cras aliquam sed ante nec pellentesque. Vestibulum lectus odio, vestibulum iaculis ante sed, cursus ullamcorper sapien.</p>
<p>Mauris at tellus a massa posuere ornare. Duis at euismod nunc. Sed pellentesque elit non diam eleifend, vitae pretium lectus dapibus. Praesent nec ex mi. Vestibulum consectetur eros nunc, in varius tortor facilisis eget. Maecenas ac sapien sit amet magna gravida mollis vel feugiat risus. Donec consectetur tincidunt dui, sed laoreet nisi lobortis in. Nam sollicitudin lorem finibus, rhoncus nunc nec, rutrum dolor. Etiam pellentesque risus eu magna accumsan dapibus. Pellentesque placerat sit amet sapien sed congue. Quisque eu bibendum libero, id pellentesque enim. Donec vel nisl eu tellus varius tempus.</p>
<p>Nulla vestibulum a nulla ac aliquam. Donec eu nisl porta, convallis lectus eu, hendrerit libero. Morbi viverra lorem ut tellus tincidunt mattis. Curabitur nisi nulla, faucibus ut tempor non, varius sit amet nibh. Fusce nulla tortor, convallis non ex ac, rhoncus dictum augue. Fusce maximus dui vitae lacus elementum, condimentum fermentum ex consectetur. Vivamus et sapien posuere, tristique massa sed, sodales nisl. Mauris est arcu, lacinia quis rutrum molestie, scelerisque in eros.</p>
<footer>
<div class="expand-me">
<p>Extra Info: Donec eu nisl porta, convallis lectus eu, hendrerit libero. Morbi viverra lorem ut tellus tincidunt mattis. Curabitur nisi nulla, faucibus ut tempor non, varius sit amet nibh. Fusce nula tortor, convallis non ex ac, rhoncus dictum augue.</p>
</div>
<div class="main-footer">
<p>Main Footer Stuff</p>
<a class="expand">Expand!</a>
</div>
</footer>
</div>

Is it possible to sticky an overflowed HTML element?

The CSS element position: sticky is supported by most modern web browsers. But some browsers still in common use, notably IE11, don't support it.
To get round this there are various javascript solutions such as Stickyfill and Stickybits. None that I can find, however, will work on an element with its overflow set.
I'm trying to sticky an element that's nested inside one which has:
#content {
position: fixed;
top: 120px;
bottom: 80px;
left: 0;
right: 0;
overflow: auto;
z-index: 4;
}
The position: sticky CSS works fine to stick the child element, but the sticky javascript does not. Removing either position: fixed or overflow: auto makes the sticky work in IE11 but it also completely breaks the layout.
There's a rough reproduction of the issues in this JsFiddle.
I presume the lack of support for this in sticky JS libraries means it's likely impossible, but I wanted to be sure. Is there a way of getting both to work?

I used this solution from this article.
You can check if the browser support the position: sticky and add the fixed position with #support feature detection.
var menu = document.querySelector('.menu');
var menuPosition = menu.getBoundingClientRect();
var placeholder = document.createElement('div');
placeholder.style.width = menuPosition.width + 'px';
placeholder.style.height = menuPosition.height + 'px';
var isAdded = false;
window.addEventListener('scroll', function() {
if (window.pageYOffset >= menuPosition.top && !isAdded) {
menu.classList.add('sticky');
menu.parentNode.insertBefore(placeholder, menu);
isAdded = true;
} else if (window.pageYOffset < menuPosition.top && isAdded) {
menu.classList.remove('sticky');
menu.parentNode.removeChild(placeholder);
isAdded = false;
}
});
body {
margin: 0;
}
.header {
height: 100px;
background-color: #ddcbaf;
text-align: center;
}
.header h1 {
margin-top: 0;
padding-top: 20px;
}
.menu {
margin: 0;
padding: 0;
width: 100%;
background-color: #BFFFF3;
}
.menu li {
display: inline-block;
text-align: center;
width: 25%;
}
.menu li:hover,
.menu li:focus {
background-color: #66FFE3;
}
.menu a {
display: block;
padding: 10px 0;
text-decoration: none;
}
.sticky {
top: 0;
position: fixed;
}
.container {
padding: 0 20px;
color: #989898;
}
<div class="header">
<h1>My big company!</h1>
</div>
<ul class="menu">
<li>Home</li><li>
Services</li><li>
Portfolio</li><li>
About</li>
</ul>
<div class="container">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent luctus urna sit amet sollicitudin venenatis. Aenean odio tortor, varius vitae molestie eu, ultricies vel lacus. Nam viverra fermentum dapibus. Nulla at semper diam. Phasellus sit amet hendrerit sapien, non semper felis. Morbi augue leo, mattis nec leo sed, malesuada porta dui. Maecenas pretium eros quis lorem luctus gravida.</p>
<p>Sed gravida quam odio, euismod accumsan mauris ornare quis. Duis sed condimentum justo. Phasellus ac dui eget velit bibendum viverra. Aenean porttitor commodo diam, quis interdum mi sagittis lobortis. Donec id ipsum dignissim, pharetra nunc sit amet, porttitor elit. Donec iaculis elit et enim interdum, ac laoreet lorem consequat. Sed eu elit ut quam pellentesque cursus. Integer sed condimentum est. Integer tempor placerat bibendum. Sed ut semper arcu, at porttitor nibh. Fusce vulputate pharetra tellus a laoreet. Cras imperdiet enim sed turpis adipiscing placerat. Vestibulum ut rhoncus mauris. In egestas ullamcorper dolor vitae suscipit. Curabitur non orci rutrum, iaculis ligula quis, sollicitudin neque. Aliquam dapibus dignissim tincidunt.</p>
<p>Suspendisse at urna mauris. Vivamus eu lectus et quam viverra accumsan quis nec ligula. Aliquam sed mi sit amet arcu convallis bibendum id eu lorem. Sed pretium eget nibh egestas consectetur. Sed adipiscing, libero sed molestie laoreet, arcu tortor elementum ligula, nec commodo ipsum augue ut tellus. Morbi nibh mauris, facilisis vel bibendum vehicula, dignissim in tortor. Suspendisse augue urna, vestibulum at orci nec, scelerisque cursus mi. Proin congue eget justo et mattis.</p>
<p>Suspendisse suscipit in lectus at aliquet. Integer non sem enim. Vestibulum aliquam imperdiet laoreet. In malesuada sodales augue, ut aliquam elit tempus id. Suspendisse sed hendrerit nibh. Curabitur molestie in libero nec vulputate. Cras ut scelerisque lacus, vitae cursus dui. Fusce ultricies lectus tincidunt, congue elit interdum, pellentesque nunc.</p>
<p>Donec quis diam dapibus, accumsan ipsum vitae, porta turpis. Pellentesque vel ligula suscipit, scelerisque justo sit amet, vestibulum enim. Morbi eget sapien blandit, mattis enim sed, tincidunt eros. Nullam urna lectus, pretium id ultrices non, convallis vitae arcu. Fusce vel justo in nulla pulvinar interdum id sed sem. Ut quis ullamcorper dolor, a bibendum quam. Vivamus pellentesque, enim feugiat tempus venenatis, arcu quam molestie eros, quis bibendum nulla metus vitae nisi. Integer at lectus at metus eleifend molestie. Nulla sit amet pharetra est. Sed commodo ac leo ac volutpat. Vivamus enim sapien, sodales vel cursus sit amet, ornare at risus. Proin a lacus id felis aliquet fringilla.</p>
<p>Donec quis diam dapibus, accumsan ipsum vitae, porta turpis. Pellentesque vel ligula suscipit, scelerisque justo sit amet, vestibulum enim. Morbi eget sapien blandit, mattis enim sed, tincidunt eros. Nullam urna lectus, pretium id ultrices non, convallis vitae arcu. Fusce vel justo in nulla pulvinar interdum id sed sem. Ut quis ullamcorper dolor, a bibendum quam. Vivamus pellentesque, enim feugiat tempus venenatis, arcu quam molestie eros, quis bibendum nulla metus vitae nisi. Integer at lectus at metus eleifend molestie. Nulla sit amet pharetra est. Sed commodo ac leo ac volutpat. Vivamus enim sapien, sodales vel cursus sit amet, ornare at risus. Proin a lacus id felis aliquet fringilla.</p>
<p>Donec quis diam dapibus, accumsan ipsum vitae, porta turpis. Pellentesque vel ligula suscipit, scelerisque justo sit amet, vestibulum enim. Morbi eget sapien blandit, mattis enim sed, tincidunt eros. Nullam urna lectus, pretium id ultrices non, convallis vitae arcu. Fusce vel justo in nulla pulvinar interdum id sed sem. Ut quis ullamcorper dolor, a bibendum quam. Vivamus pellentesque, enim feugiat tempus venenatis, arcu quam molestie eros, quis bibendum nulla metus vitae nisi. Integer at lectus at metus eleifend molestie. Nulla sit amet pharetra est. Sed commodo ac leo ac volutpat. Vivamus enim sapien, sodales vel cursus sit amet, ornare at risus. Proin a lacus id felis aliquet fringilla.</p>
<p>Donec quis diam dapibus, accumsan ipsum vitae, porta turpis. Pellentesque vel ligula suscipit, scelerisque justo sit amet, vestibulum enim. Morbi eget sapien blandit, mattis enim sed, tincidunt eros. Nullam urna lectus, pretium id ultrices non, convallis vitae arcu. Fusce vel justo in nulla pulvinar interdum id sed sem. Ut quis ullamcorper dolor, a bibendum quam. Vivamus pellentesque, enim feugiat tempus venenatis, arcu quam molestie eros, quis bibendum nulla metus vitae nisi. Integer at lectus at metus eleifend molestie. Nulla sit amet pharetra est. Sed commodo ac leo ac volutpat. Vivamus enim sapien, sodales vel cursus sit amet, ornare at risus. Proin a lacus id felis aliquet fringilla.</p>
<p>Donec quis diam dapibus, accumsan ipsum vitae, porta turpis. Pellentesque vel ligula suscipit, scelerisque justo sit amet, vestibulum enim. Morbi eget sapien blandit, mattis enim sed, tincidunt eros. Nullam urna lectus, pretium id ultrices non, convallis vitae arcu. Fusce vel justo in nulla pulvinar interdum id sed sem. Ut quis ullamcorper dolor, a bibendum quam. Vivamus pellentesque, enim feugiat tempus venenatis, arcu quam molestie eros, quis bibendum nulla metus vitae nisi. Integer at lectus at metus eleifend molestie. Nulla sit amet pharetra est. Sed commodo ac leo ac volutpat. Vivamus enim sapien, sodales vel cursus sit amet, ornare at risus. Proin a lacus id felis aliquet fringilla.</p>
<p>Donec quis diam dapibus, accumsan ipsum vitae, porta turpis. Pellentesque vel ligula suscipit, scelerisque justo sit amet, vestibulum enim. Morbi eget sapien blandit, mattis enim sed, tincidunt eros. Nullam urna lectus, pretium id ultrices non, convallis vitae arcu. Fusce vel justo in nulla pulvinar interdum id sed sem. Ut quis ullamcorper dolor, a bibendum quam. Vivamus pellentesque, enim feugiat tempus venenatis, arcu quam molestie eros, quis bibendum nulla metus vitae nisi. Integer at lectus at metus eleifend molestie. Nulla sit amet pharetra est. Sed commodo ac leo ac volutpat. Vivamus enim sapien, sodales vel cursus sit amet, ornare at risus. Proin a lacus id felis aliquet fringilla.</p>
<p>Donec quis diam dapibus, accumsan ipsum vitae, porta turpis. Pellentesque vel ligula suscipit, scelerisque justo sit amet, vestibulum enim. Morbi eget sapien blandit, mattis enim sed, tincidunt eros. Nullam urna lectus, pretium id ultrices non, convallis vitae arcu. Fusce vel justo in nulla pulvinar interdum id sed sem. Ut quis ullamcorper dolor, a bibendum quam. Vivamus pellentesque, enim feugiat tempus venenatis, arcu quam molestie eros, quis bibendum nulla metus vitae nisi. Integer at lectus at metus eleifend molestie. Nulla sit amet pharetra est. Sed commodo ac leo ac volutpat. Vivamus enim sapien, sodales vel cursus sit amet, ornare at risus. Proin a lacus id felis aliquet fringilla.</p>
<p>Donec quis diam dapibus, accumsan ipsum vitae, porta turpis. Pellentesque vel ligula suscipit, scelerisque justo sit amet, vestibulum enim. Morbi eget sapien blandit, mattis enim sed, tincidunt eros. Nullam urna lectus, pretium id ultrices non, convallis vitae arcu. Fusce vel justo in nulla pulvinar interdum id sed sem. Ut quis ullamcorper dolor, a bibendum quam. Vivamus pellentesque, enim feugiat tempus venenatis, arcu quam molestie eros, quis bibendum nulla metus vitae nisi. Integer at lectus at metus eleifend molestie. Nulla sit amet pharetra est. Sed commodo ac leo ac volutpat. Vivamus enim sapien, sodales vel cursus sit amet, ornare at risus. Proin a lacus id felis aliquet fringilla.</p>
<p>Donec quis diam dapibus, accumsan ipsum vitae, porta turpis. Pellentesque vel ligula suscipit, scelerisque justo sit amet, vestibulum enim. Morbi eget sapien blandit, mattis enim sed, tincidunt eros. Nullam urna lectus, pretium id ultrices non, convallis vitae arcu. Fusce vel justo in nulla pulvinar interdum id sed sem. Ut quis ullamcorper dolor, a bibendum quam. Vivamus pellentesque, enim feugiat tempus venenatis, arcu quam molestie eros, quis bibendum nulla metus vitae nisi. Integer at lectus at metus eleifend molestie. Nulla sit amet pharetra est. Sed commodo ac leo ac volutpat. Vivamus enim sapien, sodales vel cursus sit amet, ornare at risus. Proin a lacus id felis aliquet fringilla.</p>
<p>Donec quis diam dapibus, accumsan ipsum vitae, porta turpis. Pellentesque vel ligula suscipit, scelerisque justo sit amet, vestibulum enim. Morbi eget sapien blandit, mattis enim sed, tincidunt eros. Nullam urna lectus, pretium id ultrices non, convallis vitae arcu. Fusce vel justo in nulla pulvinar interdum id sed sem. Ut quis ullamcorper dolor, a bibendum quam. Vivamus pellentesque, enim feugiat tempus venenatis, arcu quam molestie eros, quis bibendum nulla metus vitae nisi. Integer at lectus at metus eleifend molestie. Nulla sit amet pharetra est. Sed commodo ac leo ac volutpat. Vivamus enim sapien, sodales vel cursus sit amet, ornare at risus. Proin a lacus id felis aliquet fringilla.</p>
<p>Donec quis diam dapibus, accumsan ipsum vitae, porta turpis. Pellentesque vel ligula suscipit, scelerisque justo sit amet, vestibulum enim. Morbi eget sapien blandit, mattis enim sed, tincidunt eros. Nullam urna lectus, pretium id ultrices non, convallis vitae arcu. Fusce vel justo in nulla pulvinar interdum id sed sem. Ut quis ullamcorper dolor, a bibendum quam. Vivamus pellentesque, enim feugiat tempus venenatis, arcu quam molestie eros, quis bibendum nulla metus vitae nisi. Integer at lectus at metus eleifend molestie. Nulla sit amet pharetra est. Sed commodo ac leo ac volutpat. Vivamus enim sapien, sodales vel cursus sit amet, ornare at risus. Proin a lacus id felis aliquet fringilla.</p>
<p>Donec quis diam dapibus, accumsan ipsum vitae, porta turpis. Pellentesque vel ligula suscipit, scelerisque justo sit amet, vestibulum enim. Morbi eget sapien blandit, mattis enim sed, tincidunt eros. Nullam urna lectus, pretium id ultrices non, convallis vitae arcu. Fusce vel justo in nulla pulvinar interdum id sed sem. Ut quis ullamcorper dolor, a bibendum quam. Vivamus pellentesque, enim feugiat tempus venenatis, arcu quam molestie eros, quis bibendum nulla metus vitae nisi. Integer at lectus at metus eleifend molestie. Nulla sit amet pharetra est. Sed commodo ac leo ac volutpat. Vivamus enim sapien, sodales vel cursus sit amet, ornare at risus. Proin a lacus id felis aliquet fringilla.</p>
<p>Donec quis diam dapibus, accumsan ipsum vitae, porta turpis. Pellentesque vel ligula suscipit, scelerisque justo sit amet, vestibulum enim. Morbi eget sapien blandit, mattis enim sed, tincidunt eros. Nullam urna lectus, pretium id ultrices non, convallis vitae arcu. Fusce vel justo in nulla pulvinar interdum id sed sem. Ut quis ullamcorper dolor, a bibendum quam. Vivamus pellentesque, enim feugiat tempus venenatis, arcu quam molestie eros, quis bibendum nulla metus vitae nisi. Integer at lectus at metus eleifend molestie. Nulla sit amet pharetra est. Sed commodo ac leo ac volutpat. Vivamus enim sapien, sodales vel cursus sit amet, ornare at risus. Proin a lacus id felis aliquet fringilla.</p>
<p>Donec quis diam dapibus, accumsan ipsum vitae, porta turpis. Pellentesque vel ligula suscipit, scelerisque justo sit amet, vestibulum enim. Morbi eget sapien blandit, mattis enim sed, tincidunt eros. Nullam urna lectus, pretium id ultrices non, convallis vitae arcu. Fusce vel justo in nulla pulvinar interdum id sed sem. Ut quis ullamcorper dolor, a bibendum quam. Vivamus pellentesque, enim feugiat tempus venenatis, arcu quam molestie eros, quis bibendum nulla metus vitae nisi. Integer at lectus at metus eleifend molestie. Nulla sit amet pharetra est. Sed commodo ac leo ac volutpat. Vivamus enim sapien, sodales vel cursus sit amet, ornare at risus. Proin a lacus id felis aliquet fringilla.</p>
<p>Donec quis diam dapibus, accumsan ipsum vitae, porta turpis. Pellentesque vel ligula suscipit, scelerisque justo sit amet, vestibulum enim. Morbi eget sapien blandit, mattis enim sed, tincidunt eros. Nullam urna lectus, pretium id ultrices non, convallis vitae arcu. Fusce vel justo in nulla pulvinar interdum id sed sem. Ut quis ullamcorper dolor, a bibendum quam. Vivamus pellentesque, enim feugiat tempus venenatis, arcu quam molestie eros, quis bibendum nulla metus vitae nisi. Integer at lectus at metus eleifend molestie. Nulla sit amet pharetra est. Sed commodo ac leo ac volutpat. Vivamus enim sapien, sodales vel cursus sit amet, ornare at risus. Proin a lacus id felis aliquet fringilla.</p>
</div>

How to disable the body scroll in the navigation overlay and enable it in the body?

Hello guys i'm looking for an answer to disable the body content scroll in navigation overlay, but when I close the navigation overlay the body scroll should start working but i'm unable to do that.
I couldn't find any correct answer on Stackoverflow. Any help would be appreciated.

You can use JavaScript to set the body overflow (or whatever element's) to hidden when the overlay opens & set it back to auto when you click the close button.
$('.open-overlay').click(function() {
$('body').css('overflow', 'hidden');
});
$('.close-overlay').click(function() {
$('body').css('overflow', 'auto');
});
Here's a working fiddle: https://jsfiddle.net/44gk77d3/1
EDIT: I've added the option to both enable/disable the overflow by clicking on the same button.
https://jsfiddle.net/44gk77d3/2/

Seeing your requirement I have created a code considering your conditions.
I have created body content with scrollable content and overlay menu also with scrollable content.
In the below-mentioned code you can check how body scroll is disabled while overlay menu is visible and again body scroll appears when overlay menu hides.
function openNav() {
document.getElementById("myNav").style.width = "100%";
document.querySelector("body").style.overflow = "hidden";
}
function closeNav() {
document.getElementById("myNav").style.width = "0%";
document.querySelector("body").style.overflow = "auto";
}
body {
font-family: 'Lato', sans-serif;
}
.overlay {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0, 0.9);
overflow-x: hidden;
transition: 0.5s;
}
.overlay-content {
position: relative;
top: 25%;
width: 100%;
text-align: center;
margin-top: 30px;
}
.overlay a {
padding: 8px;
text-decoration: none;
font-size: 36px;
color: #818181;
display: block;
transition: 0.3s;
}
.overlay a:hover,
.overlay a:focus {
color: #f1f1f1;
}
.overlay .closebtn {
position: absolute;
top: 20px;
right: 45px;
font-size: 60px;
}
#media screen and (max-height: 450px) {
.overlay a {
font-size: 20px
}
.overlay .closebtn {
font-size: 40px;
top: 15px;
right: 35px;
}
}
<div id="myNav" class="overlay">
×
<div class="overlay-content">
About
Services
Clients
Contact
About
Services
Clients
Contact
About
Services
Clients
Contact
About
Services
Clients
Contact
About
Services
Clients
Contact
About
Services
Clients
Contact
About
Services
Clients
Contact
About
Services
Clients
Contact
About
Services
Clients
Contact
</div>
</div>
<h2>Fullscreen Overlay Nav Example</h2>
<p>Click on the element below to open the fullscreen overlay navigation menu.</p>
<p>In this example, the navigation menu will slide in, from left to right:</p>
<span style="font-size:30px;cursor:pointer" onclick="openNav()">☰ open</span>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis feugiat est eget consequat varius. Vestibulum non sapien ligula. Ut in nunc vel tortor finibus euismod vitae at ex. Cras ac purus iaculis, dapibus mi quis, volutpat lorem. Nunc rutrum tellus
massa, vitae molestie enim fermentum eu. Fusce id ex eu mi luctus rhoncus ut eget nulla. Cras a vehicula arcu, id pharetra mauris. Interdum et malesuada fames ac ante ipsum primis in faucibus. Aenean malesuada dui ac iaculis vehicula. Etiam venenatis,
est a tincidunt commodo, ex sapien cursus diam, non dictum purus lorem eu tellus. Ut ornare enim orci, ut vulputate odio feugiat at. Nullam laoreet sed ex non ultricies. Maecenas suscipit tincidunt elit, non pellentesque enim ornare et. Phasellus eu
gravida libero, vel tincidunt orci. Nulla facilisi. In congue, sapien tincidunt eleifend ornare, ex lectus finibus felis, aliquet pretium dui justo sed sapien. Nulla elementum arcu non leo lobortis, in ullamcorper eros convallis. Nullam luctus tincidunt
semper. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque ac risus sagittis, venenatis dolor eget, tempus nunc. Proin et nisl ac metus blandit interdum convallis ac quam. Proin porttitor nulla vel egestas
euismod. Suspendisse malesuada tellus quis purus consectetur molestie. Cras interdum varius interdum. Vestibulum condimentum nisi turpis, ut sodales arcu fringilla ut. Quisque ultricies sollicitudin lacus, sit amet euismod sem sagittis ac. Praesent
consectetur libero ut nunc suscipit vulputate. Duis commodo neque vel convallis euismod. Suspendisse potenti. Sed viverra eu enim a rhoncus. Proin sodales commodo odio non blandit. Phasellus rhoncus tellus at velit maximus tincidunt. Nullam lacus lectus,
mattis vel justo vitae, lacinia tempus elit. Sed dignissim posuere accumsan. In malesuada luctus tristique. Ut fringilla aliquet sapien in aliquet. Proin ac ultrices lectus. Mauris sed libero rutrum, tincidunt urna et, dignissim massa. Cras iaculis
sed tortor id maximus. Aliquam in sem id mi tristique pellentesque vitae efficitur leo. Proin non dolor ac libero fringilla tempor sed a arcu. Aenean rutrum tellus sapien, in volutpat lectus cursus et. Sed vel bibendum nulla. Proin nunc quam, dictum
eget congue maximus, vestibulum eu mauris. Aliquam erat volutpat. Morbi quis magna et est tempor condimentum in eu purus. Sed dignissim nulla sed diam scelerisque, non malesuada purus sodales. Praesent in nunc condimentum, tempor dolor vitae, accumsan
enim. Sed nec elit in ex porttitor rutrum. Maecenas ultricies augue eu ex porta, finibus efficitur ex eleifend. Proin volutpat diam a diam ultrices euismod. Sed bibendum semper lorem sodales auctor. Sed turpis dolor, pellentesque nec dui quis, tincidunt
commodo urna. Fusce sit amet elementum enim. Curabitur vel sodales mi, sed laoreet leo. Fusce ut ultricies justo. Etiam nec massa tortor. Mauris interdum commodo erat, in pulvinar urna vestibulum in. In posuere dictum nisl, non bibendum velit mattis
vulputate. Vivamus elementum magna et egestas bibendum. Nulla efficitur urna pellentesque, feugiat augue fringilla, pulvinar felis. In at sollicitudin metus. Aliquam vehicula aliquet dolor vel bibendum. Donec euismod enim metus, et gravida sem tempus
et. Donec ipsum quam, fermentum vel finibus quis, tempor vitae sem. Suspendisse tincidunt nulla ut eros congue cursus. Praesent ante ligula, congue in laoreet sed, pellentesque vel sapien. Nam pulvinar dolor at odio dignissim, vestibulum finibus justo
aliquet. Duis lobortis, metus a vehicula interdum, quam metus convallis orci, et rutrum nibh purus at massa. Aenean rutrum mi enim, accumsan efficitur lorem accumsan quis. In laoreet id arcu non accumsan. Donec quis urna et risus auctor feugiat eget
quis nisl. Aliquam vulputate libero a lacus luctus dignissim. Duis accumsan a tellus sed ultrices. Etiam ornare purus id iaculis volutpat. Pellentesque euismod mi orci, malesuada hendrerit ligula varius sollicitudin. Integer tortor justo, rhoncus a
lobortis vel, pharetra eu ipsum. Aliquam et lectus turpis. Aenean sagittis sapien ut mattis efficitur. Ut ut ullamcorper nulla. Interdum et malesuada fames ac ante ipsum primis in faucibus. Quisque tempus leo metus. Donec tempus dictum mauris. Praesent
finibus dolor vel faucibus finibus. Vestibulum tincidunt euismod dui in pretium. Donec quis facilisis augue. Praesent at lacus vestibulum, finibus leo a, lacinia est. Praesent vehicula sem turpis, non maximus elit placerat quis. Sed quis mi eu nunc
feugiat fermentum ut in mauris. Fusce turpis augue, mollis eu risus a, tincidunt pretium felis. Aliquam sapien velit, bibendum in bibendum at, porta et purus. Nam feugiat lectus vitae ex blandit vestibulum. Curabitur et vestibulum quam, quis ornare
odio. Pellentesque cursus, felis sit amet convallis rutrum, eros dolor finibus justo, sed finibus metus augue quis tellus. Morbi rutrum, mi ut pretium egestas, nisi risus luctus tellus, at pulvinar magna orci ut nunc. Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Maecenas nec eros malesuada, ornare arcu vitae, dictum massa. Suspendisse suscipit, ante vitae elementum scelerisque, orci neque mattis massa, vel luctus ante orci ac urna. Vestibulum sagittis, urna eget pellentesque convallis, massa
lorem tincidunt purus, eget tincidunt enim libero at lacus. Maecenas dignissim quam ut leo consectetur facilisis. Phasellus tincidunt viverra malesuada. Phasellus nec quam maximus, egestas ante ut, facilisis erat. Phasellus porta magna enim, nec semper
dolor facilisis sit amet. Proin dapibus dui sit amet urna convallis, et bibendum nunc aliquet. Suspendisse ac ex eu dui mollis molestie. Sed dignissim, sem in pretium ultrices, enim elit pellentesque odio, quis elementum nunc magna vitae nibh. Nulla
venenatis quis risus vitae rhoncus. Vivamus varius tempus justo vitae volutpat. Suspendisse vitae venenatis erat. In et ultrices nunc. Curabitur ac suscipit orci. Proin porta nibh ac urna viverra, a porttitor risus porttitor. Aliquam bibendum convallis
enim, eget porttitor dui dignissim vitae. Duis aliquet congue enim sit amet pretium. Ut sed imperdiet diam. Nam ut est mauris. Vestibulum ut lorem tristique, accumsan neque et, egestas diam. Class aptent taciti sociosqu ad litora torquent per conubia
nostra, per inceptos himenaeos. Sed justo leo, accumsan suscipit purus nec, auctor faucibus leo. Donec at tincidunt purus, sit amet vulputate risus. Duis sed sodales neque. Donec nec risus id metus venenatis aliquam. Sed maximus tortor et ligula commodo
finibus. Nullam in leo at urna aliquam pellentesque. Donec egestas ex sapien, vitae commodo magna accumsan vitae. Sed tincidunt sit amet lacus accumsan rhoncus. Mauris feugiat magna vel nisl tincidunt, nec auctor neque pulvinar. Cras sit amet pellentesque
justo, sit amet elementum sapien. Suspendisse imperdiet feugiat massa, eu vulputate neque commodo quis. Morbi venenatis est ut massa sollicitudin consectetur. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin
porttitor diam sed convallis faucibus. Fusce pretium eget mi id consequat. Proin non sem euismod, porttitor elit sed, porttitor eros. Nam elementum, turpis quis convallis lacinia, libero nisi consectetur lectus, in luctus neque enim in leo. Quisque
congue elementum interdum. Quisque commodo urna ipsum, in ullamcorper sapien elementum vitae. Vivamus mollis magna orci, id volutpat felis sodales vitae. Quisque sagittis, ante a luctus dignissim, nisi elit mattis sapien, et sodales neque risus ut lacus.
Duis viverra justo augue, vel ornare erat laoreet ac. Aenean imperdiet leo non tristique dapibus. Morbi in tempus metus. Sed eu scelerisque dolor, ac vehicula tellus. Vivamus a quam a nisi dignissim posuere. Nulla facilisi. Praesent tristique dui nec
neque aliquam blandit. Nam non tincidunt ipsum. Morbi cursus sed nulla quis porta. Ut urna libero, iaculis ut velit sed, sagittis consectetur nisi. Aliquam pretium, est ac auctor pellentesque, nulla odio ornare dolor, sed vulputate purus neque ut ligula.
Cras diam felis, tempor quis placerat a, suscipit non odio. Nam enim erat, tempor nec euismod at, venenatis ut mi. Sed lacus sem, semper vel blandit id, rutrum et augue. Nulla varius mattis felis. Vestibulum ac eros sollicitudin, vehicula massa non,
suscipit dolor. Phasellus posuere ultricies nunc, lacinia viverra augue tempus eget. Quisque id lacinia nisi, sit amet tempor augue. Integer massa velit, aliquam vitae ex et, placerat euismod augue. Nullam faucibus, lorem eget sodales hendrerit, nulla
enim molestie risus, sed laoreet velit erat nec elit. Pellentesque nec condimentum felis. Quisque at nisi nec purus blandit hendrerit in et risus. Nam mattis enim tortor, eu porttitor purus blandit sed. Aenean scelerisque sodales consectetur. Sed euismod
ullamcorper mauris at aliquet. Praesent varius quam vulputate gravida tincidunt. Cras vitae nisl bibendum, dictum lectus sed, semper enim. Donec id felis ex. Proin sit amet eros nec metus eleifend dapibus at a nibh. Suspendisse est nibh, bibendum quis
tincidunt non, lobortis eget lorem. Aenean cursus pharetra porta. In congue, erat sit amet tempus molestie, arcu nisl finibus risus, eu tempus augue purus et ex. Vivamus maximus nisl ut facilisis suscipit. Vivamus nec ullamcorper arcu. Etiam eu dolor
vel orci consequat imperdiet nec eget nulla. Praesent volutpat maximus dolor, ut ornare odio aliquet interdum. Duis at felis velit. In non facilisis leo. Nulla a convallis nulla. Donec nulla odio, vestibulum eget pulvinar in, congue et lorem. Mauris
mollis cursus erat, in dignissim tortor viverra non. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis vel nisi fringilla, molestie mi id, placerat lorem. Nullam elementum diam mauris, vel hendrerit lacus faucibus
ac. Donec justo orci, pretium at mollis et, rhoncus sed est. In tincidunt pellentesque nisl eu malesuada. Donec sagittis eros sit amet aliquam fringilla. Duis ullamcorper, ipsum vitae dignissim elementum, est odio accumsan orci, non pharetra ipsum dolor
sit amet nisi. In vulputate scelerisque arcu, sed laoreet nunc laoreet gravida. Fusce arcu sapien, dapibus nec dui vel, imperdiet luctus elit. Nullam ultrices velit a ex euismod, id fermentum risus mollis. Curabitur sem magna, posuere a nisl non, fringilla
pellentesque quam. Suspendisse ornare aliquet sem, ut luctus diam vulputate id. Nunc ac rhoncus erat. Nullam sed tortor mi. Etiam sed lorem ligula. Pellentesque efficitur fermentum lacinia. Aliquam erat volutpat. In fringilla elit ornare lacus euismod,
vel facilisis lorem tempus. Nulla et arcu vitae eros lacinia laoreet. Etiam convallis hendrerit libero, et tempus erat placerat ac. Nulla vitae tellus vitae risus euismod bibendum quis vel magna. Donec pellentesque mollis risus. Proin eleifend ipsum
mi, id malesuada lacus tincidunt sed. Maecenas aliquam facilisis urna, eget fringilla dui vulputate ac. Nam et lectus magna. Nulla sed mauris ut velit tempus sollicitudin eget id lacus. Vivamus venenatis massa orci, ut dapibus quam porttitor et. Maecenas
neque mi, commodo quis diam et, pellentesque porttitor nisl. Fusce dictum lectus mauris, a iaculis turpis tincidunt eu. Sed vestibulum quis ex dignissim ullamcorper. Integer tempus elit et dolor semper, eget interdum magna fermentum. Ut pulvinar venenatis
ultricies. Donec rutrum turpis at ipsum congue bibendum. Nam porttitor id dolor in pharetra. Ut lectus mi, suscipit ut odio et, condimentum luctus sapien. Vivamus est enim, volutpat at viverra ut, sollicitudin at ex. Nulla imperdiet porta sem. Nulla
facilisi. Maecenas et risus sit amet magna fringilla placerat. Nulla elementum nunc vitae dictum varius. Ut eu felis risus. Aliquam viverra vestibulum velit, ut cursus nisl cursus in. Sed molestie massa at nisi ornare sodales.
</p>
If still you face any doubt feel free to comment.

scrollmagic and velocityjs

I'm trying to animate a div at some point with scrollmagic and velocity.js It gives me an error supplied argument of 'addTo()' is not a valid ScrollMagic Controller so the velocity animation takes place before it reach the trigger but It seems to me that it's a valid controller
var scene = new ScrollMagic.Controller();
new ScrollMagic.Scene({triggerElement: "#trigger", triggerHook: 'onLeave' }).setVelocity($(".Imagem").velocity({ scaleX: [1, 0], })).addTo(scene);
.rick {
width: 350px;
height: 200px;
position:relative;
}
.Imagem {
float: left;
position: absolute;
left: 0px;
top: 0px;
background-color: green;
background-size: cover;
width: 350px;
height: 200px;
z-index: 25;
}
.Ima {
position: absolute;
opacity:0;
z-index: 5;
}
.spacer.s0 {
min-height: 1px;
}
.spacer.s2 {
min-height: 200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.5.0/velocity.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.5.0/velocity.ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/animation.velocity.js"></script>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas pretium dui at nunc finibus tempor. Ut vel lorem id ipsum hendrerit vestibulum at vitae ex. Vestibulum tellus turpis, accumsan sit amet molestie a, faucibus ut enim. Maecenas velit justo, cursus in scelerisque sed, sodales in orci. In non libero purus. Integer posuere rhoncus venenatis. Nullam in rutrum risus. Sed elementum enim a risus eleifend tempus. Aliquam dui nibh, ornare quis maximus sed, interdum id erat. Phasellus hendrerit, lacus sodales vulputate tempus, augue ipsum hendrerit turpis, sed blandit nibh risus ultrices sapien. Vivamus diam ipsum, tincidunt eget ullamcorper ut, cursus fermentum sapien. Nam a accumsan nisl, vitae faucibus erat. Donec sit amet arcu non metus viverra pulvinar quis non nunc.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec egestas, urna vel gravida elementum, erat massa feugiat justo, a blandit metus ligula vel mauris. Donec vel augue hendrerit felis consequat dapibus et nec erat. Proin erat turpis, dignissim a neque vitae, vestibulum fermentum dui. Pellentesque egestas quis ligula non fermentum. Suspendisse ultricies neque urna, eget convallis magna elementum ac. Mauris eu rutrum arcu, eget elementum elit.
Sed commodo nisi quis libero porta mollis. Integer ullamcorper neque ut tempus sollicitu
<div class="spacer s0"></div>
<div class="spacer s2"></div>
<div id="trigger" class="rick"><div class="Imagem"></div><img class="Ima" src="http://lorempicsum.com/futurama/350/200/1" ></div>
<div class="spacer s2"></div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas pretium dui at nunc finibus tempor. Ut vel lorem id ipsum hendrerit vestibulum at vitae ex. Vestibulum tellus turpis, accumsan sit amet molestie a, faucibus ut enim. Maecenas velit justo, cursus in scelerisque sed, sodales in orci. In non libero purus. Integer posuere rhoncus venenatis. Nullam in rutrum risus. Sed elementum enim a risus eleifend tempus. Aliquam dui nibh, ornare quis maximus sed, interdum id erat. Phasellus hendrerit, lacus sodales vulputate tempus, augue ipsum hendrerit turpis, sed blandit nibh risus ultrices sapien. Vivamus diam ipsum, tincidunt eget ullamcorper ut, cursus fermentum sapien. Nam a accumsan nisl, vitae faucibus erat. Donec sit amet arcu non metus viverra pulvinar quis non nunc.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec egestas, urna vel gravida elementum, erat massa feugiat justo, a blandit metus ligula vel mauris. Donec vel augue hendrerit felis consequat dapibus et nec erat. Proin erat turpis, dignissim a neque vitae, vestibulum fermentum dui. Pellentesque egestas quis ligula non fermentum. Suspendisse ultricies neque urna, eget convallis magna elementum ac. Mauris eu rutrum arcu, eget elementum elit.
Sed commodo nisi quis libero porta mollis. Integer ullamcorper neque ut tempus sollicitudin. Vivamus porta, neque non dictum viverra, nunc sem volutpat enim, non dictum eros justo in lorem. Pellentesque commodo, mi ut commodo dictum, massa nulla fermentum neque, at congue dolor risus a ex. Mauris volutpat elit non rutrum viverra. Quisque odio sapien, auctor id hendrerit ut, egestas vel augue. Maecenas molestie venenatis dui eu pharetra. Donec non interdum eros. In hac habitasse platea dictumst. Vestibulum volutpat eu tellus in malesuada. Integer cursus ullamcorper efficitur. Nunc eleifend posuere nulla in iaculis. Etiam dictum odio vel sollicitudin interdum. Etiam ut dolor vel nibh vestibulum accumsan. In faucibus bibendum arcu, rutrum venenatis justo sodales pellentesque. Proin finibus leo nisl, ut dictum dolor convallis ut.
Ut dignissim luctus dapibus. Mauris egestas sollicitudin nisl, sed aliquet orci cursus vitae. Praesent pellentesque porta est nec iaculis. Vestibulum non sem massa. Pellentesque eleifend dictum faucibus. Vivamus quis nisi vel velit finibus lobortis. Sed quis semper neque. Etiam vestibulum fringilla velit vitae finibus.
Sed sollicitudin ornare porttitor. Nulla facilisi. Suspendisse at sem urna. Sed leo ante, ultricies quis aliquet id, ultricies id nulla. Mauris ac fringilla quam. Pellentesque sit amet nunc sed nisl porttitor tempus. Mauris quis suscipit elit, a sagittis arcu. Maecenas et dignissim ante, non accumsan ex. Vestibulum vehicula efficitur tortor. Aliquam posuere sodales eros eu tincidunt. Donec vitae dapibus nulla, non tempus tellus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas pretium dui at nunc finibus tempor. Ut vel lorem id ipsum hendrerit vestibulum at vitae ex. Vestibulum tellus turpis, accumsan sit amet molestie a, faucibus ut enim. Maecenas velit justo, cursus in scelerisque sed, sodales in orci. In non libero purus. Integer posuere rhoncus venenatis. Nullam in rutrum risus. Sed elementum enim a risus eleifend tempus. Aliquam dui nibh, ornare quis maximus sed, interdum id erat. Phasellus hendrerit, lacus sodales vulputate tempus, augue ipsum hendrerit turpis, sed blandit nibh risus ultrices sapien. Vivamus diam ipsum, tincidunt eget ullamcorper ut, cursus fermentum sapien. Nam a accumsan nisl, vitae faucibus erat. Donec sit amet arcu non metus viverra pulvinar quis non nunc.
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec egestas, urna vel gravida elementum, erat massa feugiat justo, a blandit metus ligula vel mauris. Donec vel augue hendrerit felis consequat dapibus et nec erat. Proin erat turpis, dignissim a neque vitae, vestibulum fermentum dui. Pellentesque egestas quis ligula non fermentum. Suspendisse ultricies neque urna, eget convallis magna elementum ac. Mauris eu rutrum arcu, eget elementum elit.
Sed commodo nisi quis libero porta mollis. Integer ullamcorper neque ut tempus sollicitudin. Vivamus porta, neque non dictum viverra, nunc sem volutpat enim, non dictum eros justo in lorem. Pellentesque commodo, mi ut commodo dictum, massa nulla fermentum neque, at congue dolor risus a ex. Mauris volutpat elit non rutrum viverra. Quisque odio sapien, auctor id hendrerit ut, egestas vel augue. Maecenas molestie venenatis dui eu pharetra. Donec non interdum eros. In hac habitasse platea dictumst. Vestibulum volutpat eu tellus in malesuada. Integer cursus ullamcorper efficitur. Nunc eleifend posuere nulla in iaculis. Etiam dictum odio vel sollicitudin interdum. Etiam ut dolor vel nibh vestibulum accumsan. In faucibus bibendum arcu, rutrum venenatis justo sodales pellentesque. Proin finibus leo nisl, ut dictum dolor convallis ut.
Ut dignissim luctus dapibus. Mauris egestas sollicitudin nisl, sed aliquet orci cursus vitae. Praesent pellentesque porta est nec iaculis. Vestibulum non sem massa. Pellentesque eleifend dictum faucibus. Vivamus quis nisi vel velit finibus lobortis. Sed quis semper neque. Etiam vestibulum fringilla velit vitae finibus.
Sed sollicitudin ornare porttitor. Nulla facilisi. Suspendisse at sem urna. Sed leo ante, ultricies quis aliquet id, ultricies id nulla. Mauris ac fringilla quam. Pellentesque sit amet nunc sed nisl porttitor tempus. Mauris quis suscipit elit, a sagittis arcu. Maecenas et dignissim ante, non accumsan ex. Vestibulum vehicula efficitur tortor. Aliquam posuere sodales eros eu tincidunt. Donec vitae dapibus nulla, non tempus tellus.
]2

You get that error because you are not instantiating this Controller using the constructor properly. You are missing the new keyword. Correct statement would be as -
var scene = new ScrollMagic.Controller();
This was causing a failure if instanseof operator in addTo function .
Refer this link for usage of velocity plugin.
Update css for .Ima class
.Ima {
position: absolute;
opacity:100;
z-index: 5;
}
Update the js setVelocity call
var scene = new ScrollMagic.Controller();
new ScrollMagic.Scene({triggerElement: "#trigger", triggerHook: 'onLeave' }).setVelocity(".Imagem",{opacity:0}, {duration:600}).addTo(scene);
This can be found working here

We Keep Coding

JavaScript is the programming language of the Web.