自动固定顶部的悬浮菜单栏代码
来源:互联网 发布:小米6数据网络不稳定 编辑:程序博客网 时间:2024/05/17 00:03
View Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>自动固定顶部的悬浮菜单栏代码</title><meta http-equiv="content-type" content="text/html;charset=gb2312"><style type="text/css">*{margin:0;padding:0;}ul,li{list-style:none;}#content{width:600px;margin:0 auto;border:1px solid #f00;}ul li.item{width:400px;text-align:center;margin:20px 100px;background:#00f;color:#fff;font-size:14px;font-weight:bold;height:100px;line-height:100px;}#float_banner{position:absolute;top:0;left:50%;width:900px;margin-left:-450px;height:30px;line-height:30px;text-align:center;background:#000;color:#fff;font-size:14px;font-weight:bold;z-index:2;}</style></head><body><div id="float_banner">这里是顶部的横幅,随着页面滚动而浮动</div> <ul id="content"> <li class="item">第一块内容</li> <li class="item">第二块内容</li> <li class="item">第三块内容</li> <li class="item">第四块内容</li> <li class="item">第五块内容</li> <li class="item">第六块内容</li> <li class="item">第七块内容</li> <li class="item">第八块内容</li> <li class="item">第九块内容</li> <li class="item">第十块内容</li></ul><script language="javascript">var speed = 100;var scrollTop = null;var hold = 0;var float_banner;var pos = null;var timer = null;var moveHeight = null;float_banner = document.getElementById("float_banner");window.onscroll=scroll_ad;function scroll_ad(){ scrollTop = document.documentElement.scrollTop+document.body.scrollTop; pos = scrollTop - float_banner.offsetTop; pos = pos/10 moveHeight = pos>0?Math.ceil(pos):Math.floor(pos); if(moveHeight!=0){ float_banner.style.top = float_banner.offsetTop+moveHeight+"px"; setTimeout(scroll_ad,speed); }//alert(scrollTop);}</script></body></html>
eg2:
View Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>顶部固定菜单</title> <style type="text/css"> *{ margin:0; padding:0;} .nav-wrapper-fixed{ position:fixed; top:0; width:100%;} .nav-wrapper-fixed .nav{width:960px; margin:0 auto;} .nav-wrapper-fixed .nav li{ float:left; width:100px; margin-right:5px; background:#CCC; text-align:center; height:24px; line-height:24px; list-style:none;} .nav-wrapper{ margin-top:100px; width:100%;} .nav-wrapper .nav{width:960px; margin:0 auto;} .nav-wrapper .nav li{ float:left; width:100px; margin-right:5px; background:#CCC; text-align:center; height:24px; line-height:24px; list-style:none;} </style> <script type="text/javascript"> window.onload = function () { var nav = document.getElementById('nav'); var navFixed = document.getElementById('navFixed'); window.onscroll = function () { var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; document.title = scrollTop if (scrollTop > nav.offsetTop) { navFixed.style.display = 'block'; } else if (scrollTop < nav.offsetTop) { navFixed.style.display = 'none'; } } }; </script> </head> <body style="height:2000px;"> <div class="nav-wrapper"> <div class="nav" id="nav"> <ul> <li>菜单一</li> <li>菜单二</li> <li>菜单三</li> <li>菜单四</li> <li>菜单五</li> </ul> </div> </div> <div class="nav-wrapper-fixed" id="navFixed" style="display:none;"> <div class="nav" id="nav"> <ul> <li>菜单一</li> <li>菜单二</li> <li>菜单三</li> <li>菜单四</li> <li>菜单五</li> </ul> </div> </div> </body> </html>
eg3:
View Code
$(function () { var elm = $('#pordAttr'); var startPos = $(elm).offset().top; $.event.add(window, "scroll", function () { var p = $(window).scrollTop(); $(elm).css('position', ((p) > startPos) ? 'fixed' : 'static'); $(elm).css('top', ((p) > startPos) ? '0px' : ""); }); });
获取元素(这里定位元素A)距离顶部的高度,接着设定scroll滚动的事件,比如超过那个高度,把A的位置设定为fixed,小于该高度,修改回relative。
<script type="text/javascript"><!--google_ad_client = "ca-pub-1944176156128447";/* cnblogs 首页横幅 */google_ad_slot = "5419468456";google_ad_width = 728;google_ad_height = 90;//--></script><script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>
- 自动固定顶部的悬浮菜单栏代码
- 自动固定顶部的悬浮菜单栏代码
- html+css+js 固定的底部悬浮菜单栏
- vue+jquery+lodash 实现的滑动时顶部悬浮固定
- Android 滑动组件悬浮固定在顶部
- android利用draglayout实现菜单栏顶部悬浮效果
- Notes02:顶部菜单栏的定义
- 手机网站的顶部或者底部固定浮动代码
- 顶部提示的悬浮窗
- 顶部flash自动消失的脚本代码
- JQUERY右侧悬浮返回顶部代码
- 顶部菜单栏。。。
- 固定在顶部的菜单
- 固定在顶部的进度条
- android仿微信顶部菜单栏的实现
- div浮动固定浏览器顶部实现代码
- 悬浮固定
- 顶部固定
- Android SDK环境变量配置(windows和Linux)
- ORG指令详解
- 字典序序号与全排列的关系【全排列与序号换算方法】
- 第八章 集成点:网关、隧道及中继
- 测试心得
- 自动固定顶部的悬浮菜单栏代码
- 程序员技术练级攻略
- CGI细节记录
- divcss布局及Web标准对网站优化和SEO方面的益处
- Java中DAO的实现
- MIC编程(8)——offload语句内调用的函数声明方式
- C网络编程 socket 字节顺序
- 帅呆了!滚动导航在单页网站中的应用《第三季》
- C#控件Enable设为false和true后的字体颜色修改