How to hide nav bar on scroll and show a sidebar? - html

Question

I am using bootstrap to code the frontend of a website. What I hope to achieve is that when I scroll the navbar vanishes and the sidebar pops up. I have been stuck on this for ages so If anyone has any idea to let me know.

Answer 1

This should answer the first piece of the question, in terms of hiding the navbar on scroll. I would get away from using bootstrap in this instance. It is easier to build your navbar from scratch, style it with css, and then use javaScript to manipulate it dynamically, such as hiding it. Once this is working. I can help you to get the sidebar to present on scroll. The link should give you an idea where to do with this.
https://www.w3schools.com/howto/howto_js_navbar_hide_scroll.asp
It is my opinion that the following block of javaScript will help you the most. you did not leave a code block, so it is only an assumption, based on what the common layout is. Again, I would move away from bootstrapping the menu bar, since you are wanting to customize features within it. You will see an explanation of the site that I listed below:
The first block would be your navbar div:
<div id="navbar">
Home
News
Contact
</div>
You can set this up and represent it however you would choose too. It should be in a standalone HTML file, lets say index.html for these purposes.
The next block of code is the CSS, as it would pertain to the above codeblock. Again, this can be shaped however you would like it to be, but for these purposes it is simply giving a blueprint. This should also be in a standalone css file.
#navbar {
background-color: #333; /* Black background color */
position: fixed; /* Make it stick/fixed */
top: 0; /* Stay on top */
width: 100%; /* Full width */
transition: top 0.3s; /* Transition effect when sliding down (and up) */
}
/* Style the navbar links */
#navbar a {
float: left;
display: block;
color: white;
text-align: center;
padding: 15px;
text-decoration: none;
}
#navbar a:hover {
background-color: #ddd;
color: black;
}
The final code block is your script. The JS that will dynamically change the navbar is contained within. As you can see below, they are setting the variable globally, though not always the best way, and then creating a function expression, this has to do with hoisting, and then simply hide the navigation bar. Please let me know if you need any further assistance to help you understand this.
js.file
var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
var currentScrollPos = window.pageYOffset;
if (prevScrollpos > currentScrollPos) {
document.getElementById("navbar").style.top = "0";
} else {
document.getElementById("navbar").style.top = "-50px";
}
prevScrollpos = currentScrollPos;
}