• 注册
热门标签
↑ 收起导航

HTML窗口滚动到元素位置时元素固定显示

今天说一个比较常用的效果,比如当页面滚动到导航条时,接下来页面滑动时,导航条就固定显示于顶部……

可乐鸡翅

Html 代码:

<div id="header-wrapper" class="">
	<nav class="main-nav">
		<ul id="dropmenu" class="warp">
			<li><a href="#">首页</a></li>
			<li><a href="http://nuodou.com/qijibaobao">奇迹宝宝</a></li>
			<li><a href="http://nuodou.com/c/baby">诺豆母婴</a></li>
			<li><a href="http://nuodou.com/guestbook">问答交流</a></li>
			<li><a href="http://nuodou.com/about">关于诺豆</a></li>
			<li><a href="http://nuodou.com/contact">联系诺豆</a></li>
		</ul>
	</nav>
</div>

CSS 代码:

.header-wrapper_fixed{ position:fixed; _position:absolute; top:0; border-bottom:1px solid #f27c7e!important; width:100%; height:60px!important; line-height:60px!important; box-shadow: rgba(0, 0, 0, 0.239216) 1px 2px 5px; opacity:0.9; }
		.header-wrapper_fixed .logo{ height:60px!important; }
		.header-wrapper_fixed .main-nav{ height:60px!important; }
			.header-wrapper_fixed .main-nav li{ height:60px!important; line-height:60px!important; }

jQuery 代码:

// follow fixed header
try {
	jQuery(document).ready(function($) {
		if ($("#header-wrapper").length > 0) {
			var navTop = $('#header-wrapper').offset().top;
			$(window).scroll(function() {
				if ($(window).scrollTop() > navTop && $(window).width() > 719) {
					$('#header-wrapper').addClass('header-wrapper_fixed');
				} else {
					$('#header-wrapper').removeClass('header-wrapper_fixed');
				}
			});
		}
	});
} catch(e) {}
版权声明:转载请注明来自杨俊伟博客,本文地址:http://yangjunwei.com/a/1640.html
除非注明,杨俊伟博客文章均为原创,转载请注明出处和链接!
 

发表评论 



我还是想用邮箱注册

登录

忘记密码 ?

用第三方帐号快捷登录

已有账户?前往登录吧~

注册