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

老白 6个月前 286浏览 0评论

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

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

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

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

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

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


今天来分享的是即插即用的一种导航窗口跟随特效,老白很喜欢这种简单的特效:(亲测可用)

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

<!DOCTYPE>  

<html>  

<head>  

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  

<title>窗口滚动跟随的效果</title>  

</head>  

<body>  

<div id="wrapper" style="width:960px; margin:0 auto">  

    <div id="header" style="height:100px"><h1>头部</h1></div>  

    <!-- 除了 id="left" style="position:relative; top:0" ,其他的都只是摆设 -->  

    <div id="secondary_content" style="float:left; width:190px; background:#DDD; border:2px solid #660000; position:relative; top:0;">  

        <h3>左侧栏区</h3>

        <p> </p><p> </p><p> </p><p> </p><p> </p><p> </p>  

    </div>  

    <div id="main_content" style="float:right; width:750px; background:#DDD; height:10000px"><h2>右边内容区块</h2></div>  

</div>  

</body>  

</html>  

<script type="text/javascript">

//获取对象的初始位置  

var t = document.getElementById('secondary_content').offsetTop;  

window.onscroll = function() {  

    //IE与Mozilla为前者,Chrome取后者的值  

    var scroll_top = document.documentElement.scrollTop || document.body.scrollTop;   

    //滚动时分两种情况考虑,再赋值  

    document.getElementById('secondary_content').style.top = scroll_top > t ? scroll_top - t + 'px' : 0;  

}  

</script>

评论