javascript 动画顶部栏 - 在滚动上显示和隐藏

Posted 2021-05-04

header{
		-webkit-transition: top 0.2s ease-out;
		-moz-transition: top 0.2s ease-out;
		-ms-transition: top 0.2s ease-out;
		-o-transition: top 0.2s ease-out;
		transition: top 0.2s ease-out;
	}

// 65 -> topbar height
// 1000 -> transition time

var screen_size;
		var lastScrollTop = 0;
		var header_showing = false;
		var scrolling = false;
		var first_load = true;
		var mobile_menu_expanded = false;

		$('.toggle-topbar.menu-icon').on('click', function(){
			if(mobile_menu_expanded == false){
				mobile_menu_expanded = true;
			}else{
				mobile_menu_expanded = false;
			}
		});

		$('ul.right a').on('click', function(){
			if(mobile_menu_expanded == false){
				mobile_menu_expanded = true;
			}else{
				mobile_menu_expanded = false;
			}
		});

		$(window).scroll(function(event){
			scrolling = true;
		   	var st = $(this).scrollTop();
		   	if(st > lastScrollTop && st > 65){
		   		if(screen_size == 'small'){
			   		if(mobile_menu_expanded == false){
				       	if(header_showing !== false || first_load == true){
				       		if(first_load == true){first_load = false;}
			      			header_showing = false;
			      			$('header').css({'top':-65});
				       	}
			       	}
		       	}else{
		       		if(header_showing !== false || first_load == true){
			       		if(first_load == true){first_load = false;}
		      			header_showing = false;
		      			$('header').css({'top':-65});
			       	}
		       	}
		   	}else{
		       	if(header_showing !== true){
	      			header_showing = true;
	      			$('header').css({'top':0});
		       	}
		   	}
		   	lastScrollTop = st;
		   	clearTimeout($.data(this, 'scrollTimer'));
		    $.data(this, 'scrollTimer', setTimeout(function() {
		        if(header_showing !== false || first_load == true){
		        	if(st > 65){
		        		if(mobile_menu_expanded == false){
				        	if(first_load == true){first_load = false;}
			      			header_showing = false;
			      			$('header').css({'top':-65});
			      		}
	      			}
		       	}
		    }, 1000));
		});