I want to make an adoptive sticky navigation bar. I have never made my own code in Javascript before.
My solution to this is to make two sticky navigation bars that show/hide based on scrolling.
My solution is like this:
- First, before any scrolling is done, my first navigation bar (yellow) will be visible and positioned 100px from the top, that is having
top:100px. - Then, when scrolling is initiated, I would like this yellow
<div>to disappear usingdisplay:none. - Also upon scrolling, at the same time as the yellow navigation bar disappears, I would reveal the orange navigation bar with
top:200px. - Right now, the orange bar is showing (wrongfully) from the start but it should not…only one bar should be shown at any given time. I want the bars, the two
<div>elements, to keep appear/disappear also when scrolling up and down multiple times.
Something is wrong with my javascript and codepen is complaining about $ being undefined.
https://codepen.io/G1111/pen/RwBPrPR
$(window).scroll(function() {
Testvariable = $(window).scrollTop();
if (Testvariable == 0) {
document.getElementById("stickys").style.display = "normal";
document.getElementById("stickys2").style.display = "none";
} else {
document.getElementById("stickys").style.display = "none";
document.getElementById("stickys2").style.display = "normal";
}
});#stickys {
top: 100px!important;
background-color: yellow;
height: 100px;
position: fixed;
position: fixed!important;
box-sizing: border-box;
margin: 0 0% 0 0%!important;
padding: 0!important;
width: calc(60vw - 0%);
left: calc(20vw - 0%);
right: calc(20vw - 0%);
width: calc(100vw - 0%);
left: 0px;
right: 0px;
opacity: 1;
}
#stickys2 {
top: 200px!important;
background-color: orange;
height: 100px;
position: fixed;
position: fixed!important;
box-sizing: border-box;
margin: 0 0% 0 0%!important;
padding: 0!important;
width: calc(60vw - 0%);
left: calc(20vw - 0%);
right: calc(20vw - 0%);
width: calc(100vw - 0%);
left: 0px;
right: 0px;
opacity: 1;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="stickys">
My first sticky navigation bar. Show initially, then hide when slighest scroll, that is when Testvariable>0. Here, top:100px
</div>
<div id="stickys2">
My second sticky navigation bar. Hide initially, then show when slighest scroll, that is when Testvariable>0. Here, top: 200px.
</div>
.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>>Solution :
First, replace display = "normal"; with display = "block";.
Then, you could call $(window).scroll(); after binding the scroll event handler to show/hide your navbars according to the window scroll position :
$(window).scroll(function() {
Testvariable = $(window).scrollTop();
if (Testvariable == 0) {
document.getElementById("stickys").style.display = "block";
document.getElementById("stickys2").style.display = "none";
} else {
document.getElementById("stickys").style.display = "none";
document.getElementById("stickys2").style.display = "block";
}
});
$(window).scroll();#stickys {
top: 100px!important;
background-color: yellow;
height: 100px;
position: fixed;
position: fixed!important;
box-sizing: border-box;
margin: 0 0% 0 0%!important;
padding: 0!important;
width: calc(60vw - 0%);
left: calc(20vw - 0%);
right: calc(20vw - 0%);
width: calc(100vw - 0%);
left: 0px;
right: 0px;
opacity: 1;
}
#stickys2 {
top: 200px!important;
background-color: orange;
height: 100px;
position: fixed;
position: fixed!important;
box-sizing: border-box;
margin: 0 0% 0 0%!important;
padding: 0!important;
width: calc(60vw - 0%);
left: calc(20vw - 0%);
right: calc(20vw - 0%);
width: calc(100vw - 0%);
left: 0px;
right: 0px;
opacity: 1;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="stickys">
My first sticky navigation bar. Show initially, then hide when slighest scroll, that is when Testvariable>0. Here, top:100px
</div>
<div id="stickys2">
My second sticky navigation bar. Hide initially, then show when slighest scroll, that is when Testvariable>0. Here, top: 200px.
</div>
.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>.<br>