<div style="height:500px;background:#999"></div>
<div id="fixedMenu" style="background:#eee;width:100%;">MENU</div>
<div style="height:1900px;background:#999"></div>
<script type="text/javascript" src="http://www.coding123.net/js/jquery.js"></script>
<script type="text/javascript">
$(function () {
var ie6 = /msie 6/i.test(navigator.userAgent)
, dv = $('#fixedMenu'), st;
dv.attr('otop', dv.offset().top); //存储原来的距离顶部的距离
$(window).scroll(function () {
st = Math.max(document.body.scrollTop || document.documentElement.scrollTop);
if (st >= parseInt(dv.attr('otop'))) {
if (ie6) {//IE6不支持fixed属性,所以只能靠设置position为absolute和top实现此效果
dv.css({ position: 'absolute', top: st });
}
else if (dv.css('position') != 'fixed') dv.css({ 'position': 'fixed', top: 0 });
} else if (dv.css('position') != 'static') dv.css({ 'position': 'static' });
});
});
</script>
注:http://www.coding123.net/js/jquery.js最好换成本地的js文件:jquery-1.4.2.js,不换的话,当www.coding.net打不开时,引用此域名的网站会出现内容无法加载的情况。
分享到:
相关推荐
一款黑色简单的css页面滚动固定下拉导航菜单特效,网页上下滚动导航菜单会固定定位在顶部。
如图所示,当页面滚动到导航条到达搜索栏下方时固定,向上滚动到导航条位置时又恢复原样。 以下是代码展示: 1.wxml <view class={{top>130 ? 'topnav' : ''}}> <--这里写大于130,表示距离顶部130rpx时...
一款jQuery 插件让原本不是在顶部的导航条,在滚动到它的位置时固定在顶部
这是一款美观实用的jQuery页面滚动顶部固定tab选项卡切换代码,新闻列表导航选项卡切换插件。
jQuery鼠标页面滚动始终保持在顶部固定的导航菜单代码 jQuery鼠标页面滚动始终保持在顶部固定的导航菜单代码 jQuery鼠标页面滚动始终保持在顶部固定的导航菜单代码
实现顶部菜单的固定,并实现了右部菜单的位置检测。实现右部子菜单的点击跳转到页面相关对应的位置。
CSS3固定顶部定位滚动导航 演示地址:http://www.777moban.com/show_35_178.html
jQuery网页向下滚动导航固定顶部代码是一款利用监测scrollTop距离进行导航栏的fixed固定来实现的js网站特效。
这是一款jQuery导航条插件。导航条刚开始的位置在页面底部,随着页面的向下滚动,导航条开始向上滚动,最终导航条停留在页面的顶部位置。
主要介绍了通过jQuery实现的顶部导航跟随滚动条滚动固定浮动在顶部,需要的朋友可以参考下
Bootstrap Auto-Hiding Navbar是一款非常实用的在页面滚动时自动隐藏Bootstrap顶部导航菜单的jQuery插件。它通过扩展原生Bootstrap顶部固定导航菜单,使其在页面向下滚动时隐藏,向上滚动时又显示出来。
这是一款使用js和css3制作的智能隐藏和显示的顶部导航菜单。该顶部导航菜单在页面向下滚动时可以帧动画隐藏,在向上滚动到一定距离时优惠显示出来。
但当然滚动鼠标时,导航条或广告图片会自动紧贴顶部,当鼠标重新滚动到顶部时,则导航又恢复正常状态.从而实现固定浮动效果.================ 顶部浮动时,需要jquery的支持,注意引用.============== 共三个html文件,一...
js滚动到指定位置导航栏固定顶部</title> <style type=text/css> body{height: 2500px; margin: 0; padding: 0;} .banner{height: 250px; width: 100%; background: #e5e5e5;} .bignav{widt
Query粘性滚动导航栏是一款简单的jQuery插件Smint,当页面向下滚动导航栏始终固定在网页顶部。
引导固定导航栏 页面向下滚动时隐藏导航栏,向上显示,以及滚动到低部时显示顶部导航。要求ie8以上浏览器.演示地址:http://www.jq22.com/jquery-info469
HorizontalScrollView和ViewPager联动效果,实现顶部横向导航栏的效果
一款非常大气的全屏网站切换特效,点击顶部固定导航菜单链接自动切换到对应内容的jQuery全屏页面滚动导航切换效果。