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.

Show tab content on top when swiping

I have a swipable tab which is created using Slick Js. Mainly im trying to use this on phone so the users can swipe through the content...
The problem is that on each tab there are content. Lets say from the first tab, i scroll down and move to the next 2nd tab, the content starts half way from where i have scrolled down. I want to make it start from the top on each tab.
Below is what i have done so far
Codepen link https://codepen.io/livewirerules/pen/vxzPaW
HTML
<div class="sub-header ">
<div class="swipe-tabs">
<div class="swipe-tab">One</div>
<div class="swipe-tab">Two</div>
<div class="swipe-tab">Three</div>
</div>
</div>
<div class="main-container">
<div class="swipe-tabs-container ">
<div class="swipe-tab-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tempor nibh at pretium pellentesque. In sed cursus mauris. Aenean lobortis egestas imperdiet. Sed finibus odio ex, id luctus neque lobortis at. Maecenas sodales est eget tortor efficitur semper. Duis porttitor ligula tempus sapien ullamcorper pharetra. Etiam at arcu ullamcorper, finibus nibh vitae, iaculis justo. Praesent vitae sem sollicitudin, tristique turpis in, fringilla nisi. Etiam ac diam lectus. </div>
<div class="swipe-tab-content"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tempor nibh at pretium pellentesque. In sed cursus mauris. Aenean lobortis egestas imperdiet. Sed finibus odio ex, id luctus neque lobortis at. Maecenas sodales est eget tortor efficitur semper. Duis porttitor ligula tempus sapien ullamcorper pharetra. Etiam at arcu ullamcorper, finibus nibh vitae, iaculis justo. Praesent vitae sem sollicitudin, tristique turpis in, fringilla nisi. Etiam ac diam lectus.
Etiam eu lobortis arcu. Vestibulum dolor augue, commodo nec nisl ultrices, fermentum lobortis dui. Morbi quis odio ante. Phasellus eleifend justo vitae nisl imperdiet, volutpat sagittis mi tincidunt. Nunc pharetra ipsum ac mi cursus vestibulum cursus at lectus. Nulla facilisi. Maecenas et tellus et justo tempor sollicitudin. Praesent maximus lacinia justo vitae ornare.
Sed aliquet id sapien eget posuere. In urna nunc, mollis eget diam sit amet, luctus laoreet mi. In cursus lectus et quam gravida, nec vulputate risus vulputate. Duis sit amet leo pellentesque, interdum erat eu, suscipit lorem. Nulla facilisi. Sed dignissim faucibus diam, at maximus urna vulputate eu. Aliquam mi metus, suscipit a commodo vehicula, semper eu sapien. Suspendisse in nunc eget tortor iaculis semper. Sed non purus faucibus, consequat dolor vel, eleifend ante. Morbi et ex pharetra tellus auctor sagittis. Praesent sollicitudin mi ut tempus commodo. Vestibulum ornare libero eget ex porta elementum. Curabitur est felis, viverra quis nisl non, maximus tempus ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tempor nibh at pretium pellentesque. In sed cursus mauris. Aenean lobortis egestas imperdiet. Sed finibus odio ex, id luctus neque lobortis at. Maecenas sodales est eget tortor efficitur semper. Duis porttitor ligula tempus sapien ullamcorper pharetra. Etiam at arcu ullamcorper, finibus nibh vitae, iaculis justo. Praesent vitae sem sollicitudin, tristique turpis in, fringilla nisi. Etiam ac diam lectus.
Etiam eu lobortis arcu. Vestibulum dolor augue, commodo nec nisl ultrices, fermentum lobortis dui. Morbi quis odio ante. Phasellus eleifend justo vitae nisl imperdiet, volutpat sagittis mi tincidunt. Nunc pharetra ipsum ac mi cursus vestibulum cursus at lectus. Nulla facilisi. Maecenas et tellus et justo tempor sollicitudin. Praesent maximus lacinia justo vitae ornare.
Sed aliquet id sapien eget posuere. In urna nunc, mollis eget diam sit amet, luctus laoreet mi. In cursus lectus et quam gravida, nec vulputate risus vulputate. Duis sit amet leo pellentesque, interdum erat eu, suscipit lorem. Nulla facilisi. Sed dignissim faucibus diam, at maximus urna vulputate eu. Aliquam mi metus, suscipit a commodo vehicula, semper eu sapien. Suspendisse in nunc eget tortor iaculis semper. Sed non purus faucibus, consequat dolor vel, eleifend ante. Morbi et ex pharetra tellus auctor sagittis. Praesent sollicitudin mi ut tempus commodo. Vestibulum ornare libero eget ex porta elementum. Curabitur est felis, viverra quis nisl non, maximus tempus ante. </div>
<div class="swipe-tab-content"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tempor nibh at pretium pellentesque. In sed cursus mauris. Aenean lobortis egestas imperdiet. Sed finibus odio ex, id luctus neque lobortis at. Maecenas sodales est eget tortor efficitur semper. Duis porttitor ligula tempus sapien ullamcorper pharetra. Etiam at arcu ullamcorper, finibus nibh vitae, iaculis justo. Praesent vitae sem sollicitudin, tristique turpis in, fringilla nisi. Etiam ac diam lectus.
Etiam eu lobortis arcu. Vestibulum dolor augue, commodo nec nisl ultrices, fermentum lobortis dui. Morbi quis odio ante. Phasellus eleifend justo vitae nisl imperdiet, volutpat sagittis mi tincidunt. Nunc pharetra ipsum ac mi cursus vestibulum cursus at lectus. Nulla facilisi. Maecenas et tellus et justo tempor sollicitudin. Praesent maximus lacinia justo vitae ornare.
Sed aliquet id sapien eget posuere. In urna nunc, mollis eget diam sit amet, luctus laoreet mi. In cursus lectus et quam gravida, nec vulputate risus vulputate. Duis sit amet leo pellentesque, interdum erat eu, suscipit lorem. Nulla facilisi. Sed dignissim faucibus diam, at maximus urna vulputate eu. Aliquam mi metus, suscipit a commodo vehicula, semper eu sapien. Suspendisse in nunc eget tortor iaculis semper. Sed non purus faucibus, consequat dolor vel, eleifend ante. Morbi et ex pharetra tellus auctor sagittis. Praesent sollicitudin mi ut tempus commodo. Vestibulum ornare libero eget ex porta elementum. Curabitur est felis, viverra quis nisl non, maximus tempus ante. </div>
</div>
</div>
CSS
$swipe-tab-color: #757575;
$swipe-active-tab-color: #000;
.swipe-tab-content.slick-slide.slick-current.slick-active {margin-top:50px;z-index: -99999}
.sub-header {
background-color: white;
position: fixed;
width: 100% !important;
z-index: 9999999;
}
.slick-initialized {
.swipe-tab-content {
position: relative;
min-height: 365px;
#media screen and (min-width: 767px) {
min-height: 500px;
}
}
.swipe-tab {
display: flex;
align-items: center;
justify-content: center;
height: 50px;
background: none;
border: 0;
color: $swipe-tab-color;
cursor: pointer;
text-align: center;
border-bottom: 2px solid rgba($swipe-active-tab-color, 0);
transition: all 0.5s;
&:hover {
color: $swipe-active-tab-color;
}
&.active-tab {
border-bottom-color: $swipe-active-tab-color;
color: $swipe-active-tab-color;
font-weight: bold;
}
}
}
.main-container {
padding: 25px;
background: #f1f1f1;
}
JS
$(function () {
'use strict';
var $swipeTabsContainer = $('.swipe-tabs'),
$swipeTabs = $('.swipe-tab'),
$swipeTabsContentContainer = $('.swipe-tabs-container'),
currentIndex = 0,
activeTabClassName = 'active-tab';
$swipeTabsContainer.on('init', function(event, slick) {
$swipeTabsContentContainer.removeClass('invisible');
$swipeTabsContainer.removeClass('invisible');
currentIndex = slick.getCurrent();
$swipeTabs.removeClass(activeTabClassName);
$('.swipe-tab[data-slick-index=' + currentIndex + ']').addClass(activeTabClassName);
});
$swipeTabsContainer.slick({
//slidesToShow: 3.25,
slidesToShow: 3,
slidesToScroll: 1,
arrows: false,
infinite: false,
swipeToSlide: true,
touchThreshold: 10
});
$swipeTabsContentContainer.slick({
asNavFor: $swipeTabsContainer,
slidesToShow: 1,
slidesToScroll: 1,
arrows: false,
infinite: false,
swipeToSlide: true,
draggable: false,
touchThreshold: 10
});
$swipeTabs.on('click', function(event) {
// gets index of clicked tab
currentIndex = $(this).data('slick-index');
$swipeTabs.removeClass(activeTabClassName);
$('.swipe-tab[data-slick-index=' + currentIndex +']').addClass(activeTabClassName);
$swipeTabsContainer.slick('slickGoTo', currentIndex);
$swipeTabsContentContainer.slick('slickGoTo', currentIndex);
});
//initializes slick navigation tabs swipe handler
$swipeTabsContentContainer.on('swipe', function(event, slick, direction) {
currentIndex = $(this).slick('slickCurrentSlide');
$swipeTabs.removeClass(activeTabClassName);
$('.swipe-tab[data-slick-index=' + currentIndex + ']').addClass(activeTabClassName);
});
});

According to Slick documentation, this should do it:
$('.swipe-tabs').on('beforeChange', function(event, slick, direction){
$('html, body').animate({
scrollTop: 0
});
});
Another possible event would be swipe (instead of beforeChange). However, I find it a bit weird having both swipe and scrollTop events at same time, as it results in a diagonal direction. See if using afterChange makes more sense visually.
Just press Ctrl/Cmd + F on the slick page and type in methods to view all your available options.

jQuery height() returning no value

I want to make an scrollable div that scrolls down when the user hovers another div. The content inside the scrollable div will change (it's gonna be only text) so I can't set up an absolute height value for that DIV, this is why div's height is 'auto'.
I have come into a solution that works when I set up an absolut height value on '.post-right' div's CSS, but it returns no value if div's height is 'auto' just I like I need it to be.
I've tried putting jQuery block of code on the (document).ready function as well, result is exactly the same.
Any ideas? Thank's in advance.
HTML CODE:
<div class="post-right-cont">
<div class="post-right">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut aliquam libero ut nisi consectetur pretium. Donec auctor auctor mauris, in tempor mauris blandit et. Aliquam nibh felis, tincidunt a auctor vel, feugiat at enim. Duis faucibus porta mi ut fringilla. Pellentesque eleifend erat a tellus aliquam sodales. Nullam lorem tellus, accumsan quis laoreet id, luctus et urna. Curabitur eleifend tellus non orci ullamcorper adipiscing. Integer est tellus, bibendum at ultricies a, viverra at orci. Curabitur porta tincidunt nunc, at placerat ipsum malesuada et. Vivamus et est purus, id suscipit tortor. Curabitur turpis metus, dapibus et consectetur non, tincidunt in est. Vestibulum nisl libero, sodales sit amet auctor eu, congue at velit. Vivamus et erat massa, nec viverra risus. Fusce iaculis dolor vel augue ornare accumsan.<br/><br/>
Quisque a metus arcu. Suspendisse hendrerit commodo justo in sagittis. Phasellus a scelerisque quam. Fusce lacinia lacinia justo. Duis id hendrerit enim. Sed eleifend eros et turpis rutrum consectetur. Maecenas pulvinar volutpat odio, non imperdiet augue pretium quis. Proin rutrum, est vitae auctor dapibus, diam dolor rutrum libero, sed feugiat metus turpis sed mauris. Sed eleifend dolor arcu. Cras laoreet nibh convallis magna congue sit amet consequat tortor porttitor. Duis et mauris non lorem consectetur luctus. Aliquam mollis sem sit amet tortor iaculis egestas. Duis tincidunt pellentesque leo, nec vulputate turpis dapibus sit amet. Aliquam rhoncus luctus orci, et aliquet eros porttitor in. Etiam arcu eros, viverra tristique tincidunt vel, facilisis et mauris.<br/><br/>
Morbi congue auctor luctus. Sed nisl dui, varius id ornare et, tincidunt sit amet enim. Aliquam egestas ultricies nisl, id condimentum erat fermentum quis. Morbi lectus nunc, aliquam volutpat egestas quis, iaculis a nulla. Pellentesque fermentum mauris at libero pulvinar viverra. Aliquam a ante orci, a luctus purus. Vivamus ut est ut mauris pulvinar mattis ac et magna. Aenean congue dictum lectus at suscipit. Suspendisse interdum, erat pulvinar gravida vulputate, mi mauris feugiat justo, at euismod augue sapien eu sapien. Praesent at quam purus. In hac habitasse platea dictumst. Fusce vel tellus a massa tempor volutpat a at magna. In eu enim odio. Quisque bibendum tortor est. Phasellus a scelerisque quam. Fusce lacinia lacinia justo. Duis id hendrerit enim. Sed eleifend eros et turpis rutrum consectetur. Maecenas pulvinar volutpat odio, non imperdiet augue pretium quis. Proin rutrum, est vitae auctor dapibus, diam dolor rutrum libero, sed feugiat metus turpis sed mauris. Sed eleifend dolor arcu.
</div>
<div class="scroll-down"></div>
<div class="scroll-up"></div>
</div>
CSS:
.post-right-cont {
width: 540px;
height: auto;
overflow: hidden;
position: relative;
}
.post-right {
position: absolute;
top: 0;
left: 20px;
height: auto;
width: 480px;
padding-top: 40px;
}
jQuery:
$(window).load(function() {
// SCROLL POST
// EDIT - post-right-cont height was set up before. I just past it here now.
var wHeight = $(window).height();
$('.post-right-cont').css('height', wHeight - 36);
if ($('div.post-right').height() > $('.post-right-cont').height()) {
$('div.scroll-down').hover(function() {animateContent('down');}, function() {
$('div.post-right').stop();
});
$('div.scroll-up').hover(function() {animateContent('up');}, function() {
$('div.post-right').stop();
});
}
function animateContent(direction) {
var containerHeight = $('.post-right-cont').height();
var textHeight = $('div.post-right').height();
var animationOffset = textHeight - containerHeight;
if (direction == "up") {
animationOffset = 0;
}
$('div.post-right').animate({"top" : -animationOffset + "px" }, 8500);
}
});

$('.post-right-cont').height() will return a value 0 because you have wrapped just one item inside, which have absolute positioning, so the absolute positioned element will not increase the size of .post-right-cont. So jQuery returns the correct value - 0. The height of .post-right will not increase the height of .post-right-cont because absolute positioned elements do not increase the height or width of their wrapping tag.