Streaming live at 10am (PST)

Making Fixed Nav Bar Disappear and Appear on Scroll


#1

I'm wondering if there is any way to make a fixed nav bar disappear when the user scrolls down and reappear upon scrolling up, like it does here, without any custome code.


#2

Can this help you?


#3

Not really but thanks anyway


#4

Well. you just revert it of course. The example hide it at the start then show, you just do it the other way around. Its the same but you change the out of view section.


#5

The video is basically the same principal or you could use two navbars, or try layering elements to give the illusion of scrolling turning to fixed. You can't change position with interactions at this time.

You could try this bit of code to make the navigation become sticky at a certain point. The transition of it showing up fixed isn't great but maybe you can fine tune it.

jQuery(document).ready(function() {
var aa = jQuery("#id assigned to navbar");
jQuery(window).scroll(function() {
//adjust the number to fit distance from the top of page to the section
if( jQuery(this).scrollTop() > 720 ) {
aa.addClass("sticky");
} else {
aa.removeClass("sticky");
}
});
});

the CSS to add to custom code.

.sticky {
position:fixed;
top:0px;
z-index:150;
}


#6

This is great, thank you


#7

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.