901web前端博客

人生就像一副复杂拼图
每个人总有属於自己的记忆碎片
Theme By 网上下载

联系我

RSS

八月 04, 2014

jquery页面顶端固定导航效果

在浏览网站页面的时候,经常看到页面导航固定的效果,想知道该效果是如何制作出来的吗?下面贴上代码:

$(function(){

	var menu = $('#menu'),
		pos = menu.offset();

		$(window).scroll(function(){
			if($(this).scrollTop() > pos.top+menu.height() && menu.hasClass('default')){
				menu.fadeOut('fast', function(){
					$(this).removeClass('default').addClass('fixed').fadeIn('fast');
				});
			} else if($(this).scrollTop() <= pos.top && menu.hasClass('fixed')){
				menu.fadeOut('fast', function(){
					$(this).removeClass('fixed').addClass('default').fadeIn('fast');
				});
			}
		});

});

demo浏览地址:http://www.jqueryba.com/jquery/20140703/23/index.html

相关文章

返回