即插即用javascript 导航/广告 窗口滚动跟随的效果

《即插即用javascript 导航/广告 窗口滚动跟随的效果》正文开始，本次阅读大概10分钟。

之前文章中介绍过4种方法实现导航窗口跟随置顶效果：

1、jQuery 导航菜单、广告 —— 固定、置顶、跟随

2、jQuery 智能判断跟随页面滚动的导航、菜单、广告，下拉后跟随置顶特效代码

3、jQuery - 多个菜单导航滚动跟随，全部积累固定在顶端

4、jquery 实现导航栏置顶跟随窗口滚动

以上四种方法都可以实现，最常用的就是第一个和第二个，这也是个人常用的导航跟随特效代码！

今天来分享的是即插即用的一种导航窗口跟随特效，老白很喜欢这种简单的特效：（亲测可用）

!DOCTYPE
html
head
metahttp-equiv=Content-Typecontent=text/html;charset=utf-8/
title窗口滚动跟随的效果/title
/head
body
divid=wrapperstyle=width:960px;margin:0auto
divid=headerstyle=height:100pxh1头部/h1/div
!--除了id=leftstyle=position:relative;top:0，其他的都只是摆设--
divid=secondary_contentstyle=float:left;width:190px;background:#DDD;border:2pxsolid#660000;position:relative;top:0;
h3左侧栏区/h3
p/pp/pp/pp/pp/pp/p
/div
divid=main_contentstyle=float:right;width:750px;background:#DDD;height:10000pxh2右边内容区块/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_topt?scroll_top-t+px:0;
}
/script