Related
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
I'm building the following component using JS / SCSS but I can't achieve one thing, and I googled it but got no results. As you can see in the picture below the images are being delayed on scroll, they start to animate only after the text on right scrolled a bit, there is a delay of 300ms.
Is there a way to delay the scroll behaviour or change the scroll speed of elements in JS?
You could use an absolute or relative placed div with a transition on the top property and a transition delay.
The top could be set dynamically in your onscroll handler, with use of scrollTop.
Check the snippet below or check out this pen for a better example.
$("#container").scroll(function(){
var scrollTop = $(this).scrollTop();
$("#box").css({"top":(scrollTop+50)+"px"});
$("#box2").css({"top":(scrollTop+70)+"px"});
});
#container {
height: 200px;
width: 200px;
overflow: scroll;
}
#box {
position: relative;
top: 50px;
left: 0;
height: 40px;
width: 40px;
background-color: red;
transition: top .2s;
}
#box2 {
position: relative;
top: 70px;
left: 0;
height: 40px;
width: 40px;
background-color: green;
transition: top .2s;
transition-delay: .05s;
}
#content {
position: relative;
top: 0;
left: 50px;
width: 150px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
<div id="box"></div>
<div id="box2"></div>
<div id="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut malesuada leo eget nisl euismod vestibulum. Proin nulla urna, ornare non erat vitae, mattis ultrices urna. Etiam elementum, tortor id lacinia mollis, risus odio accumsan ex, eu egestas nisi lacus at purus. Cras vitae orci condimentum, dictum ante nec, laoreet nunc. Cras ut tristique libero. Pellentesque tempus feugiat elit non imperdiet. Cras ac gravida enim, nec pharetra sem. Maecenas luctus leo id quam sodales, sit amet scelerisque sapien efficitur. Pellentesque aliquet fermentum molestie. Praesent a lacinia tellus. Vivamus ut rutrum ex. Pellentesque dapibus magna a mauris facilisis tincidunt. Phasellus vulputate eros ac ultrices lacinia. Mauris sed eleifend enim. Sed eu ultrices nisi.
Sed eget porttitor purus. Praesent quis commodo dolor. Morbi vitae egestas magna. Quisque eu pellentesque velit. Cras eu arcu in tortor bibendum laoreet. Quisque sed turpis risus. Vestibulum efficitur urna malesuada diam dictum, at viverra leo finibus. Duis dignissim justo sem, et euismod nisi aliquam at. Fusce pretium lacus a pretium pulvinar. Aliquam ligula nisl, sodales vel aliquet at, malesuada ac nulla. Nam lorem leo, fermentum nec volutpat id, tincidunt ac diam. Phasellus at congue ligula. Aliquam nibh mi, tempor eu auctor id, sollicitudin eu ante. Donec quis nunc molestie, pretium turpis quis, venenatis arcu.
Quisque quis auctor odio. Maecenas ullamcorper ultricies elementum. Nam sed accumsan turpis. Suspendisse viverra at augue vel lacinia. Nulla eu magna in nisl dapibus sollicitudin ut in sem. Fusce et orci nibh. Suspendisse blandit, erat non pretium condimentum, felis justo hendrerit nisi, quis lacinia eros orci a nibh. Aenean nisl mi, convallis sed convallis vitae, posuere non nunc. Quisque condimentum lorem ut urna tristique hendrerit. Cras suscipit placerat consectetur. Nullam ut iaculis lectus. Suspendisse ultrices sem urna, sit amet efficitur mi eleifend rutrum. Curabitur magna nisi, mollis quis lorem maximus, luctus pretium elit. Nunc commodo tortor sed justo condimentum ultrices. Nullam at ante sit amet leo ullamcorper fringilla. Duis ac purus at mauris fermentum pulvinar.
Nulla facilisi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur turpis sapien, semper id nisi at, volutpat aliquam nisi. Quisque nec porttitor odio. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Phasellus suscipit ullamcorper lacus. Mauris lobortis luctus dignissim. Suspendisse non pharetra tortor, ut convallis nibh. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce malesuada, turpis nec ultrices tempor, lorem ex fringilla nunc, et efficitur lacus nisl quis nunc. Ut vestibulum elit est, id volutpat libero porttitor in. Mauris sed ante commodo, tristique quam in, molestie mauris. Duis eget porta magna, vitae fermentum ligula. Donec a dapibus nibh, in placerat metus. Donec vulputate metus vitae sapien facilisis pharetra. Nullam dui justo, maximus vel volutpat a, sodales id ligula.
Integer finibus lacus leo, eu semper tellus maximus lobortis. Nulla facilisi. Etiam lobortis interdum quam, non venenatis ligula luctus non. In laoreet, tellus at hendrerit tempus, dolor ex egestas est, in hendrerit libero nulla sit amet est. Vestibulum sem lorem, aliquam in lacus in, rutrum vulputate turpis. Morbi placerat tortor vel scelerisque auctor. Nunc in velit laoreet, egestas ante vitae, faucibus enim. Nam iaculis eros eu efficitur pharetra. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec sagittis porttitor feugiat. In nibh diam, imperdiet non dapibus sed, dapibus vitae urna. Mauris blandit tincidunt neque non gravida. Curabitur vel lectus nec lectus ullamcorper pretium at dapibus felis. Nulla fermentum, dui et sagittis facilisis, ante mi dignissim quam, non auctor nisl ante vitae mi. In vestibulum, ante vitae tempus ultrices, enim risus tristique nisi, eu aliquet augue nulla eu magna. Fusce volutpat augue sit amet felis blandit aliquam.
</div>
</div>
Once I scroll down the nav becomes fixed which is great but then the content jumps behind it. The height of the nav will be changing as the browser window gets smaller on the actual site I'm building, so I can't really use a fixed height margin on the content to push it down. As the margin it will needed will vary depending on the browser window size. Is there any way to solve this using jQuery?
heres a live demo http://codepen.io/Reece_Dev/pen/VpXVMq Thanks
html:
<script src="https://use.fontawesome.com/7c396dc5cb.js"></script>
<header>Logo</header>
<nav>
<div class="burger-button">
<i class="fa fa-bars fa-2x" aria-hidden="true"></i>
</div>
<ul>
<li>Welcome</li>
<li>Menu</li>
<li>Opening Times</li>
</ul>
</nav>
<section>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis purus libero, fringilla non tristique at, vestibulum id magna. Ut quis porttitor ligula. Duis metus dolor, dictum vehicula ultrices vel, tristique sed dui. Nunc scelerisque diam erat, in lobortis elit convallis nec. Nam varius neque nibh, eu ultrices elit mattis id. Cras tellus libero, ornare ut lectus vel, vestibulum ultrices odio. Sed a efficitur ipsum, non pellentesque orci. Nam et quam ac odio lacinia elementum.
Quisque accumsan tempus efficitur. In sit amet ornare libero. Nunc id vehicula sapien. Nullam venenatis sapien id tortor tristique mollis. Pellentesque malesuada congue luctus. Phasellus venenatis bibendum sapien vitae ornare. Nunc ac varius ligula. Praesent dapibus justo sed nisi tristique, ac tincidunt turpis laoreet. Nulla facilisi.
Sed vehicula sapien justo, nec accumsan est vulputate nec. Vivamus dapibus eget risus ut sollicitudin. Fusce fermentum varius est, non condimentum sem interdum eget. Aenean nec mi augue. Praesent nisl ante, tincidunt in neque eu, pulvinar scelerisque dolor. Fusce elementum rhoncus dui, ut molestie purus posuere sed. Proin scelerisque purus id euismod tempus. Duis scelerisque magna ex, quis congue erat efficitur non. Nam condimentum, risus in lacinia tristique, erat est cursus lacus, porttitor scelerisque nulla ipsum a dolor. Aliquam erat volutpat. Suspendisse ut elit mauris. Quisque diam enim, scelerisque at vulputate a, pellentesque nec velit. Quisque enim nunc, suscipit dignissim dignissim ut, interdum id tellus. Nullam viverra metus nec ex condimentum, tincidunt venenatis arcu sollicitudin.
Nulla ut ullamcorper mauris, vel vehicula metus. Nam scelerisque mollis enim, nec pulvinar diam pulvinar at. Praesent sapien erat, suscipit ac erat et, suscipit efficitur nulla. Cras tempor sed lacus a cursus. Mauris interdum magna id leo pretium venenatis. Vestibulum luctus vel nulla a faucibus. Proin eu metus urna. Suspendisse eget pretium felis. Sed et justo ut nisi bibendum laoreet. Cras sed magna in neque egestas egestas. In blandit pretium libero, a lacinia diam finibus non. Ut at efficitur massa. Ut a iaculis est, sed tristique risus. Donec bibendum urna nec eros condimentum porta. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Ut faucibus sem in velit volutpat dapibus. Nulla laoreet purus vitae suscipit ullamcorper. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed ut arcu orci. Aenean sodales eu ex a posuere. Proin vitae ante sit amet mauris laoreet consectetur non ut elit. Vivamus dapibus vestibulum diam eget condimentum. Donec interdum risus id nibh posuere aliquet. Fusce sed ante et ex congue ultrices vel ac lacus. Suspendisse venenatis eget mi quis dapibus. Aenean id metus at justo accumsan tincidunt. Ut sollicitudin turpis eget mollis pretium. Suspendisse semper libero sit amet consectetur malesuada. Ut dolor justo, suscipit egestas nisi quis, scelerisque cursus leo. Integer sed turpis bibendum, dignissim quam et, vestibulum mauris.
Cras faucibus maximus mi nec sagittis. Ut ac augue in dolor hendrerit euismod posuere vitae leo. Nam ut ipsum mollis, placerat neque id, venenatis ipsum. Donec ut dignissim ligula. Vestibulum sapien purus, ultricies sed ante tristique, consectetur finibus sem. Donec dictum, ex efficitur lobortis elementum, est nisl imperdiet massa, luctus dignissim neque lacus vel nisi. Cras sollicitudin quis velit quis commodo. In pulvinar molestie leo, at maximus lacus. Etiam venenatis, ex a venenatis vestibulum, tortor urna pulvinar sem, malesuada porttitor orci tellus a nunc. Sed non feugiat elit. In ac venenatis magna. Nunc erat sem, dapibus in sem at, interdum pharetra nisi.
Vivamus quis fringilla lorem, vitae interdum risus. Cras id maximus lorem. Fusce venenatis est massa, quis feugiat nisi sagittis nec. Phasellus sed velit enim. Donec ac lectus ac libero condimentum molestie. Curabitur fermentum porttitor efficitur. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin blandit magna quis ligula euismod viverra.
Aenean libero felis, varius quis sapien nec, blandit congue ligula. Curabitur risus diam, semper ac libero in, feugiat pellentesque dui. Nunc blandit lectus id justo dapibus, vel luctus arcu cursus. Integer urna felis, mollis ac auctor ut, tempor ut lorem. Nulla tincidunt sem efficitur facilisis consequat. Duis faucibus non libero nec dignissim. Etiam molestie est nec sapien cursus, quis rutrum nulla semper. Vestibulum tortor turpis, vestibulum ac dictum vel, sollicitudin vitae metus.
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur vitae aliquet eros, ut tincidunt lacus. Pellentesque orci leo, ornare vitae felis quis, feugiat vestibulum mi. Nam semper pharetra tempus. Vivamus vel mauris tincidunt lorem varius gravida sed eu metus. Suspendisse aliquet libero nec urna bibendum ultrices. Aenean et ligula sapien. Maecenas sit amet imperdiet neque. Donec maximus semper velit, at aliquam quam tempor sed. Proin tincidunt nisi tortor, nec vulputate nulla ullamcorper vitae. Donec sodales enim eget massa consequat aliquet. Nam erat metus, molestie eget tincidunt in, consequat eu nulla. In ut tellus ut quam facilisis dapibus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis purus libero, fringilla non tristique at, vestibulum id magna. Ut quis porttitor ligula. Duis metus dolor, dictum vehicula ultrices vel, tristique sed dui. Nunc scelerisque diam erat, in lobortis elit convallis nec. Nam varius neque nibh, eu ultrices elit mattis id. Cras tellus libero, ornare ut lectus vel, vestibulum ultrices odio. Sed a efficitur ipsum, non pellentesque orci. Nam et quam ac odio lacinia elementum.
Quisque accumsan tempus efficitur. In sit amet ornare libero. Nunc id vehicula sapien. Nullam venenatis sapien id tortor tristique mollis. Pellentesque malesuada congue luctus. Phasellus venenatis bibendum sapien vitae ornare. Nunc ac varius ligula. Praesent dapibus justo sed nisi tristique, ac tincidunt turpis laoreet. Nulla facilisi.
Sed vehicula sapien justo, nec accumsan est vulputate nec. Vivamus dapibus eget risus ut sollicitudin. Fusce fermentum varius est, non condimentum sem interdum eget. Aenean nec mi augue. Praesent nisl ante, tincidunt in neque eu, pulvinar scelerisque dolor. Fusce elementum rhoncus dui, ut molestie purus posuere sed. Proin scelerisque purus id euismod tempus. Duis scelerisque magna ex, quis congue erat efficitur non. Nam condimentum, risus in lacinia tristique, erat est cursus lacus, porttitor scelerisque nulla ipsum a dolor. Aliquam erat volutpat. Suspendisse ut elit mauris. Quisque diam enim, scelerisque at vulputate a, pellentesque nec velit. Quisque enim nunc, suscipit dignissim dignissim ut, interdum id tellus. Nullam viverra metus nec ex condimentum, tincidunt venenatis arcu sollicitudin.
Nulla ut ullamcorper mauris, vel vehicula metus. Nam scelerisque mollis enim, nec pulvinar diam pulvinar at. Praesent sapien erat, suscipit ac erat et, suscipit efficitur nulla. Cras tempor sed lacus a cursus. Mauris interdum magna id leo pretium venenatis. Vestibulum luctus vel nulla a faucibus. Proin eu metus urna. Suspendisse eget pretium felis. Sed et justo ut nisi bibendum laoreet. Cras sed magna in neque egestas egestas. In blandit pretium libero, a lacinia diam finibus non. Ut at efficitur massa. Ut a iaculis est, sed tristique risus. Donec bibendum urna nec eros condimentum porta. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Ut faucibus sem in velit volutpat dapibus. Nulla laoreet purus vitae suscipit ullamcorper. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed ut arcu orci. Aenean sodales eu ex a posuere. Proin vitae ante sit amet mauris laoreet consectetur non ut elit. Vivamus dapibus vestibulum diam eget condimentum. Donec interdum risus id nibh posuere aliquet. Fusce sed ante et ex congue ultrices vel ac lacus. Suspendisse venenatis eget mi quis dapibus. Aenean id metus at justo accumsan tincidunt. Ut sollicitudin turpis eget mollis pretium. Suspendisse semper libero sit amet consectetur malesuada. Ut dolor justo, suscipit egestas nisi quis, scelerisque cursus leo. Integer sed turpis bibendum, dignissim quam et, vestibulum mauris.
Cras faucibus maximus mi nec sagittis. Ut ac augue in dolor hendrerit euismod posuere vitae leo. Nam ut ipsum mollis, placerat neque id, venenatis ipsum. Donec ut dignissim ligula. Vestibulum sapien purus, ultricies sed ante tristique, consectetur finibus sem. Donec dictum, ex efficitur lobortis elementum, est nisl imperdiet massa, luctus dignissim neque lacus vel nisi. Cras sollicitudin quis velit quis commodo. In pulvinar molestie leo, at maximus lacus. Etiam venenatis, ex a venenatis vestibulum, tortor urna pulvinar sem, malesuada porttitor orci tellus a nunc. Sed non feugiat elit. In ac venenatis magna. Nunc erat sem, dapibus in sem at, interdum pharetra nisi.
Vivamus quis fringilla lorem, vitae interdum risus. Cras id maximus lorem. Fusce venenatis est massa, quis feugiat nisi sagittis nec. Phasellus sed velit enim. Donec ac lectus ac libero condimentum molestie. Curabitur fermentum porttitor efficitur. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin blandit magna quis ligula euismod viverra.
Aenean libero felis, varius quis sapien nec, blandit congue ligula. Curabitur risus diam, semper ac libero in, feugiat pellentesque dui. Nunc blandit lectus id justo dapibus, vel luctus arcu cursus. Integer urna felis, mollis ac auctor ut, tempor ut lorem. Nulla tincidunt sem efficitur facilisis consequat. Duis faucibus non libero nec dignissim. Etiam molestie est nec sapien cursus, quis rutrum nulla semper. Vestibulum tortor turpis, vestibulum ac dictum vel, sollicitudin vitae metus.
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur vitae aliquet eros, ut tincidunt lacus. Pellentesque orci leo, ornare vitae felis quis, feugiat vestibulum mi. Nam semper pharetra tempus. Vivamus vel mauris tincidunt lorem varius gravida sed eu metus. Suspendisse aliquet libero nec urna bibendum ultrices. Aenean et ligula sapien. Maecenas sit amet imperdiet neque. Donec maximus semper velit, at aliquam quam tempor sed. Proin tincidunt nisi tortor, nec vulputate nulla ullamcorper vitae. Donec sodales enim eget massa consequat aliquet. Nam erat metus, molestie eget tincidunt in, consequat eu nulla. In ut tellus ut quam facilisis dapibus.
</section>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
CSS:
*{
margin: 0;
padding: 0;
}
header{
width: 1200px;
margin: 0 auto;
background-color: #0000aa;
font-size: 5em;
text-align: center;
}
nav{
width: 1200px;
margin: 0 auto;
background-color: #0000ff;
}
nav ul{
overflow: hidden;
color: #fff;
text-align: center;
-webkit-transition: max-height 0.4s;
-ms-transition: max-height 0.4s;
-moz-transition: max-height 0.4s;
-o-transition: max-height 0.4s;
transition: max-height 0.4s;
}
nav ul li{
display: inline-block;
padding: 1em 2em;
}
nav ul li a{
color: inherit;
text-decoration: none;
font-size: 1.5em;
}
section{
width: 1200px;
margin: 0 auto;
line-height: 1.5em;
font-size: 1em;
text-align: center;
padding-top: 2em;
background-color: #4488ff;
}
.burger-button{
width: 100%;
background-color: white;
text-align: right;
box-sizing: border-box;
padding: 1em;
cursor: pointer;
display: none;
}
.fixed{
position: fixed;
top: 0;
left: 0;
right: 0;
}
#media screen and (max-width:1200px){
header{
width: 100%;
}
nav{
width: 100%;
}
section{
width: 100%;
}
}
#media screen and (max-width: 480px){
nav ul{
max-height: 0;
}
.showing{
max-height: 13em;
}
nav ul li{
box-sizing: border-box;
width: 100%;
}
.burger-button{
display: inline-block;
}
}
jQuery:
$(".burger-button").on("click", function(){
$("nav ul").toggleClass("showing");
});
jQuery(document).ready(function() {
var navOffset = jQuery('nav').offset().top;
jQuery(window).scroll(function(){
var scrollPos = jQuery(window).scrollTop();
if (scrollPos >= navOffset){
jQuery("nav").addClass("fixed");
} else{
jQuery("nav").removeClass("fixed");
}
});
});
You need to account for the height of the nav because it's being taken out the flow of content when position: fixed; is set.
jQuery
$(".burger-button").on("click", function(){
$("nav ul").toggleClass("showing");
});
jQuery(document).ready(function() {
var navOffset = jQuery('nav').offset().top;
jQuery(window).scroll(function(){
var scrollPos = jQuery(window).scrollTop();
var navHeight = jQuery("nav").height();
if (scrollPos >= navOffset){
jQuery("nav").addClass("fixed");
jQuery("section").css("margin-top", navHeight);
} else {
jQuery("nav").removeClass("fixed");
jQuery("section").css("margin-top", "0");
}
});
jQuery(window).resize(function(){
var scrollPos = jQuery(window).scrollTop();
var navHeight = jQuery("nav").height();
if (scrollPos >= navOffset){
jQuery("section").css("margin-top", navHeight);
} else {
jQuery("section").css("margin-top", "0");
}
});
});
What this does is adds a margin to offset the height of the nav that is pushing the content down when it's not fixed. That should do it for you.
Edit
I've updated the code so it now just uses jQuery instead which on resize will recalculate the height of the nav and adjust the margin on the section element.
If you mean the scrollbar could cover the fixed element, then you'd better choose to layout with flexbox.
Fixed element must be covered by scrollbar
I tested the below code on your codepen demo:
jQuery(document).ready(function() {
var navOffset = jQuery('nav').offset().top;
jQuery(window).scroll(function(){
var scrollPos = jQuery(window).scrollTop();
if (scrollPos >= navOffset){
jQuery("nav").addClass("fixed");
var navHeight = jQuery("nav").height();
jQuery("section").css({"margin-top" : navHeight});
} else{
jQuery("nav").removeClass("fixed");
jQuery("section").css({"margin-top" : 0});
}
});
});
It works on your demo. I hope it solves the issue.
I've always used jQuery for animations but this time I can't use it, so I need some help with vanilla javascript where I suck.
Description:
I have a div with limited height and vertical scrollbar.
On the top and on the bottom I have buttons for scrolling content up/down inside this div. Buttons have fixed top/bottom position.
So, if I click top button, I want content inside this div to slide down.
And when clicking on bottom buttom, I want content to slide up.
Perfect scenario would be if I hold mouse button (or finger on touch devices) on button, scrolling should continue. If I only click once/tap, I would like to have an option to set amount of scrolling (in px, maybe as a parameter in a function).
This is my HTML:
<div id="header">
<input class="uk-button uk-button-primary" id="down" type="button" value="Scroll down">
</div>
<div id="content">
<div id="inner">
<p>Here comes a very long text</p>
</div>
</div>
<div id="footer">
<input class="uk-button uk-button-primary" id="up" type="button" value="Scroll up">
</div>
I've created an example (without javascript): https://jsfiddle.net/esedic/L0u4a2d0/
check this fiddle: https://jsfiddle.net/9257p50r/2/
var scrollDown,scrollUp;
var contentEle = document.getElementById('content');
var downBtn = document.getElementById('down');
var upBtn = document.getElementById('up');
downBtn.addEventListener("mousedown", function(){
scrollDown = setInterval(function(){
contentEle.scrollTop += 20;
},100)
});
upBtn.addEventListener("mousedown", function(){
scrollUp = setInterval(function(){
contentEle.scrollTop -= 20;
},100)
});
downBtn.addEventListener("mouseup", function(){
clearInterval(scrollDown);
});
upBtn.addEventListener("mouseup", function(){
clearInterval(scrollUp);
});
/* mobile touch */
downBtn.addEventListener("touchstart", function(){
scrollDown = setInterval(function(){
contentEle.scrollTop += 20;
},100)
}, false);
downBtn.addEventListener("touchend", function(){
clearInterval(scrollDown);
}, false);
upBtn.addEventListener("touchstart", function(){
scrollUp = setInterval(function(){
contentEle.scrollTop -= 20;
},100)
}, false);
upBtn.addEventListener("touchend", function(){
clearInterval(scrollUp);
}, false);
body {
padding: 1em;
margin-top: 2.5em;
}
#header {
position: fixed;
top: 1em;
left: 1em;
}
#footer {
position: fixed;
bottom: 1em;
left: 1em;
}
#content {
max-height: 570px;
overflow: hidden;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}
<div id="header">
<input class="uk-button uk-button-primary" id="down" type="button" value="Scroll down">
</div>
<div id="content">
<div id="inner">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam id nunc a diam laoreet porttitor quis id tellus. Nulla facilisi. Nam molestie sapien ac eros sollicitudin volutpat. Duis id malesuada velit. Donec tristique orci quis ante viverra fermentum. In hac habitasse platea dictumst. Donec ut hendrerit enim. In semper enim enim, et dignissim sapien placerat eu. Mauris ac sapien a enim euismod tincidunt in non justo. Vivamus tincidunt placerat mauris, sit amet scelerisque nisl varius nec. Sed commodo pharetra dolor a feugiat. Pellentesque enim risus, condimentum nec nisi a, vehicula feugiat elit. Phasellus vulputate diam eu sagittis suscipit. Curabitur tempor posuere nibh non congue.</p>
<p>Praesent eget tortor dapibus, scelerisque nisl ut, lobortis neque. Ut vel ex id nibh pretium commodo sed id odio. Mauris vulputate justo id facilisis ornare. Nullam efficitur orci leo. Donec laoreet vehicula justo, sed sollicitudin dolor. Quisque at mattis enim. Quisque at eleifend lorem. Curabitur non ex id mi eleifend sagittis vel quis mauris. Nulla mattis tellus arcu, vitae gravida neque condimentum a. Nulla faucibus pulvinar risus in consectetur. Nunc tristique tincidunt velit, a gravida erat egestas nec. Mauris interdum ultrices risus vel hendrerit. Fusce sed odio erat. Proin ac ornare purus. Donec laoreet luctus maximus.</p>
<p>Sed id erat ut leo auctor molestie id a lectus. Fusce orci nibh, euismod at risus vitae, laoreet rhoncus purus. Ut hendrerit mollis tempor. Quisque ullamcorper in est dignissim accumsan. Fusce maximus purus porta lorem aliquet pretium. Mauris nec egestas nisl. Proin venenatis sem et arcu imperdiet, at interdum mauris varius. Vestibulum metus justo, euismod ac ipsum quis, blandit venenatis lectus. Sed non vehicula ligula.</p>
<p>Nunc in lorem egestas, gravida neque a, iaculis massa. Vestibulum porttitor sed nibh eget auctor. Aliquam dictum posuere diam, et elementum justo consequat sed. Morbi eu suscipit quam. Phasellus fringilla non mi ac volutpat. Proin in massa tellus. Curabitur rhoncus ultrices est, vitae mollis purus commodo vitae. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc sagittis felis risus, in dictum nibh tincidunt quis. Curabitur in neque blandit, consequat quam et, pellentesque orci. Vivamus risus sem, finibus convallis diam vel, ornare blandit lacus. Vestibulum molestie purus quis rutrum egestas.</p>
<p>Sed non mi sed odio dictum feugiat id ac dui. Sed magna justo, molestie vel sapien sed, finibus finibus tortor. Maecenas dapibus nisi justo, id sollicitudin ipsum suscipit aliquam. Pellentesque bibendum dui urna, fermentum sodales urna placerat fringilla. Curabitur et suscipit ligula. Nunc feugiat tortor vel rhoncus rutrum. Integer vitae ex vitae est porttitor semper tincidunt at turpis. Nullam bibendum accumsan maximus. Donec tincidunt sit amet sem non sollicitudin. Sed accumsan, ex vitae consectetur tempor, elit mi scelerisque sem, eu iaculis nunc purus ac diam. Maecenas tempor quam lectus, vitae rutrum velit ultricies eu. Integer maximus turpis a pulvinar maximus. Donec ultrices nulla et malesuada commodo.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam id nunc a diam laoreet porttitor quis id tellus. Nulla facilisi. Nam molestie sapien ac eros sollicitudin volutpat. Duis id malesuada velit. Donec tristique orci quis ante viverra fermentum. In hac habitasse platea dictumst. Donec ut hendrerit enim. In semper enim enim, et dignissim sapien placerat eu. Mauris ac sapien a enim euismod tincidunt in non justo. Vivamus tincidunt placerat mauris, sit amet scelerisque nisl varius nec. Sed commodo pharetra dolor a feugiat. Pellentesque enim risus, condimentum nec nisi a, vehicula feugiat elit. Phasellus vulputate diam eu sagittis suscipit. Curabitur tempor posuere nibh non congue.</p>
<p>Praesent eget tortor dapibus, scelerisque nisl ut, lobortis neque. Ut vel ex id nibh pretium commodo sed id odio. Mauris vulputate justo id facilisis ornare. Nullam efficitur orci leo. Donec laoreet vehicula justo, sed sollicitudin dolor. Quisque at mattis enim. Quisque at eleifend lorem. Curabitur non ex id mi eleifend sagittis vel quis mauris. Nulla mattis tellus arcu, vitae gravida neque condimentum a. Nulla faucibus pulvinar risus in consectetur. Nunc tristique tincidunt velit, a gravida erat egestas nec. Mauris interdum ultrices risus vel hendrerit. Fusce sed odio erat. Proin ac ornare purus. Donec laoreet luctus maximus.</p>
<p>Sed id erat ut leo auctor molestie id a lectus. Fusce orci nibh, euismod at risus vitae, laoreet rhoncus purus. Ut hendrerit mollis tempor. Quisque ullamcorper in est dignissim accumsan. Fusce maximus purus porta lorem aliquet pretium. Mauris nec egestas nisl. Proin venenatis sem et arcu imperdiet, at interdum mauris varius. Vestibulum metus justo, euismod ac ipsum quis, blandit venenatis lectus. Sed non vehicula ligula.</p>
<p>Nunc in lorem egestas, gravida neque a, iaculis massa. Vestibulum porttitor sed nibh eget auctor. Aliquam dictum posuere diam, et elementum justo consequat sed. Morbi eu suscipit quam. Phasellus fringilla non mi ac volutpat. Proin in massa tellus. Curabitur rhoncus ultrices est, vitae mollis purus commodo vitae. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc sagittis felis risus, in dictum nibh tincidunt quis. Curabitur in neque blandit, consequat quam et, pellentesque orci. Vivamus risus sem, finibus convallis diam vel, ornare blandit lacus. Vestibulum molestie purus quis rutrum egestas.</p>
<p>Sed non mi sed odio dictum feugiat id ac dui. Sed magna justo, molestie vel sapien sed, finibus finibus tortor. Maecenas dapibus nisi justo, id sollicitudin ipsum suscipit aliquam. Pellentesque bibendum dui urna, fermentum sodales urna placerat fringilla. Curabitur et suscipit ligula. Nunc feugiat tortor vel rhoncus rutrum. Integer vitae ex vitae est porttitor semper tincidunt at turpis. Nullam bibendum accumsan maximus. Donec tincidunt sit amet sem non sollicitudin. Sed accumsan, ex vitae consectetur tempor, elit mi scelerisque sem, eu iaculis nunc purus ac diam. Maecenas tempor quam lectus, vitae rutrum velit ultricies eu. Integer maximus turpis a pulvinar maximus. Donec ultrices nulla et malesuada commodo.</p>
</div>
</div>
<div id="footer">
<input class="uk-button uk-button-primary" id="up" type="button" value="Scroll up">
</div>
Use addEventListener
var down = document.querySelector("#down"),
up = document.querySelector("#up"),
content = document.querySelector("#content");
function scrollDown(){content.scrollTop = content.scrollHeight}
function scrollUp(){content.scrollTop = 0}
down.addEventListener("click",scrollDown,false);
up.addEventListener("click",scrollUp,false);
body {
padding: 1em;
margin-top: 2.5em;
}
#header {
position: fixed;
top: 1em;
left: 1em;
}
#footer {
position: fixed;
bottom: 1em;
left: 1em;
}
#content {
max-height: 570px;
overflow: hidden;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}
#inner {
}
<div id="header">
<input class="uk-button uk-button-primary" id="down" type="button" value="Scroll down">
</div>
<div id="content">
<div id="inner">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam id nunc a diam laoreet porttitor quis id tellus. Nulla facilisi. Nam molestie sapien ac eros sollicitudin volutpat. Duis id malesuada velit. Donec tristique orci quis ante viverra fermentum. In hac habitasse platea dictumst. Donec ut hendrerit enim. In semper enim enim, et dignissim sapien placerat eu. Mauris ac sapien a enim euismod tincidunt in non justo. Vivamus tincidunt placerat mauris, sit amet scelerisque nisl varius nec. Sed commodo pharetra dolor a feugiat. Pellentesque enim risus, condimentum nec nisi a, vehicula feugiat elit. Phasellus vulputate diam eu sagittis suscipit. Curabitur tempor posuere nibh non congue.</p>
<p>Praesent eget tortor dapibus, scelerisque nisl ut, lobortis neque. Ut vel ex id nibh pretium commodo sed id odio. Mauris vulputate justo id facilisis ornare. Nullam efficitur orci leo. Donec laoreet vehicula justo, sed sollicitudin dolor. Quisque at mattis enim. Quisque at eleifend lorem. Curabitur non ex id mi eleifend sagittis vel quis mauris. Nulla mattis tellus arcu, vitae gravida neque condimentum a. Nulla faucibus pulvinar risus in consectetur. Nunc tristique tincidunt velit, a gravida erat egestas nec. Mauris interdum ultrices risus vel hendrerit. Fusce sed odio erat. Proin ac ornare purus. Donec laoreet luctus maximus.</p>
<p>Sed id erat ut leo auctor molestie id a lectus. Fusce orci nibh, euismod at risus vitae, laoreet rhoncus purus. Ut hendrerit mollis tempor. Quisque ullamcorper in est dignissim accumsan. Fusce maximus purus porta lorem aliquet pretium. Mauris nec egestas nisl. Proin venenatis sem et arcu imperdiet, at interdum mauris varius. Vestibulum metus justo, euismod ac ipsum quis, blandit venenatis lectus. Sed non vehicula ligula.</p>
<p>Nunc in lorem egestas, gravida neque a, iaculis massa. Vestibulum porttitor sed nibh eget auctor. Aliquam dictum posuere diam, et elementum justo consequat sed. Morbi eu suscipit quam. Phasellus fringilla non mi ac volutpat. Proin in massa tellus. Curabitur rhoncus ultrices est, vitae mollis purus commodo vitae. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc sagittis felis risus, in dictum nibh tincidunt quis. Curabitur in neque blandit, consequat quam et, pellentesque orci. Vivamus risus sem, finibus convallis diam vel, ornare blandit lacus. Vestibulum molestie purus quis rutrum egestas.</p>
<p>Sed non mi sed odio dictum feugiat id ac dui. Sed magna justo, molestie vel sapien sed, finibus finibus tortor. Maecenas dapibus nisi justo, id sollicitudin ipsum suscipit aliquam. Pellentesque bibendum dui urna, fermentum sodales urna placerat fringilla. Curabitur et suscipit ligula. Nunc feugiat tortor vel rhoncus rutrum. Integer vitae ex vitae est porttitor semper tincidunt at turpis. Nullam bibendum accumsan maximus. Donec tincidunt sit amet sem non sollicitudin. Sed accumsan, ex vitae consectetur tempor, elit mi scelerisque sem, eu iaculis nunc purus ac diam. Maecenas tempor quam lectus, vitae rutrum velit ultricies eu. Integer maximus turpis a pulvinar maximus. Donec ultrices nulla et malesuada commodo.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam id nunc a diam laoreet porttitor quis id tellus. Nulla facilisi. Nam molestie sapien ac eros sollicitudin volutpat. Duis id malesuada velit. Donec tristique orci quis ante viverra fermentum. In hac habitasse platea dictumst. Donec ut hendrerit enim. In semper enim enim, et dignissim sapien placerat eu. Mauris ac sapien a enim euismod tincidunt in non justo. Vivamus tincidunt placerat mauris, sit amet scelerisque nisl varius nec. Sed commodo pharetra dolor a feugiat. Pellentesque enim risus, condimentum nec nisi a, vehicula feugiat elit. Phasellus vulputate diam eu sagittis suscipit. Curabitur tempor posuere nibh non congue.</p>
<p>Praesent eget tortor dapibus, scelerisque nisl ut, lobortis neque. Ut vel ex id nibh pretium commodo sed id odio. Mauris vulputate justo id facilisis ornare. Nullam efficitur orci leo. Donec laoreet vehicula justo, sed sollicitudin dolor. Quisque at mattis enim. Quisque at eleifend lorem. Curabitur non ex id mi eleifend sagittis vel quis mauris. Nulla mattis tellus arcu, vitae gravida neque condimentum a. Nulla faucibus pulvinar risus in consectetur. Nunc tristique tincidunt velit, a gravida erat egestas nec. Mauris interdum ultrices risus vel hendrerit. Fusce sed odio erat. Proin ac ornare purus. Donec laoreet luctus maximus.</p>
<p>Sed id erat ut leo auctor molestie id a lectus. Fusce orci nibh, euismod at risus vitae, laoreet rhoncus purus. Ut hendrerit mollis tempor. Quisque ullamcorper in est dignissim accumsan. Fusce maximus purus porta lorem aliquet pretium. Mauris nec egestas nisl. Proin venenatis sem et arcu imperdiet, at interdum mauris varius. Vestibulum metus justo, euismod ac ipsum quis, blandit venenatis lectus. Sed non vehicula ligula.</p>
<p>Nunc in lorem egestas, gravida neque a, iaculis massa. Vestibulum porttitor sed nibh eget auctor. Aliquam dictum posuere diam, et elementum justo consequat sed. Morbi eu suscipit quam. Phasellus fringilla non mi ac volutpat. Proin in massa tellus. Curabitur rhoncus ultrices est, vitae mollis purus commodo vitae. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nunc sagittis felis risus, in dictum nibh tincidunt quis. Curabitur in neque blandit, consequat quam et, pellentesque orci. Vivamus risus sem, finibus convallis diam vel, ornare blandit lacus. Vestibulum molestie purus quis rutrum egestas.</p>
<p>Sed non mi sed odio dictum feugiat id ac dui. Sed magna justo, molestie vel sapien sed, finibus finibus tortor. Maecenas dapibus nisi justo, id sollicitudin ipsum suscipit aliquam. Pellentesque bibendum dui urna, fermentum sodales urna placerat fringilla. Curabitur et suscipit ligula. Nunc feugiat tortor vel rhoncus rutrum. Integer vitae ex vitae est porttitor semper tincidunt at turpis. Nullam bibendum accumsan maximus. Donec tincidunt sit amet sem non sollicitudin. Sed accumsan, ex vitae consectetur tempor, elit mi scelerisque sem, eu iaculis nunc purus ac diam. Maecenas tempor quam lectus, vitae rutrum velit ultricies eu. Integer maximus turpis a pulvinar maximus. Donec ultrices nulla et malesuada commodo.</p>
</div>
</div>
<div id="footer">
<input class="uk-button uk-button-primary" id="up" type="button" value="Scroll up">
</div>
Use jQuery:
var scrolled = 0;
$(document).ready(function() {
$("#downClick").on("click" ,function() {
scrolled = scrolled + 900;
$(".cover").animate({
scrollTop: scrolled
});
});
$("#upClick").on("click" ,function() {
scrolled = scrolled - 300;
$(".cover").animate({
scrollTop: scrolled
});
});
$(".clearValue").on("click" ,function() {
scrolled = 0;
});
});
http://jsfiddle.net/xEFq5/10/
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>