UX: remove sticky navbar on scroll down for more visible content
Krystian Manthey
As a sticky navigation is decreasing the visible content height, its a common way to only show when the user scrolls up (user propably wants back or is searching sth.), instead of showing it also when scrolling down. Example: https://bernardzitzer.com/
This might help for fast integration: http://jsfiddle.net/mariusc23/s6mLJ/31/
Krystian Manthey
I have a customized solution, which may help introducing this feature asap:
var mblastScrollTop = 0;
jQuery(window).scroll( function() {
if (isMobile.any()){
} else {
var st = jQuery(this).scrollTop();
if (st > mblastScrollTop){
// downscroll code
if(jQuery( "div.header-wrapper" ).hasClass( "stuck" )){
if(jQuery( "div.header-wrapper" ).is('#activateOnUpscroll')){
// What you want to do during upscroll
} else {
// downscroll starts
jQuery( "div.header-wrapper" ).attr('id', 'activateOnUpscroll');
jQuery( "div.header-wrapper" ).css('visibility','hidden');
}
}
} else {
// upscroll code
if(jQuery( "div.header-wrapper" ).hasClass( "stuck" )){
if(jQuery( "div.header-wrapper" ).is('#activateOnUpscroll')){
jQuery( "#activateOnUpscroll" ).css('visibility','');
jQuery( "div.header-wrapper" ).removeAttr('id');
/*var el = jQuery("div.header-wrapper");
var newone = el.clone(true,true);
jQuery("div.header-wrapper").replaceWith(newone);*/
}
} else {
if(jQuery( "div.header-wrapper" ).is('#activateOnUpscroll')){
jQuery( "div.header-wrapper" ).css('visibility','');
jQuery( "div.header-wrapper" ).removeAttr('id');
}
}
}
mblastScrollTop = st;
}
if (isMobile.any()){
if (jQuery(window).scrollTop() > jQuery('#mobileCardButtonMarker').offset().top){
if (jQuery('button.single_add_to_cart_button').parent().hasClass("mobileConversionFooter") == 0){
var mbTmp;
jQuery('div.quantity.buttons_added').wrap('<div class="mobileConversionFooter"></div>');
mbTmp = jQuery("button.single_add_to_cart_button").detach();
mbTmp.appendTo(".mobileConversionFooter");
}
}
else if ((jQuery(window).scrollTop() + jQuery(window).height()) < jQuery('#mobileCardButtonMarker').offset().top){
if (jQuery('button.single_add_to_cart_button').parent().hasClass("mobileConversionFooter") == 0){
var mbTmp;
jQuery('div.quantity.buttons_added').wrap('<div class="mobileConversionFooter"></div>');
mbTmp = jQuery("button.single_add_to_cart_button").detach();
mbTmp.appendTo(".mobileConversionFooter");
}
}
else {
if (jQuery('button.single_add_to_cart_button').parent().hasClass("mobileConversionFooter") == 1) {
jQuery('button.single_add_to_cart_button').unwrap(".mobileConversionFooter");
}
}
}
} );
});