1、jQuery 导航菜单、广告 —— 固定、置顶、跟随
2、jQuery 智能判断跟随页面滚动的导航、菜单、广告,下拉后跟随置顶特效代码
3、jQuery – 多个菜单导航滚动跟随,全部积累固定在顶端
4、jquery 实现导航栏置顶跟随窗口滚动
以上四种方法都可以实现,最常用的就是第一个和第二个,这也是个人常用的导航跟随特效代码!
今天来分享的是即插即用的一种导航窗口跟随特效,老白很喜欢这种简单的特效:(亲测可用)
<!DOCTYPE><html><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title>窗口滚动跟随的效果</title></head><body><divid="wrapper"style="width:960px;margin:0auto"><divid="header"style="height:100px"><h1>头部</h1></div><!--除了id="left"style="position:relative;top:0",其他的都只是摆设--><divid="secondary_content"style="float:left;width:190px;background:#DDD;border:2pxsolid#660000;position:relative;top:0;"><h3>左侧栏区</h3><p></p><p></p><p></p><p></p><p></p><p></p></div><divid="main_content"style="float:right;width:750px;background:#DDD;height:10000px"><h2>右边内容区块</h2></div></div></body></html><scripttype="text/javascript">//获取对象的初始位置vart=document.getElementById(secondary_content).offsetTop;window.onscroll=function(){//IE与Mozilla为前者,Chrome取后者的值varscroll_top=document.documentElement.scrollTop||document.body.scrollTop;//滚动时分两种情况考虑,再赋值document.getElementById(secondary_content).style.top=scroll_top>t?scroll_top-t+px:0;}</script>