JS实现自动固定顶部的悬浮菜单栏效果

本文实例讲述了JS实现自动固定顶部的悬浮菜单栏效果。分享给大家供大家参考。具体如下：

这是一款自动固定顶部的悬浮菜单栏代码，不管你如何拉动滚动条，它会始终显示在网页的最顶部，用作网站的顶级导航或公告之类的比较合适吧。

运行效果截图如下：

在线演示地址如下：

http://demo.jb51.net/js/2015/js-fix-top-float-menu-style-codes/

具体代码如下：

<!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>

希望本文所述对大家的JavaScript程序设计有所帮助。

赞 (0)

相关推荐

  • Vue.js 递归组件实现树形菜单（实例分享）

    Vue.js 递归组件实现树形菜单（实例分享）

    最近看了 Vue.js 的递归组件,实现了一个最基本的树形菜单. 项目结构: main.js 作为入口,很简单: import Vue from 'vue' Vue.config.debug = true import main from './components/main.vue' new Vue({ el: '#app', render: h => h(main) }) 它引入了一个组件 main.vue: <template> <div class="tree-m

  • 基于vue.js实现侧边菜单栏

    基于vue.js实现侧边菜单栏

    侧边菜单栏应该是很多项目里必不可少的 自己手写了一个 下面是效果图 下面就说一下实现的过程 还是比较简单的 首先导入一下需要的文件 <link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css" rel="external nofollow" > <link rel="stylesheet" typ

  • 最常见的左侧分类菜单栏jQuery实现代码

    最常见的左侧分类菜单栏jQuery实现代码

    打开京东.淘宝等各大类网站,最常见的就是左侧分类菜单栏了,既然这么常见的功能,那么应该怎么去实现它呢,接下来,我会在js中介绍两种实现方式,一种是引入jQuery的实现方式,一种是不引入jQuery的原生js的实现方式~~ 先看效果: 一.先准备资料 1)如果你们是用jQuery来开发网站的,肯定先要准备jQuery.js呀,这个百度一搜就有.不用jQuery开发的,可以忽略此步骤 2)准备一些图片,鼠标右键 > 图片另存为就可以保存 icon_nav.jpg: img_226x40.jpg:

  • javascript伸缩菜单栏实现代码分享

    javascript伸缩菜单栏实现代码分享

    本文实现了点击标题时判断该标题下的菜单是否显示,如果是显示的则将其隐藏,如果是隐藏的则将其显示出来.具体代码如下 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> *{margin:0; pad

  • 非常酷的js图形渐隐导航菜单栏

    body { background:#799AE1; margin:0px; font:normal 12px 宋体; } table { border:0px; } td { font:normal 12px 宋体; } img { vertical-align:bottom; border:0px; } a { font:normal 12px 宋体; color:#215DC6; text-decoration:none; } a:hover { color:#428EFF } .sec_

  • 基于jQuery实现左侧菜单栏可折叠功能

    基于jQuery实现左侧菜单栏可折叠功能

    今天给大家介绍一下左侧菜单栏可折叠功能,在后台管理中左侧菜单折叠功能是特别常见的一个功能,基本不管是什么类型的管理后台都会涉及到这个功能的实现. 今天给大家介绍的是二级可折叠菜单的功能,相对一级的菜单折叠功能就显得稍微比较复杂一点了,我这里将给大家介绍菜单折叠过程中三种变换形式. 第一种变换形式是:不管点击哪一级菜单都可以打开或者关闭本级菜单,但是不会影响其他级别的菜单: <!DOCTYPE html> <html lang="en"> <head>

  • 使用ReactJS实现tab页切换、菜单栏切换、手风琴切换和进度条效果

    使用ReactJS实现tab页切换、菜单栏切换、手风琴切换和进度条效果

    ReactJS是Facebook推出的产品.在2013年的Qcon大会(上海)上面,当时Facebook的前端工程师做过一次讲座,就专门介绍了ReactJS. ReactJS可以看做就是用来Render的.ReactJS是可以达到游戏级别的渲染,fps可以保持在60左右,相当的了不起,它做了一个虚拟dom tree加速了渲染过程,根据当时的数据说比angularjs快20%以上. 前沿 对于React, 去年就有耳闻, 挺不想学的, 前端那么多东西, 学了一个框架又有新框架要学

  • Vue.js组件tree实现无限级树形菜单

    Vue.js组件tree实现无限级树形菜单

    分享一段用 <ul>和<li>标签实现tree的代码,可能写的不是很好,如果大家有更好的希望分享下. 代码看这里喽: html代码: <div class="tree"> <nav class='navbar'> <ul class='nav nav-stacked'> <template v-for='item in menus'> <li role='presentation' v-if='!item.c

  • 简单实现js菜单栏切换效果

    分享一个小案例,实现菜单栏的切换,点击左侧边栏,展示右侧主体的页面,供大家参考,具体内容如下 首先实现html页面的编写: <div id="header"></div> <div id="main"> <!--左侧边栏--> <div class="affix"> <h4>用户中心</h4> <ul> <li><a href=&qu

  • JS实现自动固定顶部的悬浮菜单栏效果

    JS实现自动固定顶部的悬浮菜单栏效果

    本文实例讲述了JS实现自动固定顶部的悬浮菜单栏效果.分享给大家供大家参考.具体如下: 这是一款自动固定顶部的悬浮菜单栏代码,不管你如何拉动滚动条,它会始终显示在网页的最顶部,用作网站的顶级导航或公告之类的比较合适吧. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-fix-top-float-menu-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 T

  • JS实现简单的顶部定时关闭层效果

    复制代码 代码如下: <script type="text/javascript"> var time = 300; var h = 0; function addCount() { if(time>0) { time--; h = h+5; } else { return; } if(h>300) //高度 { return; } document.getElementById("ads").style.display = "&q

  • javaScript实现鼠标在文字上悬浮时弹出悬浮层效果

    在人人,CSDN等一些网站,当鼠标在某个东西上悬浮时,会弹出一个悬浮层,鼠标移开悬浮层消失. 比如说CSDN的通知(应该是进入写新文章的页面后页面上方的那个铃铛),具体是什么实现的呢?上代码: <!doctype html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>TEST</title

  • jQuery+CSS3实现仿花瓣网固定顶部位置带悬浮效果的导航菜单

    jQuery+CSS3实现仿花瓣网固定顶部位置带悬浮效果的导航菜单

    本文实例讲述了jQuery+CSS3实现仿花瓣网固定顶部位置带悬浮效果的导航菜单.分享给大家供大家参考,具体如下: <!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

  • JS实现部分HTML固定页面顶部随屏滚动效果

    本文实例讲述了JS实现部分HTML固定页面顶部随屏滚动效果.分享给大家供大家参考,具体如下: 我们经常在淘宝网看到这样的特效,商品列表特别长,而商品列名称始终保持在最顶端.如果你把滚动条滚动至最上边了,那么它会自动判断是否到顶端了,然后一直置顶从而不怕遮挡. 这种特效是通过JavaScript和CSS实现的,在实际开发中有不少用途,下面是我找到的一个使用JavaScript制作的仿淘宝智能浮动的源代码,兼容性不错,在IE.Firefox.Chrome下都能正常工作. 使用这个特效代码需要注意,如

  • JS滚动到指定位置导航栏固定顶部

    最近整理一下之前做的一个项目,把滚动条动态固定顶部的代码整理出来和大家分享,上代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>js滚动到指定位置导航栏固定顶部</title> <style type="text/css"> body{height: 2500px; margin: 0; padding: 0

  • JS实现兼容性好,自动置顶的淘宝悬浮工具栏效果

    JS实现兼容性好,自动置顶的淘宝悬浮工具栏效果

    本文实例讲述了JS实现兼容性好,自动置顶的淘宝悬浮工具栏效果.分享给大家供大家参考.具体如下: 这是一款兼容性好,自动置顶的淘宝悬浮工具栏,如果你把滚动条滚动至最上边了,那么它会自动判断是否到顶端了,然后一直置顶从而不怕遮挡,其实明白了这种思路,你就能举一返三了,演示一下看看效果. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-tb-float-top-tools-menu-codes/ 具体代码如下: <!DOCTYPE html PU

  • jQuery实现滑动页面固定顶部显示(可根据显示位置消失与替换)

    jQuery实现滑动页面固定顶部显示(可根据显示位置消失与替换)

    本文实例讲述了jQuery实现滑动页面固定顶部显示(可根据显示位置消失与替换).分享给大家供大家参考,具体如下: 这里介绍的jQuery拉动页面固定顶部显示,及自动消失效果,可能ie浏览器下有问题,不过火狐什么的都可以运行看效果,一个简单的网页特效,也是很常用的"回到顶部"效果,有兴趣的看一下. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-fix-top-cha-show-codes/ 具体代码如下: <!DOC

  • jquery实现导航固定顶部的效果仿蘑菇街

    jquery实现导航固定顶部的效果,仿蘑菇街的,感觉还不错,需要的朋友可以参考下 <!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"> <he

  • Android模仿实现微博详情页滑动固定顶部栏的效果实例

    Android模仿实现微博详情页滑动固定顶部栏的效果实例

    前言 最近项目中遇到一个需求,类似微博详情页的效果,通过查找相关的资料终于找了对应的解决方案,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 先来看下我们今天要实现的效果: 滑动固定顶部栏效果图 这段时间公司准备重构一个项目,刚好用到这个效果,我就顺带写了篇文章,关于这个效果网上可以找到一些相关资料的,昨晚看了一些,感觉都不是很好,有点模棱两可的样子,也没提到需要注意的一些关键点,这里来做下整理,由于涉及到公司的代码,这里我就写个简单的Demo来讲解. 简单Demo 传统套路:

随机推荐