Develop Reference

Fixed Sidebar with Fixed Header and Scrollable Content

I'm looking to have a fixed sidebar that works on mobile with a fixed header and a scrollable content section. I'd like to have the sidebar itself fill 100% of the view height, but be a certain % of the overall screen width.
I have a solution with 100vh that works on desktop, but on mobile the bottom 'navigation' links of the browser overlap the content.
Is there a known solution to make this work? At this point, I don't care if I have to use JavaScript to make it work right.

If the only problem with your current sidebar styling is that it overlaps bottom nav links on mobile devices, you can address that with a media query:
#media screen and (max-height: 450px) {
.sidebar
height: calc(100% - 50px);
}
}

// When the user scrolls the page, execute myFunction
window.onscroll = function() {myFunction()};
// Get the header
var header = document.getElementById("myHeader");
// Get the offset position of the navbar
var sticky = header.offsetTop;
// Add the sticky class to the header when you reach its scroll position. Remove "sticky" when you leave the scroll position
function myFunction() {
if (window.pageYOffset > sticky) {
header.classList.add("sticky");
} else {
header.classList.remove("sticky");
}
}
.sidenav {
margin-top: 100px;
height: 100%; /* Full-height: remove this if you want "auto" height */
width: 160px; /* Set the width of the sidebar */
position: fixed; /* Fixed Sidebar (stay in place on scroll) */
z-index: 1; /* Stay on top */
top: 0; /* Stay at the top */
left: 0;
background-color: #111; /* Black */
overflow-x: hidden; /* Disable horizontal scroll */
padding-top: 20px;
}
/* The navigation menu links */
.sidenav a {
padding: 6px 8px 6px 16px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
}
/* When you mouse over the navigation links, change their color */
.sidenav a:hover {
color: #f1f1f1;
}
/* Style page content */
.main {
margin-left: 160px; /* Same as the width of the sidebar */
padding: 0px 10px;
}
/* On smaller screens, where height is less than 450px, change the style of the sidebar (less padding and a smaller font size) */
#media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
/* Style the header */
.header {
padding: 10px 16px;
background: #555;
color: #f1f1f1;
margin: 0px;
}
/* Page content */
.content {
padding: 16px;
}
/* The sticky class is added to the header with JS when it reaches its scroll position */
.sticky {
position: fixed;
top: 0;
width: 100%
}
/* Add some top padding to the page content to prevent sudden quick movement (as the header gets a new position at the top of the page (position:fixed and top:0) */
.sticky + .content {
padding-top: 100px;
}
<div class="header" id="myHeader">
<h2>My Header</h2>
</div>
<div class="content">
<div class="sidenav">
About
Services
Clients
Contact
</div>
<!-- Page content -->
<div class="main">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. At tempor commodo ullamcorper a. Quis blandit turpis cursus in hac habitasse platea dictumst quisque. Auctor urna nunc id cursus metus aliquam. Netus et malesuada fames ac turpis egestas integer. Amet mattis vulputate enim nulla aliquet. Blandit aliquam etiam erat velit scelerisque in dictum non consectetur. Risus viverra adipiscing at in tellus integer. Eget nulla facilisi etiam dignissim diam quis. In hendrerit gravida rutrum quisque. Viverra nam libero justo laoreet sit amet cursus. Fringilla urna porttitor rhoncus dolor purus non enim praesent.
Tellus in metus vulputate eu scelerisque. Aenean pharetra magna ac placerat vestibulum lectus mauris ultrices. Mauris in aliquam sem fringilla ut morbi tincidunt. Faucibus in ornare quam viverra orci sagittis eu volutpat. Ac tortor vitae purus faucibus ornare suspendisse. Velit euismod in pellentesque massa placerat duis ultricies lacus. Leo integer malesuada nunc vel risus commodo viverra maecenas accumsan. Nec ultrices dui sapien eget mi proin sed. Nisi scelerisque eu ultrices vitae. Volutpat lacus laoreet non curabitur gravida arcu ac tortor dignissim. Facilisi cras fermentum odio eu feugiat. Lorem donec massa sapien faucibus et molestie. Nunc non blandit massa enim nec dui nunc mattis. Sapien eget mi proin sed libero. Libero justo laoreet sit amet cursus sit. Elit ullamcorper dignissim cras tincidunt.
Facilisi cras fermentum odio eu feugiat pretium nibh. Mauris rhoncus aenean vel elit scelerisque mauris pellentesque pulvinar. Nisl nisi scelerisque eu ultrices vitae auctor. Pulvinar etiam non quam lacus suspendisse faucibus interdum. Interdum velit euismod in pellentesque massa placerat duis ultricies lacus. In hac habitasse platea dictumst quisque sagittis purus sit amet. At erat pellentesque adipiscing commodo elit at imperdiet dui. Ornare quam viverra orci sagittis eu volutpat odio. Feugiat nisl pretium fusce id. Tortor dignissim convallis aenean et. Tincidunt id aliquet risus feugiat in ante metus dictum. At tempor commodo ullamcorper a. Leo vel fringilla est ullamcorper eget nulla. Felis eget nunc lobortis mattis aliquam. Ut tellus elementum sagittis vitae et leo duis. Quis commodo odio aenean sed adipiscing. Adipiscing diam donec adipiscing tristique.
Sit amet massa vitae tortor condimentum lacinia quis vel. A diam sollicitudin tempor id eu nisl nunc mi ipsum. Scelerisque viverra mauris in aliquam. Ut tortor pretium viverra suspendisse. Ipsum dolor sit amet consectetur adipiscing elit ut aliquam purus. Quis hendrerit dolor magna eget est lorem ipsum dolor. Tincidunt tortor aliquam nulla facilisi cras. Massa eget egestas purus viverra accumsan in nisl nisi. Et tortor at risus viverra adipiscing at in. Dui id ornare arcu odio ut sem.
Quis hendrerit dolor magna eget est lorem. Dictumst vestibulum rhoncus est pellentesque elit ullamcorper dignissim cras. Velit egestas dui id ornare arcu odio ut. Eget velit aliquet sagittis id consectetur purus. Fermentum et sollicitudin ac orci phasellus egestas. Nulla pellentesque dignissim enim sit. In vitae turpis massa sed elementum tempus. Arcu odio ut sem nulla pharetra diam sit. Nisl purus in mollis nunc sed id semper risus. Amet nisl suscipit adipiscing bibendum est ultricies integer quis. Morbi blandit cursus risus at ultrices mi tempus. Tincidunt tortor aliquam nulla facilisi cras fermentum odio. Tempus iaculis urna id volutpat lacus laoreet non curabitur gravida. Cursus risus at ultrices mi tempus imperdiet nulla malesuada. Iaculis at erat pellentesque adipiscing. Faucibus turpis in eu mi bibendum. Augue mauris augue neque gravida in fermentum. Vel turpis nunc eget lorem. Suspendisse in est ante in nibh mauris cursus mattis. Placerat in egestas erat imperdiet sed euismod nisi porta.
Augue neque gravida in fermentum et sollicitudin ac orci. Et netus et malesuada fames ac turpis egestas sed. Habitasse platea dictumst vestibulum rhoncus. Nec ultrices dui sapien eget mi proin. Suspendisse sed nisi lacus sed. Lacus luctus accumsan tortor posuere ac ut. Pulvinar neque laoreet suspendisse interdum consectetur libero. Eros in cursus turpis massa tincidunt. Eget duis at tellus at urna condimentum mattis pellentesque. Magna etiam tempor orci eu lobortis elementum nibh. Pellentesque id nibh tortor id aliquet lectus proin. Amet purus gravida quis blandit turpis. Facilisis mauris sit amet massa vitae tortor condimentum. Leo in vitae turpis massa sed elementum tempus egestas sed. Neque egestas congue quisque egestas diam in arcu cursus. Cursus metus aliquam eleifend mi in nulla. Amet mattis vulputate enim nulla aliquet porttitor lacus luctus. Venenatis urna cursus eget nunc scelerisque viverra mauris. Nunc eget lorem dolor sed viverra ipsum.
Malesuada bibendum arcu vitae elementum. Odio euismod lacinia at quis risus sed vulputate. Dolor sit amet consectetur adipiscing elit duis tristique sollicitudin nibh. At volutpat diam ut venenatis tellus in. Nascetur ridiculus mus mauris vitae. Condimentum vitae sapien pellentesque habitant morbi tristique. Urna nec tincidunt praesent semper feugiat nibh sed pulvinar proin. Et ultrices neque ornare aenean euismod elementum nisi quis. Nulla facilisi morbi tempus iaculis urna id volutpat lacus. Integer feugiat scelerisque varius morbi enim nunc faucibus a pellentesque. Adipiscing bibendum est ultricies integer quis. Egestas purus viverra accumsan in nisl nisi scelerisque eu. Sit amet risus nullam eget felis. Scelerisque purus semper eget duis. Habitasse platea dictumst vestibulum rhoncus est pellentesque. Sit amet nisl suscipit adipiscing bibendum est ultricies integer quis. Feugiat scelerisque varius morbi enim nunc faucibus a. Ornare arcu dui vivamus arcu felis bibendum.
Arcu non sodales neque sodales ut etiam sit amet. Imperdiet nulla malesuada pellentesque elit eget gravida cum. Consectetur adipiscing elit ut aliquam purus sit amet luctus venenatis. Ac turpis egestas maecenas pharetra convallis posuere morbi. Massa tempor nec feugiat nisl pretium fusce. Pretium quam vulputate dignissim suspendisse. Amet purus gravida quis blandit turpis cursus. Nunc eget lorem dolor sed viverra ipsum nunc. Eu feugiat pretium nibh ipsum consequat nisl. Sit amet venenatis urna cursus. Accumsan sit amet nulla facilisi morbi. Lorem donec massa sapien faucibus et molestie. Donec enim diam vulputate ut pharetra sit amet aliquam id.
Ornare massa eget egestas purus viverra accumsan in. Egestas purus viverra accumsan in nisl nisi scelerisque eu ultrices. Massa eget egestas purus viverra accumsan in nisl nisi scelerisque. Commodo ullamcorper a lacus vestibulum sed arcu non odio. Risus sed vulputate odio ut enim. Est pellentesque elit ullamcorper dignissim. Tincidunt vitae semper quis lectus nulla at volutpat diam. Mattis rhoncus urna neque viverra justo nec ultrices. Aliquet nec ullamcorper sit amet risus. Mauris vitae ultricies leo integer malesuada nunc vel risus. Fringilla phasellus faucibus scelerisque eleifend donec pretium vulputate. Sed odio morbi quis commodo odio. Ornare aenean euismod elementum nisi quis. Placerat vestibulum lectus mauris ultrices eros in cursus turpis.
Tortor at risus viverra adipiscing at in tellus integer feugiat. Lectus vestibulum mattis ullamcorper velit sed ullamcorper morbi tincidunt. Suspendisse potenti nullam ac tortor vitae purus faucibus ornare. Mauris nunc congue nisi vitae suscipit tellus mauris a. Sed blandit libero volutpat sed cras ornare arcu dui. Maecenas pharetra convallis posuere morbi leo urna molestie at. Tellus at urna condimentum mattis pellentesque id nibh tortor. Interdum velit euismod in pellentesque massa placerat. Mauris sit amet massa vitae tortor condimentum lacinia quis. Viverra nibh cras pulvinar mattis nunc sed blandit libero volutpat. Viverra mauris in aliquam sem fringilla ut. Velit euismod in pellentesque massa placerat duis. Ultrices tincidunt arcu non sodales neque sodales. Sit amet tellus cras adipiscing enim eu. Arcu cursus vitae congue mauris rhoncus aenean vel. Leo in vitae turpis massa sed elementum tempus egestas sed. Mattis rhoncus urna neque viverra justo nec ultrices. Quis enim lobortis scelerisque fermentum dui faucibus in ornare quam. Ut porttitor leo a diam sollicitudin. Eget gravida cum sociis natoque penatibus et magnis.
</div>
</div>
https://www.w3schools.com/howto/howto_js_sticky_header.asp
https://www.w3schools.com/howto/howto_css_fixed_sidebar.asp

Make the CTA button stick to the bottom of the page when scrolling

I want to make a CTA button that sticks to the bottom of the page after page scroll reaches to some extent. Kindly look at the image below:
The rules follow:
On load, it should be on the original position of the CTA button.
When the page is getting scrolled, the CTA button will follow.
When the CTA button reaches to the top of the window, the button will move to the bottom-right corner and remains sticky over there.
Any codepen, jsfiddle or website references about this kind of interaction will be appreciated.

There are multiple ways to do this like using plugins or using simple CSS and JavaScript(below example). If you are looking for animation to button on the scroll you can make some adjustments in CSS with animation code or I guess some of the plugins are already doing this.
window.onscroll = function() {myFunction()};
var btn = document.getElementById("floatBtn");
var sticky = btn.offsetTop;
function myFunction() {
if (window.pageYOffset >= sticky) {
btn.classList.add("sticky")
} else {
btn.classList.remove("sticky");
}
}
body {
margin: 0;
font-size: 28px;
font-family: Arial, Helvetica, sans-serif;
}
.header {
background-color: #f1f1f1;
padding: 30px;
text-align: center;
}
.content {
padding: 16px;
}
.keka {
width: 100%;
text-align: center;
}
#floatBtn {
background: #004567;
color: white;
padding: 10px 30px;
font-size: 18px;
display: inline-block;
}
.sticky {
position: fixed;
bottom: 0;
right: 20px;
}
.sticky + .content {
padding-top: 60px;
}
.content{
height: 1900px
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
</style>
</head>
<body>
<div class="header">
<h2>Header of the page</h2>
<p>Some content</p>
</div>
<div class="keka">
<button id="floatBtn">Floating button</button>
</div>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet ex eu nulla interdum fermentum a at est. Vestibulum vehicula augue et nisl porta, at pretium leo consequat. Suspendisse sit amet semper nisi. In hac habitasse platea dictumst. In vehicula elit ut efficitur mollis. Nam vehicula pulvinar pulvinar. Curabitur neque purus, placerat eget nulla iaculis, tincidunt euismod lectus. Praesent facilisis at sem sit amet sagittis. Cras sagittis mi vel ornare convallis. Morbi tempus tempus lacus, eget lacinia magna porttitor non. Praesent tellus quam, molestie tincidunt libero sit amet, luctus viverra velit. Etiam vestibulum aliquam posuere. Praesent a dapibus sem. Sed cursus mi sit amet nisl maximus, eget varius lectus consectetur. Mauris molestie ac mi non malesuada. Proin faucibus sem vitae ex blandit tempor. Donec ut diam in tellus malesuada lacinia maximus non arcu. Proin blandit nisl at lacus feugiat, et auctor lectus viverra. Donec convallis eleifend ligula sagittis viverra. Vivamus mattis, felis et finibus maximus, diam felis vestibulum odio, eget efficitur tellus magna nec ante. Sed porta elit commodo nisi efficitur, in egestas nibh maximus. Integer nec leo ac ligula semper finibus at rhoncus felis. In pellentesque tincidunt pretium. Ut imperdiet eu nisi quis molestie. Cras lectus turpis, aliquam ut egestas ac, condimentum quis sem. In nec lorem dolor. Fusce non velit nec purus aliquet ultricies porttitor at metus. Donec et libero id nunc viverra dictum vel et sem. Integer tellus ligula, posuere quis dignissim sit amet, suscipit sit amet arcu. Vestibulum nec sodales magna, vitae varius justo. Ut ut felis a odio gravida malesuada eu ut lectus. Suspendisse quis nisl vel sem cursus luctus ac in nibh. Praesent at velit ac dolor convallis condimentum. Maecenas ac sagittis odio. In luctus eros sit amet accumsan maximus. Integer non dictum magna, at viverra urna. Mauris lacinia sodales nibh in scelerisque. Ut viverra ante ut nunc commodo, eu varius ipsum rutrum. Morbi dictum sodales dignissim. In eu finibus arcu. In consectetur eleifend libero. Aliquam purus felis, faucibus et rutrum non, consequat at metus. Cras ultricies metus eget rhoncus pulvinar. Quisque hendrerit at lectus fringilla aliquam. Sed viverra tellus tellus, eget fermentum mi ultrices in. Cras auctor, tortor quis eleifend aliquet, dui orci volutpat erat, quis sagittis nisl nisi at lacus. Suspendisse non condimentum orci. Quisque in elit mi. Praesent malesuada nibh a sapien fermentum vehicula. In in felis nibh. Nunc vitae turpis et est aliquet tempor vulputate volutpat neque. Vestibulum ut sapien sit amet diam sodales convallis sit amet euismod urna. In vehicula fermentum est, non porttitor risus pellentesque quis. Fusce condimentum mauris ut felis fringilla maximus. Nullam pharetra nisi nec enim sodales tincidunt. Morbi imperdiet felis eget lacus sagittis ornare. Donec euismod metus at erat luctus, non ullamcorper nunc ultricies. Sed sit amet vestibulum urna, et faucibus felis. Curabitur non mollis arcu, ut rhoncus leo. Integer sagittis iaculis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
</div>
</body>
</html>

scroll event listener + position: sticky element that changes height causes jittery infinite scroll

I have an element at the top of the screen with position:sticky; and a JS scroll eventlistener to add a stuck class when the element is stuck (scroll Y is bigger than 0).
This stuck makes an element (that has CSS transition) inside the sticky element to reduce in height.
When you scroll very slowly, this change in height makes the scrollY jump back to zero and removes the stuck class, and this creates a jolty scrolling loop which is infinite until you scroll faster and outscroll the issue.
How can I make this smooth when using position: sticky, you can see it live here:
https://jsfiddle.net/27rzba5v/

This is happening because you're changing the element's height, which is affecting the box model and thus the dimensions of your document. A simple fix would be to instead use a transform on .wrap instead of transitioning its height. It's better to animate transforms and opacity as it can be handled by the GPU rather than by making the browser repaint.
var lastScrollY = 0;
var ticking = false;
window.addEventListener('scroll', function(e) {
lastScrollY = window.scrollY;
if ( ! ticking ) {
window.requestAnimationFrame(function() {
console.log( lastScrollY );
if ( lastScrollY > 0 ) {
document.body.classList.add('stuck');
} else {
document.body.classList.remove('stuck');
}
ticking = false;
});
ticking = true;
}
} );
body {
margin: 0;
}
.wrap {
background: #666;
text-align: center;
position: sticky;
top: 0;
transition: 0.5s; /* Move transition here */
transform-origin: top left; /* Make sure transition happens from the top left */
}
.block {
width: 80px;
height: 80px;
background: red;
display: block;
}
.stuck .wrap { /* Transform wrap instead of block */
transform: scaleY(.5); /* Change scale instead of height */
}
<div class="wrap">
<span class="block"></span>
</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ac lorem a metus tincidunt eleifend id in odio. Nam malesuada hendrerit tristique. Pellentesque id ornare elit, ac lobortis metus. Sed iaculis et nisi et consectetur. Proin pellentesque metus mi, quis fringilla mauris pulvinar et. Vivamus pharetra elit ligula, eu consectetur magna consequat nec. Donec sed enim sit amet augue malesuada varius id a libero. Nullam nec ante id justo elementum congue quis in purus. Integer finibus cursus volutpat. Donec non laoreet ipsum.
Maecenas id venenatis velit, eu feugiat dolor. Vestibulum malesuada erat ut turpis mattis vehicula. Vestibulum sem leo, cursus quis lacinia eu, tincidunt eu velit. Nulla odio elit, tristique vel bibendum vitae, placerat nec eros. Proin auctor id leo sed rutrum. Proin convallis erat sit amet neque aliquam vestibulum. Ut sodales vel nisl eu imperdiet.
Donec a porttitor dui, vitae ullamcorper nibh. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam non elit eu elit blandit hendrerit id ut eros. Duis sagittis elementum ligula eu venenatis. Aenean nunc mauris, dignissim ut venenatis ac, pharetra eget magna. Curabitur elementum enim sed pharetra rhoncus. Praesent sodales at ex at consectetur. Curabitur sed dictum mi, ut eleifend arcu. Nam feugiat risus quis congue porttitor. Maecenas vehicula lorem ultrices ante sollicitudin, placerat sollicitudin dolor fermentum. Aliquam arcu turpis, faucibus vel placerat a, molestie vel lectus. Sed condimentum euismod tincidunt. Mauris odio tortor, luctus id eleifend vitae, aliquet ut libero. Vestibulum vitae placerat turpis. Duis nec facilisis eros. Morbi ipsum arcu, tempus ac massa nec, mollis aliquet lacus.
Phasellus maximus eros quis massa maximus, et mattis tellus cursus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras id lacus interdum, cursus diam ut, posuere purus. Duis non vestibulum nulla, vitae egestas elit. Phasellus venenatis libero in nunc lobortis tempor in vel orci. Praesent varius lacus eleifend, pretium lectus ut, pulvinar arcu. Nunc ornare dolor velit, id pulvinar urna semper eget. Aenean finibus dui vitae dolor ullamcorper finibus. Cras consequat viverra tellus, a accumsan sem viverra sed. Nulla felis tortor, laoreet non tincidunt elementum, tempus ac risus. Sed nibh nisl, ultrices vel iaculis in, fringilla at ipsum. Curabitur metus ligula, tincidunt non arcu eget, ultricies pellentesque ligula. Duis id est posuere, molestie urna non, gravida tortor. Praesent lacinia erat ac diam sagittis, quis faucibus nunc blandit.
Fusce aliquet tincidunt turpis, ut consequat metus consectetur at. Nunc volutpat semper enim, ut finibus orci luctus in. Mauris pharetra consectetur arcu sed pulvinar. Sed cursus fermentum velit, mattis varius ante commodo ac. Fusce erat mauris, sagittis quis eros vitae, consectetur venenatis nibh. Fusce porttitor tortor lectus, at efficitur diam dictum et. Quisque et suscipit sem. Mauris vulputate orci tellus, non efficitur eros blandit ut. Donec eget hendrerit elit.
If you must transition the element's height then you could offset the effects of the dimensions changing by using a container as a buffer.
var lastScrollY = 0;
var ticking = false;
window.addEventListener('scroll', function(e) {
lastScrollY = window.scrollY;
if ( ! ticking ) {
window.requestAnimationFrame(function() {
console.log( lastScrollY );
if ( lastScrollY > 0 ) {
document.body.classList.add('stuck');
} else {
document.body.classList.remove('stuck');
}
ticking = false;
});
ticking = true;
}
} );
body {
margin: 0;
}
.wrapoffset { /* Make this element sticky instead */
height: 80px;
position: sticky;
top: 0;
width: 100%;
}
.wrap {
background: #666;
text-align: center;
width: 100%;
}
.block {
height: 80px;
width: 80px;
background: red;
display: block;
transition: 0.5s;
}
.stuck .block {
height: 40px;
}
<div class="wrapoffset"> <!-- new element -->
<div class="wrap">
<span class="block"></span>
</div>
</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ac lorem a metus tincidunt eleifend id in odio. Nam malesuada hendrerit tristique. Pellentesque id ornare elit, ac lobortis metus. Sed iaculis et nisi et consectetur. Proin pellentesque metus mi, quis fringilla mauris pulvinar et. Vivamus pharetra elit ligula, eu consectetur magna consequat nec. Donec sed enim sit amet augue malesuada varius id a libero. Nullam nec ante id justo elementum congue quis in purus. Integer finibus cursus volutpat. Donec non laoreet ipsum.
Maecenas id venenatis velit, eu feugiat dolor. Vestibulum malesuada erat ut turpis mattis vehicula. Vestibulum sem leo, cursus quis lacinia eu, tincidunt eu velit. Nulla odio elit, tristique vel bibendum vitae, placerat nec eros. Proin auctor id leo sed rutrum. Proin convallis erat sit amet neque aliquam vestibulum. Ut sodales vel nisl eu imperdiet.
Donec a porttitor dui, vitae ullamcorper nibh. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam non elit eu elit blandit hendrerit id ut eros. Duis sagittis elementum ligula eu venenatis. Aenean nunc mauris, dignissim ut venenatis ac, pharetra eget magna. Curabitur elementum enim sed pharetra rhoncus. Praesent sodales at ex at consectetur. Curabitur sed dictum mi, ut eleifend arcu. Nam feugiat risus quis congue porttitor. Maecenas vehicula lorem ultrices ante sollicitudin, placerat sollicitudin dolor fermentum. Aliquam arcu turpis, faucibus vel placerat a, molestie vel lectus. Sed condimentum euismod tincidunt. Mauris odio tortor, luctus id eleifend vitae, aliquet ut libero. Vestibulum vitae placerat turpis. Duis nec facilisis eros. Morbi ipsum arcu, tempus ac massa nec, mollis aliquet lacus.
Phasellus maximus eros quis massa maximus, et mattis tellus cursus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras id lacus interdum, cursus diam ut, posuere purus. Duis non vestibulum nulla, vitae egestas elit. Phasellus venenatis libero in nunc lobortis tempor in vel orci. Praesent varius lacus eleifend, pretium lectus ut, pulvinar arcu. Nunc ornare dolor velit, id pulvinar urna semper eget. Aenean finibus dui vitae dolor ullamcorper finibus. Cras consequat viverra tellus, a accumsan sem viverra sed. Nulla felis tortor, laoreet non tincidunt elementum, tempus ac risus. Sed nibh nisl, ultrices vel iaculis in, fringilla at ipsum. Curabitur metus ligula, tincidunt non arcu eget, ultricies pellentesque ligula. Duis id est posuere, molestie urna non, gravida tortor. Praesent lacinia erat ac diam sagittis, quis faucibus nunc blandit.
Fusce aliquet tincidunt turpis, ut consequat metus consectetur at. Nunc volutpat semper enim, ut finibus orci luctus in. Mauris pharetra consectetur arcu sed pulvinar. Sed cursus fermentum velit, mattis varius ante commodo ac. Fusce erat mauris, sagittis quis eros vitae, consectetur venenatis nibh. Fusce porttitor tortor lectus, at efficitur diam dictum et. Quisque et suscipit sem. Mauris vulputate orci tellus, non efficitur eros blandit ut. Donec eget hendrerit elit.
If you want to optimize the performance even more you can look into using IntersectionObserver with a polyfill instead of listening for events on scroll.

Scroll one sticky div over another

I have a div that sticks once scrolled to top of the container - similar to this fiddle I found and have hacked (I appreciate the code is not great but is for the purposes of showing my issue).
I would like the next div to scroll over the previous div, and also stick once it hits the same position. At the minute, I can only get the div to continue scrolling behind, or 'jump', like what it is doing now.
I wish to achieve a scrolling set of divs that each fix at the top of the container, one after the other, on top of one another, rather than continuing to scroll beyond - this is the only option I can come up with so far.
function sticky_relocate() {
var window_top = $(window).scrollTop();
var div_top = $('#sticky-anchor').offset().top;
if (window_top > div_top) {
$('#sticky').addClass('stick');
$('#sticky-anchor').height($('#sticky').outerHeight());
} else {
$('#sticky').removeClass('stick');
$('#sticky-anchor').height(0);
}
}
$(function() {
$(window).scroll(sticky_relocate);
sticky_relocate();
});
function sticky_relocate() {
var window_top = $(window).scrollTop();
var div_top = $('#sticky-anchor').offset().top;
if (window_top > div_top) {
$('#sticky1').addClass('stick');
$('#sticky-anchor').height($('#sticky1').outerHeight());
} else {
$('#sticky1').removeClass('stick');
$('#sticky-anchor').height(0);
}
}
$(function() {
$(window).scroll(sticky_relocate);
sticky_relocate();
});
#sticky,
#sticky1 {
padding: 0.5ex;
width: 400px;
background-color: #333;
color: #fff;
font-size: 2em;
border-radius: 0.5ex;
}
#sticky.stick {
margin-top: 0 !important;
position: fixed;
top: 0;
z-index: 1;
border-radius: 0 0 0.5em 0.5em;
}
#sticky1.stick {
margin-top: 0 !important;
position: fixed;
top: 0;
z-index: 2;
border-radius: 0 0 0.5em 0.5em;
}
body {
margin: 1em;
}
p {
margin: 1em auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="sticky-anchor"></div>
<div id="sticky">This will stay at top of page</div>
<p>...</p>
<div id="sticky-anchor"></div>
<div id="sticky1">This should continue to scroll and stick on top
</div>
<p>...</p>

How about this? Should be at least a start.
https://jsfiddle.net/mqf7h5dz/
HTML:
function sticky_relocate() {
var window_top = $(window).scrollTop();
var div_top;
$('.sticky').each(function() {
//$(this).find(".scrolling").width( width * imgLength * 1.2 );
div_top = $(this).offset().top;
console.log("Top for this div: ", div_top);
if (window_top > div_top) {
$(this).removeClass('sticky');
$(this).addClass('sticked');
//$(this).height($('.sticky').outerHeight());
$(this).clone().appendTo($('#sticky_container'));
}
});
}
$(function() {
$(window).scroll(sticky_relocate);
sticky_relocate();
});
.sticky {
padding: 0.5ex;
width: 400px;
background-color: #333;
color: #fff;
font-size: 2em;
border-radius: 0.5ex;
}
.sticky-header {
padding: 0.5ex;
width: 400px;
background-color: #333;
color: #fff;
font-size: 2em;
border-radius: 0.5ex;
}
#sticky_container {
position: fixed;
top: 0;
}
.sticky.stick {
margin-top: 0 !important;
position: fixed;
top: 0;
z-index: 1;
border-radius: 0 0 0.5em 0.5em;
background: red;
}
body {
margin: 1em;
}
p {
margin: 1em auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="sticky_container"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse scelerisque, lectus in pharetra blandit, augue mauris pulvinar erat, ut euismod nibh lectus sed diam. Nulla fringilla ultrices ligula. Aliquam vitae felis metus. Maecenas lacinia bibendum
accumsan. Curabitur lobortis convallis purus non imperdiet. Morbi ut vulputate mauris. Curabitur lacinia faucibus volutpat. Nulla elit tortor, rhoncus ut luctus eget, blandit in risus. Integer accumsan ullamcorper lorem id porttitor. Aliquam vitae
</p>
<div class="sticky-anchor"></div>
<div class="sticky sticky-header">This will stay at top of page</div>
<p>Nunc eu sapien turpis. Proin non arcu orci, eget volutpat tellus. Maecenas tempor mattis risus, quis pellentesque eros imperdiet nec. Vestibulum porttitor, justo at ornare bibendum, magna lectus cursus felis, tristique consectetur arcu justo at augue.
Mauris ultrices mollis sem eget elementum. Sed ipsum orci, tempus vel porttitor vel, tristique eu erat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis aliquam pulvinar nisl, vitae congue velit ultricies
eget.
</p>
<p>Nunc eu sapien turpis. Proin non arcu orci, eget volutpat tellus. Maecenas tempor mattis risus, quis pellentesque eros imperdiet nec. Vestibulum porttitor, justo at ornare bibendum, magna lectus cursus felis, tristique consectetur arcu justo at augue.
Mauris ultrices mollis sem eget elementum. Sed ipsum orci, tempus vel porttitor vel, tristique eu erat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis aliquam pulvinar nisl, vitae congue velit ultricies
eget.
</p>
<div class="sticky-anchor"></div>
<div class="sticky sticky-header">This should continue to scroll and stick on top
</div>
<p>
Phasellus malesuada euismod lectus nec bibendum. Ut adipiscing dapibus ipsum nec iaculis. Donec quis dignissim tortor. Suspendisse molestie rhoncus enim hendrerit ultricies. Proin semper purus posuere urna porttitor suscipit.</p>
<p>Curabitur odio dui, imperdiet sed sodales nec, aliquet id nisl. Mauris nec sapien nibh. Maecenas vel sem at felis posuere rutrum non non mauris. Maecenas at lectus ut ipsum iaculis lobortis. Vivamus ut porta nisi. Phasellus tempor accumsan urna eu faucibus.
Duis sed ligula neque, pulvinar euismod velit. Donec tristique eros at dolor ornare sagittis. Vestibulum sodales imperdiet ante et tincidunt. Suspendisse malesuada tempor nisi ac accumsan. Pellentesque accumsan pulvinar odio, id adipiscing diam mollis
eu. Nulla id mi rutrum elit rutrum ultrices. Maecenas viverra, est ut pellentesque ultricies, ligula nisi auctor tellus, vitae bibendum mi nunc non libero. Mauris in facilisis enim. Proin facilisis, risus et tempus accumsan, orci enim egestas arcu,
sit amet sodales risus leo quis nisi.</p>
<p>
Phasellus malesuada euismod lectus nec bibendum. Ut adipiscing dapibus ipsum nec iaculis. Donec quis dignissim tortor. Suspendisse molestie rhoncus enim hendrerit ultricies. Proin semper purus posuere urna porttitor suscipit.</p>
<p>Curabitur odio dui, imperdiet sed sodales nec, aliquet id nisl. Mauris nec sapien nibh. Maecenas vel sem at felis posuere rutrum non non mauris. Maecenas at lectus ut ipsum iaculis lobortis. Vivamus ut porta nisi. Phasellus tempor accumsan urna eu faucibus.
Duis sed ligula neque, pulvinar euismod velit. Donec tristique eros at dolor ornare sagittis. Vestibulum sodales imperdiet ante et tincidunt. Suspendisse malesuada tempor nisi ac accumsan. Pellentesque accumsan pulvinar odio, id adipiscing diam mollis
eu. Nulla id mi rutrum elit rutrum ultrices. Maecenas viverra, est ut pellentesque ultricies, ligula nisi auctor tellus, vitae bibendum mi nunc non libero. Mauris in facilisis enim. Proin facilisis, risus et tempus accumsan, orci enim egestas arcu,
sit amet sodales risus leo quis nisi.</p>
<p>
Phasellus malesuada euismod lectus nec bibendum. Ut adipiscing dapibus ipsum nec iaculis. Donec quis dignissim tortor. Suspendisse molestie rhoncus enim hendrerit ultricies. Proin semper purus posuere urna porttitor suscipit.</p>
<p>Curabitur odio dui, imperdiet sed sodales nec, aliquet id nisl. Mauris nec sapien nibh. Maecenas vel sem at felis posuere rutrum non non mauris. Maecenas at lectus ut ipsum iaculis lobortis. Vivamus ut porta nisi. Phasellus tempor accumsan urna eu faucibus.
Duis sed ligula neque, pulvinar euismod velit. Donec tristique eros at dolor ornare sagittis. Vestibulum sodales imperdiet ante et tincidunt. Suspendisse malesuada tempor nisi ac accumsan. Pellentesque accumsan pulvinar odio, id adipiscing diam mollis
eu. Nulla id mi rutrum elit rutrum ultrices. Maecenas viverra, est ut pellentesque ultricies, ligula nisi auctor tellus, vitae bibendum mi nunc non libero. Mauris in facilisis enim. Proin facilisis, risus et tempus accumsan, orci enim egestas arcu,
sit amet sodales risus leo quis nisi.</p>

How to stick the bottom part of a div to top of the screen when scrolling down?

Imagine a div that has a height of 300 px, and at its bottom there is another div nested with a height of 100 px. I'd like to freeze (stick to top) this 100 px div, but the background properties (eg. background color) are set in its container div.
jsfiddle
body {
padding: 0;
margin: 0;
border: 0;
}
#first {
background: #121212;
width: 100%;
height: 300px;
color: #ffffff;
}
#nonsticky {
height: 200px;
}
#sticky {
background: rgba(255, 255, 255, 0.3);
height: 100px;
}
#second {
background: #cecece;
width: 100%;
}
p {
padding: 15px 30px;
margin: 0;
}
<div id="first">
<div id="nonsticky">
<p>This div should scroll away when scrolling down the page.</p>
</div>
<div id="sticky">
<p>This div should stick to top of screen when scrolling down the page. However, the "first" div should stick, as background properties are set there.</p>
</div>
</div>
<div id="second">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean accumsan pharetra nibh in lobortis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla sodales a dui accumsan accumsan. Ut vitae diam turpis. Sed eu ante non quam cursus cursus ac nec nunc. Mauris bibendum massa et turpis semper porttitor. Integer consectetur dignissim ligula quis semper. Praesent a lorem erat.</p>
<p>Donec eleifend gravida massa, sed hendrerit nibh laoreet et. Pellentesque dapibus, metus sed pretium sodales, arcu dui suscipit felis, ac dignissim quam ex bibendum mi. Sed ut ornare enim. Pellentesque condimentum pulvinar metus, egestas varius justo commodo at. Praesent sollicitudin ultrices tortor non fermentum. Vestibulum ultrices justo sit amet consequat auctor. Nullam tristique odio felis, vel dapibus tortor ornare a. Cras quis lectus iaculis, mattis ipsum dignissim, pharetra urna. Integer lobortis tellus turpis, in molestie ante condimentum sed. Maecenas bibendum augue non libero porta, sed congue lorem varius.</p>
<p>Nam justo massa, sollicitudin at purus non, viverra lacinia mi. Morbi nisi ipsum, vestibulum eget hendrerit vel, placerat vitae velit. Suspendisse a enim in massa aliquet lacinia a vel quam. In luctus, ligula fermentum mattis semper, est neque tincidunt neque, faucibus elementum lectus odio a urna. Etiam suscipit augue eu dui tempus condimentum ac sed ligula. Aliquam erat volutpat. Nulla interdum ante at nunc viverra, eget ullamcorper justo sodales. Duis venenatis lectus at felis varius, accumsan sodales diam rutrum. Integer lobortis ante nisl, vel dapibus lacus finibus semper. Pellentesque nec semper ipsum. In eu purus rhoncus, dictum arcu volutpat, mollis nisi. Phasellus metus mi, aliquet sed ultricies a, viverra sit amet turpis. Duis vestibulum vitae eros at porttitor. Pellentesque aliquam est quis massa suscipit interdum. Donec urna magna, commodo in condimentum a, rhoncus in enim. Donec mattis magna sed libero gravida, vulputate condimentum lacus pulvinar.</p>
<p>Sed mattis semper tellus in imperdiet. Suspendisse vel faucibus justo, lobortis vulputate ex. Sed malesuada porta ullamcorper. Nullam mattis metus ac nunc faucibus, id vulputate ex tincidunt. Nunc sagittis, ligula in ullamcorper dignissim, massa arcu elementum quam, rutrum mollis ante ligula sit amet massa. Suspendisse finibus commodo elit, id lacinia mauris cursus eu. Aliquam luctus nisi sit amet massa fermentum iaculis. Nulla porttitor ex id faucibus mollis. Mauris suscipit gravida ante eu ultrices. Nullam a dictum tellus. Pellentesque ac magna quam. Quisque varius ac odio eget gravida. Donec aliquam libero mi, in euismod urna condimentum nec. Integer imperdiet tortor et velit rutrum tempus.</p>
<p>Proin rutrum turpis purus, ac ullamcorper tellus tincidunt id. Quisque pretium pulvinar luctus. Fusce viverra purus id ipsum mollis accumsan non at purus. Aenean non ultrices mi. Sed ante mi, gravida tempus efficitur at, tempor in orci. Praesent molestie justo lectus, at euismod urna consectetur eget. Aliquam bibendum, nibh ut semper rhoncus, ligula magna ultrices turpis, at auctor neque tellus nec tellus. Cras dictum at lacus et ullamcorper. Nulla in molestie augue. Mauris turpis ligula, porttitor sed congue sit amet, mollis ac mauris. Aliquam rhoncus nec leo quis condimentum. Morbi tempor cursus sapien vel luctus. Sed tincidunt nibh quis quam feugiat mattis. Integer ac ante maximus, pretium augue vel, eleifend arcu. Vivamus augue nisl, pulvinar sit amet eleifend vitae, mattis rhoncus nibh. Donec sed luctus tellus, in venenatis velit.</p>
</div>
Thank you all in advance!

A possible solution, using jQuery:
$first = $('#first');
$sticky = $('#sticky');
$(window).scroll(function() {
$first.toggleClass('fixed', $(window).scrollTop() > $first.height() - $sticky.height())
.css('top', $(window).scrollTop() - $first.height() + $sticky.height());
});
The CSS:
.fixed{
position: relative;
top: 0;
left: 0;
width: 100%;
}
JS Fiddle Demo

if I understand your question the "sticky" part has a rgba background so I guess the first container has background image or simillar.
I your case I would stick the full container with negative top value to make the effect is the sticky part the one fixed positioned.
basically you use this simple jquery:
$(window).scroll(function () {
if ($(window).scrollTop() > 200) {
$("#first").addClass("fixed");
} else {
$("#first").removeClass("fixed");
}
});
and you add this class:
.fixed {position:fixed;top:-200px}
Here's your FIDDLE

Something like this?
Updated 2
JSFiddle
Bassically you need to add the following class style to your CSS:
#sticky.top {
position: fixed;
top: 0;
}
And the following jQuery.
$(window).scroll(function() {
var height = $(window).scrollTop();
if (height > 200) {
$("#sticky").addClass("top");
} else {
$("#sticky").removeClass("top");
}
});
body {
padding: 0;
margin: 0;
border: 0;
}
#first {
background: #121212;
width: 100%;
height: 300px;
color: #ffffff;
}
#nonsticky {
height: 200px;
}
#sticky {
background: rgba(255, 255, 255, 0.3);
height: 100px;
}
#sticky.top {
background:#585858;
position: fixed;
top: 0;
}
#second {
background: #cecece;
width: 100%;
}
p {
padding: 15px 30px;
margin: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="first">
<div id="nonsticky">
<p>This div should scroll away when scrolling down the page.</p>
</div>
<div id="sticky">
<p>This div should stick to top of screen when scrolling down the page. However, the "first" div should stick, as background properties are set there.</p>
</div>
</div>
<div id="second">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean accumsan pharetra nibh in lobortis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla sodales a dui accumsan accumsan. Ut vitae diam turpis.
Sed eu ante non quam cursus cursus ac nec nunc. Mauris bibendum massa et turpis semper porttitor. Integer consectetur dignissim ligula quis semper. Praesent a lorem erat.</p>
<p>Donec eleifend gravida massa, sed hendrerit nibh laoreet et. Pellentesque dapibus, metus sed pretium sodales, arcu dui suscipit felis, ac dignissim quam ex bibendum mi. Sed ut ornare enim. Pellentesque condimentum pulvinar metus, egestas varius justo
commodo at. Praesent sollicitudin ultrices tortor non fermentum. Vestibulum ultrices justo sit amet consequat auctor. Nullam tristique odio felis, vel dapibus tortor ornare a. Cras quis lectus iaculis, mattis ipsum dignissim, pharetra urna. Integer
lobortis tellus turpis, in molestie ante condimentum sed. Maecenas bibendum augue non libero porta, sed congue lorem varius.</p>
<p>Nam justo massa, sollicitudin at purus non, viverra lacinia mi. Morbi nisi ipsum, vestibulum eget hendrerit vel, placerat vitae velit. Suspendisse a enim in massa aliquet lacinia a vel quam. In luctus, ligula fermentum mattis semper, est neque tincidunt
neque, faucibus elementum lectus odio a urna. Etiam suscipit augue eu dui tempus condimentum ac sed ligula. Aliquam erat volutpat. Nulla interdum ante at nunc viverra, eget ullamcorper justo sodales. Duis venenatis lectus at felis varius, accumsan
sodales diam rutrum. Integer lobortis ante nisl, vel dapibus lacus finibus semper. Pellentesque nec semper ipsum. In eu purus rhoncus, dictum arcu volutpat, mollis nisi. Phasellus metus mi, aliquet sed ultricies a, viverra sit amet turpis. Duis vestibulum
vitae eros at porttitor. Pellentesque aliquam est quis massa suscipit interdum. Donec urna magna, commodo in condimentum a, rhoncus in enim. Donec mattis magna sed libero gravida, vulputate condimentum lacus pulvinar.</p>
<p>Sed mattis semper tellus in imperdiet. Suspendisse vel faucibus justo, lobortis vulputate ex. Sed malesuada porta ullamcorper. Nullam mattis metus ac nunc faucibus, id vulputate ex tincidunt. Nunc sagittis, ligula in ullamcorper dignissim, massa arcu
elementum quam, rutrum mollis ante ligula sit amet massa. Suspendisse finibus commodo elit, id lacinia mauris cursus eu. Aliquam luctus nisi sit amet massa fermentum iaculis. Nulla porttitor ex id faucibus mollis. Mauris suscipit gravida ante eu ultrices.
Nullam a dictum tellus. Pellentesque ac magna quam. Quisque varius ac odio eget gravida. Donec aliquam libero mi, in euismod urna condimentum nec. Integer imperdiet tortor et velit rutrum tempus.</p>
<p>Proin rutrum turpis purus, ac ullamcorper tellus tincidunt id. Quisque pretium pulvinar luctus. Fusce viverra purus id ipsum mollis accumsan non at purus. Aenean non ultrices mi. Sed ante mi, gravida tempus efficitur at, tempor in orci. Praesent molestie
justo lectus, at euismod urna consectetur eget. Aliquam bibendum, nibh ut semper rhoncus, ligula magna ultrices turpis, at auctor neque tellus nec tellus. Cras dictum at lacus et ullamcorper. Nulla in molestie augue. Mauris turpis ligula, porttitor
sed congue sit amet, mollis ac mauris. Aliquam rhoncus nec leo quis condimentum. Morbi tempor cursus sapien vel luctus. Sed tincidunt nibh quis quam feugiat mattis. Integer ac ante maximus, pretium augue vel, eleifend arcu. Vivamus augue nisl, pulvinar
sit amet eleifend vitae, mattis rhoncus nibh. Donec sed luctus tellus, in venenatis velit.</p>
</div>