I've managed to create a navigation bar within a header that sticks to the top of the screen once you scroll down past 100px. The functionality works well, but I'm looking to make the navigation bar stay fixed on the right until it snaps, essentially remaining in place until you scroll past 100px.
For a glimpse of my website, please check out .
Cheers!
Here's the relevant HTML:
<div class="header"> <!-- BEGINNING OF HEADER -->
<div id="logo"> <!-- BEGINNING OF LOGO -->
<h1 class="sliding-middle-out">Hi</h1>
</div> <!-- END OF LOGO -->
<div id="navigation"> <!-- BEGINNING OF NAVIGATION -->
<div style="float:right"> <!-- BEGINNING OF IDK -->
<div id="slider"></div>
<a href="index.html"><div id="one" class="item"><div class="inside">Home</div></div></a>
<a href="about.html"><div id="two" class="item"><div class="inside">About Us</div></div></a>
<a href="content.html"><div id="three" class="item"><div class="inside">Content</div></div></a>
<a href="contact.html"><div id="four" class="item"><div class="inside">Contact</div></div></a>
</div> <!-- END OF IDK -->
</div> <!-- END OF NAVIGATION -->
</div> <!-- END OF HEADER -->
Here's the relevant CSS:
.header{
height:100px;
width:960px;
float:left;
background-color:white;
}
#navigation{
height:40px;
font-size:20px;
color:black;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
float:right;
background-color:white;
padding-top:5px;
position:relative;
}
#navigation.stick{
height:40px;
font-size:20px;
color:black;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
float:left;
background-color:white;
padding-top:5px;
position:fixed;
}
.logo{
height:100px;
width:425px;
float:left;
}
And here's the relevant JavaScript/ JQuery:
<script type="text/javascript" src="./jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="./jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="./jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="./jquery-latest.js"></script>
<script>
$(document).on("scroll", function(){
if($(document).scrollTop() > 1){
$('#navigation').addClass("stick");
}else{
$('#navigation').removeClass("stick");
}
});
</script>