A while back I tried to figure out how to create a fixed navigation bar that smoothly animates to fit the width of the user's display. For example, my navigation bar is centered in the middle of my page and it doesn't fit the width of the webpage. What I want it to do is when the user scrolls past it, it sticks to the top of their browser and plays a nice, smooth animation that fits the width of the page.
I've accomplished to the point where it animates when the user scrolls past it, but I also want it to play that same animation in reverse when they scroll back to the top of the page. Currently, when the user scrolls back up, the navigation bar instantly snaps back into place without playing the animation.
I'm thinking an if-statement is required here. For example, the if-statement will check if the user has scrolled down past 218 pixels (that's what I have set for the fixed navigation bar to kick in) and if the user is, when they scroll back up it will remove the Javascript function that played the forward animation and instead play the reverse animation. My coding experience with Javascript, however, is not very good, so I was hoping I could have some help. Here is my current Javascript function that plays only the forward animation:
$(document).ready(function() {
var aboveHeight = 218;
$(window).scroll(function(){
if ($(window).scrollTop() > aboveHeight){
$('sticknav').addClass('fixed').css('top','0').next().css('padding-top','60px');
} else {
$('sticknav').removeClass('fixed').next().css('padding-top','0');
}
});
});
</script>
Surely this must be a simple feat, right? Also, the fixed and sticknav classes are ones that I created. I will have to create an unfixed class for when the user scrolls back to the top. sticknav is just a wrapper that wraps my navigation bar to tell the Javascript where to apply the fixed class. If you need any more information please let me know. However, with my particular website, it doesn't seem possible that I can create a JSFiddle or anything similar. Sorry about that.
Aucun commentaire:
Enregistrer un commentaire