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

当前位置：网站建设 > 技术支持

jQuery

资料来源：网络整理时间：2023/3/4 1:03:57 共计：3615 浏览

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

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

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

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

4、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>

版权说明：
本网站凡注明“广州京杭原创”的皆为本站原创文章，如需转载请注明出处！
本网转载皆注明出处，遵循行业规范，如发现作品内容版权或其它问题的，请与我们联系处理！
欢迎扫描右侧微信二维码与我们联系。

·上一条：Jquery制作左侧浮动层滚动时跟随页面滚动_js/jQuery | ·下一条：jQuery $(document).height()与$(window).height() - 判断div随滚动条滚动到一定位置后停止_js/jQuery

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

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

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

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