I need to make a navbar in the left of the page just like this https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_sidenav_fixed2 But i need also to make that navbar hiding when reaching footer and re-appear when scrolling up.
Is it possible?
Thank in advance
This can be done using CSS and Jquery
Ill provide you and example here to see how you can achieve this.
$(document).ready(function() {
function sticky_relocate() {
var window_top = $(window).scrollTop();
var footer_top = $("#footer").offset().top;
var div_top = $('#sticky-anchor').offset().top;
var div_height = $("#sticky").height();
if (window_top + div_height > footer_top) $('#sticky').removeClass('stick');
else if (window_top > div_top) {
$('#sticky').addClass('stick');
} else {
$('#sticky').removeClass('stick');
}
}
$(function() {
$(window).scroll(sticky_relocate);
sticky_relocate();
});
});#sticky {
padding: 0.5ex;
width: 200px;
height: 300px;
background-color: #eee;
color: #fff;
font-size: 2em;
border-radius: 0.5ex;
float: left;
}
#sticky.stick {
position: fixed;
top: 0;
z-index: 10;
border-radius: 0 0 0.5em 0.5em;
}
#sticky a {
padding: 6px 8px 6px 16px;
text-decoration: none;
font-size: 25px;
color: #2196F3;
display: block;
}
#sticky a:hover {
color: #064579;
}
.content-holder {
margin-left: 225px;
}
body {
margin: 1em;
}
p {
margin: 1em auto;
}
#footer {
width: 100%;
height: 600px;
background: #ccc;
z-index: 999999
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="mainsection">
<div class="sidenav" id="sticky">
<a href="#about">About</a> <a href="#services">Services</a> <a href="#clients">Clients</a> <a href="#contact">Contact</a>
</div>
<div id="sticky-anchor"></div>
<div class="content-holder">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sagittis id consectetur purus ut faucibus pulvinar. Turpis massa tincidunt dui ut ornare lectus sit amet est. Semper auctor neque vitae tempus quam pellentesque nec nam. Ut faucibus pulvinar elementum integer enim neque volutpat. Nec dui nunc mattis enim ut. Ultricies tristique nulla aliquet enim tortor at auctor urna nunc. Proin sed libero enim sed faucibus turpis. Fermentum posuere urna nec tincidunt. Pulvinar sapien et ligula ullamcorper malesuada proin libero nunc consequat. Id aliquet lectus proin nibh nisl. Venenatis urna cursus eget nunc scelerisque viverra mauris. Vitae auctor eu augue ut lectus. Etiam dignissim diam quis enim lobortis scelerisque fermentum dui faucibus. Nibh mauris cursus mattis molestie a iaculis at erat pellentesque. Mauris sit amet massa vitae tortor condimentum lacinia quis. Mauris rhoncus aenean vel elit scelerisque. Varius morbi enim nunc faucibus a pellentesque sit. Egestas integer eget aliquet nibh praesent tristique.</p>
<p>Sit amet porttitor eget dolor morbi non arcu risus quis. Id diam vel quam elementum pulvinar etiam. Id porta nibh venenatis cras sed felis eget velit. Auctor elit sed vulputate mi sit amet mauris commodo quis. Cras pulvinar mattis nunc sed blandit libero volutpat sed cras. Ultricies integer quis auctor elit sed vulputate. Netus et malesuada fames ac turpis egestas maecenas pharetra. Molestie at elementum eu facilisis sed odio morbi. Mi bibendum neque egestas congue quisque egestas. Netus et malesuada fames ac turpis egestas. Convallis aenean et tortor at risus viverra adipiscing at. Elit at imperdiet dui accumsan sit amet nulla facilisi.</p>
<p>Quam pellentesque nec nam aliquam sem. Nunc sed augue lacus viverra vitae. Nisl nisi scelerisque eu ultrices vitae auctor eu augue ut. Vitae justo eget magna fermentum iaculis eu. Eu augue ut lectus arcu bibendum. Consectetur adipiscing elit ut aliquam purus. Accumsan tortor posuere ac ut consequat semper viverra nam libero. Donec et odio pellentesque diam volutpat commodo. Elementum facilisis leo vel fringilla est ullamcorper eget nulla. Turpis egestas pretium aenean pharetra magna ac placerat. Habitasse platea dictumst quisque sagittis. Est velit egestas dui id ornare arcu odio ut sem. Sollicitudin aliquam ultrices sagittis orci a scelerisque purus semper eget. Integer quis auctor elit sed vulputate mi. A scelerisque purus semper eget duis. Eget sit amet tellus cras adipiscing enim. Cursus risus at ultrices mi tempus imperdiet nulla malesuada pellentesque. Urna nunc id cursus metus aliquam eleifend mi. Id leo in vitae turpis massa. Nibh tellus molestie nunc non blandit massa enim nec dui.</p>
<p>Scelerisque felis imperdiet proin fermentum leo vel orci porta non. Odio pellentesque diam volutpat commodo sed egestas egestas fringilla phasellus. Non tellus orci ac auctor augue mauris augue neque gravida. Nisl nunc mi ipsum faucibus vitae aliquet nec. Consectetur adipiscing elit pellentesque habitant morbi tristique. Nisi est sit amet facilisis magna etiam. Odio facilisis mauris sit amet massa vitae tortor. Amet est placerat in egestas erat imperdiet. Ut eu sem integer vitae justo eget magna fermentum. Ac felis donec et odio pellentesque diam volutpat commodo.</p>
<p>Eleifend mi in nulla posuere sollicitudin aliquam ultrices. Mauris commodo quis imperdiet massa. Nunc id cursus metus aliquam eleifend mi in nulla. Nisi est sit amet facilisis magna etiam tempor orci eu. Vitae ultricies leo integer malesuada nunc vel risus. Lobortis feugiat vivamus at augue eget arcu. Risus at ultrices mi tempus. In hac habitasse platea dictumst vestibulum rhoncus. Cursus euismod quis viverra nibh cras pulvinar mattis. Odio aenean sed adipiscing diam donec adipiscing tristique risus. Odio eu feugiat pretium nibh ipsum consequat. Amet tellus cras adipiscing enim. Ornare arcu odio ut sem nulla pharetra diam.</p>
<p>Facilisis gravida neque convallis a cras semper auctor. Ut enim blandit volutpat maecenas volutpat blandit aliquam. Et molestie ac feugiat sed lectus vestibulum mattis. Eget mauris pharetra et ultrices neque ornare aenean. Dolor morbi non arcu risus quis varius. Sed egestas egestas fringilla phasellus faucibus scelerisque eleifend. Erat nam at lectus urna. Lorem mollis aliquam ut porttitor leo a diam. Congue quisque egestas diam in. Maecenas pharetra convallis posuere morbi leo urna molestie at.</p>
<p>Purus viverra accumsan in nisl nisi scelerisque eu ultrices. Semper feugiat nibh sed pulvinar proin gravida hendrerit lectus a. Netus et malesuada fames ac turpis egestas maecenas. Tortor id aliquet lectus proin. Dapibus ultrices in iaculis nunc sed augue lacus viverra vitae. Mi in nulla posuere sollicitudin aliquam ultrices sagittis orci a. Scelerisque fermentum dui faucibus in. Nisi est sit amet facilisis magna etiam. Scelerisque eleifend donec pretium vulputate. Enim nunc faucibus a pellentesque sit amet porttitor eget. Velit euismod in pellentesque massa placerat duis ultricies. Vel quam elementum pulvinar etiam non quam lacus suspendisse faucibus. Et ultrices neque ornare aenean euismod elementum. Orci porta non pulvinar neque.</p>
<p>Orci porta non pulvinar neque laoreet suspendisse interdum consectetur libero. Praesent semper feugiat nibh sed pulvinar. Faucibus scelerisque eleifend donec pretium vulputate sapien nec. Vitae aliquet nec ullamcorper sit amet risus nullam eget. Commodo elit at imperdiet dui accumsan sit amet nulla facilisi. Aliquet risus feugiat in ante metus. Maecenas accumsan lacus vel facilisis volutpat est. Faucibus ornare suspendisse sed nisi lacus sed viverra. Sed vulputate odio ut enim. Consectetur adipiscing elit ut aliquam purus.</p>
<p>Nam libero justo laoreet sit amet cursus sit amet dictum. Adipiscing elit pellentesque habitant morbi tristique senectus et netus. In nulla posuere sollicitudin aliquam ultrices sagittis orci a. Mi tempus imperdiet nulla malesuada. Vestibulum lectus mauris ultrices eros in cursus turpis massa tincidunt. Lectus magna fringilla urna porttitor rhoncus dolor purus non enim. Egestas diam in arcu cursus euismod quis viverra nibh cras. Nisi quis eleifend quam adipiscing vitae proin. Est sit amet facilisis magna etiam tempor. Enim sed faucibus turpis in eu mi bibendum neque egestas.</p>
<p>Gravida dictum fusce ut placerat orci nulla pellentesque. Nulla malesuada pellentesque elit eget. Convallis tellus id interdum velit. Lorem sed risus ultricies tristique nulla aliquet enim tortor at. Molestie at elementum eu facilisis. Diam phasellus vestibulum lorem sed risus ultricies tristique. Nunc sed velit dignissim sodales. Sed lectus vestibulum mattis ullamcorper velit sed ullamcorper morbi. Id aliquet risus feugiat in ante. Sapien pellentesque habitant morbi tristique senectus et netus et. Amet volutpat consequat mauris nunc congue nisi. Aliquam malesuada bibendum arcu vitae elementum curabitur vitae. Purus gravida quis blandit turpis cursus in hac habitasse platea. Nulla aliquet porttitor lacus luctus accumsan tortor. Ut tristique et egestas quis ipsum suspendisse ultrices gravida.</p>
</div>
<div id="footer">
<h1>The footer element</h1>
</div>
</div>