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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var headHeight=$(".header").height()+10;
var nav=$(".nav");
$(window).scroll(function(){
if($(this).scrollTop()>headHeight){
nav.addClass("navFix");
}
else{
nav.removeClass("navFix");
}
})
})
</script>
<style type="text/css">
*{ margin:0; padding:0;}
body{ _background-attachment:fixed; _background-image:url(about:blank);} //实现ie6不支持fixed方法
.header{ width:1000px; height:60px; margin:0 auto; text-align:center;}
.nav{ border:1px solid #ccc; border-radius:5px; overflow:hidden; height:30px; width:1000px; margin:10px auto; background:#fff;}
.nav li{ float:left; padding:0 10px; height:30px; line-height:30px;}
.nav li a{ text-decoration:none; color:#0CF;}
.nav li a:hover{ color:#000; text-decoration:underline;}
.nav ul{ list-style:none;}
.navFix{ position:fixed; left:0; top:0; _position:absolute; top:expression((offsetParent.scrollTop)+0); z-index:2;} //实现ie6不支持fixed方法
.content{ width:1000px; margin:10px auto;}
</style>
</head>
<body>
<div class="header">
<h1>导航固定在页面顶部测试</h1>
</div>
<div class="nav">
<ul>
<li><a href="">首页</a></li>
<li><a href="">蓝枫前端</a></li>
<li><a href="">蓝枫前端</a></li>
<li><a href="">蓝枫前端</a></li>
<li><a href="">蓝枫前端</a></li>
<li><a href="">蓝枫前端</a></li>
<li><a href="">蓝枫前端</a></li>
<li><a href="">蓝枫前端</a></li>
</ul>
</div>
<div class="content">
<p>11111</p>
<p>11111</p>
<p>11111</p><p>11111</p>
<p>11111</p>
<p>11111</p>
<p>11111</p>
<p>11111</p>
<p>11111</p>
<p>11111</p>
<p>11111</p>
<p>11111</p>
<p>11111</p>
<p>11111</p>
<p>11111</p>
<p>11111</p>
<p>11111</p>
<p>11111</p>
<p>11111</p>
<p>11111</p>
<p>11111</p>
<p>11111</p>
<p>11111</p>
<p>11111</p>
<p>11111</p>
<p>11111</p>
<p>11111</p>
<p>11111</p>
<p>11111</p>
<p>11111</p>
<p>11111</p>
<p>11111</p>
<p>11111</p>
<p>11111</p>
<p>11111</p>
<p>11111</p>
<p>11111</p>
<p>11111</p>
<p>11111</p>
<p>11111</p>
<p>11111</p>
<p>11111</p>
<p>11111</p>
<p>11111</p>
</div>
</body>
</html>

时间: 2013-03-20

jquery实现的动态回到顶部特效代码

本文实例讲述了jquery实现的动态回到顶部特效代码.分享给大家供大家参考,具体如下: 这款jquery动态回到顶部特效,不是一下子就回到了网页顶部,而是带点缓冲的效果,有动画效果,使用了jQuery插件,这是个非常常用的网页特效,希望大家喜欢哦. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-back-top-dh-style-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DT

jQuery实现分章节锚点“回到顶部”动画特效代码

本文实例讲述了jQuery实现分章节锚点"回到顶部"动画特效.分享给大家供大家参考,具体如下: 这里演示基于jquery实现的分章节动画实现"回到顶部"的效果,可通过 网页顶部的数字序号直接进入网页的章节,当处于第二章节的时候,网页右侧会显示竖排的控制按钮,点击按钮会回到相应章节,其实也就是定义好的锚点,当然也可回到顶部,网页上见到的回顶部大多不是这个样子,所以本款效果还挺新颖. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js

jQuery 顶部导航跟随滚动条滚动固定浮动在顶部

  复制代码 代码如下: <section> <article class="left"> <p> </p> <ul> <li><a href="http://freejs.net/article_jquerywenzi_149.html" title="Ajax 动态加载内容">Ajax 动态加载内容</a></li> <li>

jQuery实现简单的回到顶部totop功能示例

本文实例讲述了jQuery实现简单的回到顶部totop功能.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>回到顶部</title> <style type="text/css"> body{ width: 100%; height: 10000px; } #totop{ wid

jquery实现点击页面回到顶部

a)下面看看实现,实现很简单,通过JQ判断滚动条向下滚动的长度大于多少时显示[回到顶部+回到首页]的图标(换一种理解:滚动条顶端距离页面顶部的距离),另外一种实现方法,就是通过锚标记,很好理解,就是标记一个位置,事件激活时,给我回到这个位置 b)JQ判断滚动条向下滚动的长度大于多少时,这个方法,也可以用来做页面的自动加载...就是你不停滚动,数据就不停加载...用户体验很好的喔[有时间就写] 1)首先我们写好DOM结构.写好CSS样式表 /* HTML */ <div style="wid

jQuery实现带有动画效果的回到顶部和底部代码

本文实例讲述了jQuery实现带有动画效果的回到顶部和底部代码.分享给大家供大家参考,具体如下: 这款动画版的回到顶部和底部效果代码,也算是比较常见的一款网页特效了,像淘宝网就有这种效果,使用了jQuery插件,加入了动画效果. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-animate-style-scroll-top-buttom-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C

jquery网页回到顶部效果(图标渐隐,自写)

唔,进来开发需求,当网页内容草鸡多的时候,用户就需要有个按钮快速回到顶部,而不是自己去滚滑轮~ 原本以为比较难的说,因为上头要求全部用js来实现,哪个页面引用,哪个页面显示. 于是乎,本屌丝就尝试写了下,唔,没发现,还挺easy的说~~ 有屁我就快放了,直接上代码,屁放多了就成屎了~~唔,罪过,阿弥陀佛,阿门~~ 复制代码 代码如下: <pre name="code" class="javascript">//回到顶部js $(function(){ v

jQuery回到顶部的代码

在一些网站上,我们经常见到返回顶部的效果,本文给大家介绍基于jquery如何实现返回顶部效果.感兴趣的朋友跟着小编一起看下实现代码吧. 首先需要在顶部添加如下html元素: <p id="back-to-top"><a href="#top"><span></span>返回顶部</a></p> 其中a标签指向锚点top,可以在顶部防止一个<a name="top">

如何利用JQuery实现从底部回到顶部的功能

今天给大家介绍一下如何利用jQuery实现从任意地方返回顶部的功能,现在大部分网站因为篇幅比较长,所以都会设置这么一个按钮,利用这个按钮可以实现从底部返回顶部的功能.废话不多说,下面就给出这么一个例子介绍一下,它是怎么实现的. 实现方法一: <footer> <p class="ft-copyright">强仔仔 Design by Linzhiqaing 蜀ICP备11002373号-1</p> <div id="tbox"

js+JQuery返回顶部功能如何实现

很多网站上都有返回顶部的效果,本文阐述如何使用jquery实现返回顶部按钮. 首先需要在顶部添加如下html元素: <p id="back-to-top"><a href="#top"><span></span>返回顶部</a></p>其中a标签指向锚点top,可以在顶部防止一个<a name="top"></a>的锚点,这样在浏览器不支持js时也可以

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"> <head> <meta http-equiv="Co

JQuery实现DIV其他动画效果的简单实例

1.toggle 切换对象的隐藏和显示,可以用来代替show和hide <!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>

一句jQuery代码实现返回顶部效果(简单实用)

使用方法: 只需引用jQuery库和YesTop插件,然后一句代码就可以实现返回顶部: 引用代码: <script type="text/javascript" src="http://hovertree.com/ziyuan/jquery/jquery-1.11.3.min.js"></script> <script type="text/javascript" src="http://hovertree

JS实现回到页面顶部动画效果的简单实例

最近在模仿各大网站写页面样式和交互,发现好多都有回到顶部的需要,所以写了一下js,记录下来. 发现还可以添加从快到慢的动画效果和随时下拉滚动条停止滚动的功能, 参考了imooc上相关课程,最终实现JS代码如下: //页面加载后触发 window.onload = function(){ var btn = document.getElementById('btn'); var timer = null; var isTop = true; //获取页面可视区高度 var clientHeight

JS实现带动画的回到顶部效果

本文实例为大家分享了JS实现带动画的回到顶部效果的具体代码,供大家参考,具体内容如下 实现功能:滚动到页面某一个高度的时候,回到顶部按钮出现.点击之后回到网页顶部,按钮隐藏. 代码如下,jQuery引用的是百度CDN的,因此整段代码复制下来后在浏览器运行即可. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>实现回到顶部功能</title> &

iOS实现点击状态栏自动回到顶部效果详解

前言 大家都知道实现状态栏(statusBar)点击自动回到顶部效果,旨在为用户在浏览界面时提供便利,点击状态栏能够快速回到界面顶部,所以主要针对可以滚动的UIScrollView和其子类UITableVIew和UICollectionView. 这里将从以下几个方面实现该功能. 1.苹果自带功能 分析: 首先,苹果自己已经提供了该功能,往上滑动tabView,点击statusBar,tableView会自动回到初始位置.如下图所示,此时点击statusBar,屏幕最上方显示的将是第一个cell

JS采用绝对定位实现回到顶部效果完整实例

本文实例讲述了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"> <head&g

原生js实现jquery函数animate()动画效果的简单实例

通过在公司一个月的实习,慢慢的对css跟html算是比较熟悉了,这几天开始研究js,今天用js写了一个jquery的animate函数,测试了下,性能还可以.个人觉得jquery并不是万能的,因为是个框架,所以有些东西写的比较死,就像animate函数一样,可选的参数不多有时候可能并不能实现我们想要的效果. 注释的部分是用来测试用的,写代码的过程并不是十分顺利,因为用js平时用的不是很细,都是大体知道方法,也用过,但等到真正要实现动画函数的时候,细枝末节写错了就可能把人难住了. 函数里面有几个参

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"> <head> <meta http-equiv="Content-

jQuery实现手机版页面翻页效果的简单实例

如下所示: var page = 1; var size = 6; var mark = 0; var url = "{pigcms{:U('Order/index', array('page'=>'d%'))}"; var commentTpl = '<div style="margin-top: 10px">\ <button data-oid="<order_id>" style="width: