网页下拉一定距离后，页面滚动顶部悬浮导航出现悬浮的固定栏怎么做

来源：蜘蛛抓取(WebSpider) 时间：2016-10-18 03:30 标签： 下拉页面悬浮顶部特效
JS实现自动固定顶部的悬浮菜单栏效果
作者：企鹅
字体：[ ] 类型：转载 时间：
这篇文章主要介绍了JS实现自动固定顶部的悬浮菜单栏效果,涉及JavaScript针对window.onscroll事件的响应及页面样式动态变换的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
本文实例讲述了JS实现自动固定顶部的悬浮菜单栏效果。分享给大家供大家参考。具体如下：
这是一款自动固定顶部的悬浮菜单栏代码，不管你如何拉动滚动条，它会始终显示在网页的最顶部，用作网站的顶级导航或公告之类的比较合适吧。
运行效果截图如下：
在线演示地址如下：
具体代码如下：
&!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"&
&title&自动固定顶部的悬浮菜单栏代码&/title&
&meta http-equiv="content-type" content="text/charset=gb2312"&
&style type="text/css"&
*{margin:0;padding:0;}
ul,li{list-style:}
#content{width:600margin:0border:1px solid #f00;}
ul li.item{width:400text-align:margin:20px 100background:#00f;color:#font-size:14font-weight:height:100line-height:100}
#float_banner{position:top:0;left:50%;width:900margin-left:-450height:30line-height:30text-align:background:#000;color:#font-size:14font-weight:z-index:2;}
&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&
&script language="javascript"&
var speed = 100;
var scrollTop =
var hold = 0;
var float_
var timer =
var moveHeight =
float_banner = document.getElementById("float_banner");
window.onscroll=scroll_
function scroll_ad(){
scrollTop = document.documentElement.scrollTop+document.body.scrollT
pos = scrollTop - float_banner.offsetT
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);
希望本文所述对大家的JavaScript程序设计有所帮助。
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具网页下拉的同时顶部导航逐渐缩小并固定在顶部
作者/代码整理：&&(转载请附加本文地址，带有“懒人原生”字样的谢绝转载) 发布日期：
效果描述：
当页面下拉超过200像素的时候，顶部导航会缩小，并始终固定在网页顶部
反之，当页面向上移动，低于200像素的时候，导航将重新恢复到原始高度大小
使用方法：
1、将其中的css样式拷贝到你的页面中
2、将index.html中body部分代码拷贝到你需要的地方即可欢迎您来到网页代码站！
如果您关闭了浏览器的javascript，可能导致页面部分功能无法显示，请开启javascript以便正常浏览本网页。网页代码站()谢谢您的支持！
您的当前位置： >>
>> 【推荐】JS+CSS打造随滚动条滑动始终固定在顶部的菜单导航
【推荐】JS+CSS打造随滚动条滑动始终固定在顶部的菜单导航
分类：&&&时间：&&&点击：&&&关键词：||||||
&!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&&
&title&【推荐】JS+CSS打造随滚动条滑动始终固定在顶部的菜单导航_网页代码站()&/title&
&style type=&text/css&&
*{ margin:0; padding:0;}
.nav-wrapper-fixed{ position: top:0; width:100%;}
.nav-wrapper-fixed .nav{width:960 margin:0}
.nav-wrapper-fixed .nav li{ float: width:100 margin-right:5 background:#CCC; text-align: height:24 line-height:24 list-style:}
.nav-wrapper{ margin-top:100 width:100%;}
.nav-wrapper .nav{width:960 margin:0}
.nav-wrapper .nav li{ float: width:100 margin-right:5 background:#CCC; text-align: height:24 line-height:24 list-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.scrollT
document.title=scrollTop
if(scrollTop&nav.offsetTop){
navFixed.style.display='block';
}else if(scrollTop&nav.offsetTop){
navFixed.style.display='none';
&body style=&height:2000&&
&div class=&nav-wrapper&&
&div class=&nav& id=&nav&&
&li&菜单一&/li&
&li&菜单二&/li&
&li&菜单三&/li&
&li&菜单四&/li&
&li&菜单五&/li&
&div class=&nav-wrapper-fixed& id=&navFixed& style=&display:&&
&div class=&nav& id=&nav&&
&li&菜单一&/li&
&li&菜单二&/li&
&li&菜单三&/li&
&li&菜单四&/li&
&li&菜单五&/li&
&p&&a href=&&&网页代码站&/a& - 最专业的网页代码下载网站 - 致力为中国站长提供有质量的网页代码！&/p&
自动悬浮于顶部的网页导航菜单，当你拖动滚动条的时候，菜单会自动固定悬浮于顶部。就像一些自动适应的QQ客服布局一样，不管滚动条如何滚动，它始终显示在默认的地方。
一、如果您使用的浏览器版本为IE6.0、360浏览器V3.0.8.1版本或者IE的更低版本浏览本页面，建议您升级浏览器至IE7以上，上面的“运行”按钮可能不能用，但您可按以下方式查看。运行代码方式：1、点击“复制”按钮；2、在桌面建立一个txt文档；3、粘贴复制的代码；4、最后把txt的扩展名改为“htm”或“html”；5、完成，打开即可看到效果。二、如果您使用FireFox或者非IE浏览器，建议您使用IE7以上版本。上面的“复制”按钮失效，请您“全选”，以普通方式复制！三、某些代码因需加载完Jquery等之类比较大的JS文件，如果您看不到效果，请您刷新页面！四、某些代码不能完全兼容各浏览器，还请您再次修改才能使用！给您带来的不便！尽请谅解！谢谢您的支持！
Powered by (网页即"web" + 代码即"dm" + "cn" = ) | 最专业的代码下载网站 - 致力为中国站长提供高质量的代码！jQuery实现页面滚动时顶部导航显示或者隐藏
作者/代码整理：&&(转载请附加本文地址，带有“懒人原生”字样的谢绝转载) 发布日期：
效果描述：
页面上有一个始终固定在网页顶部的导航菜单
当页面向下滚动的时候，导航菜单动态隐藏
页面滚动到顶部时，导航菜单动态显示
淘宝也采用过此效果，很不错，懒人之家站长特别推荐
当然，这并不支持低版本浏览器
使用方法简单：
以下几行不可缺少，以此复制过去即可
依次放到对应的文件中即可

我要回帖

更多关于 下拉页面悬浮顶部特效 的文章

 

随机推荐