蜗小牛
- 浏览: 63307 次
- 性别:
- 来自: 大连
-
文章分类
最新评论
<!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>
<style type="text/css">
body,h1,ul{margin:0;}
ul li{list-style-type:none;}
#header{width:100%;border-top:solid 1px #ccc;border-bottom:solid 1px #ccc;text-align:center;}
h1{padding:10px 0;color:#D74452;}
.nav{width:1000px;background:#fff;margin:20px auto 0;border:solid 1px #ccc;zoom:1;border-radius:5px;box-shadow:0 1px 6px rgba(0,0,0,0.1);color:#D74452;}
.nav_scroll{position:fixed;width:100%;margin:0;left:0;top:0;}
.nav:after{content:"";display:block;height:0;clear:both;visibility:hidden;}
.nav ul li{float:left;margin:0 20px;height:30px;line-height:30px;}
.nav ul li a{cursor:pointer; }
.nav ul li a:hover{text-decoration:underline;}
h2{height:400px;line-height:400px;}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
var topMain=$("#header").height()+20//是头部的高度加头部与nav导航之间的距离。
var nav=$(".nav");
$(window).scroll(function(){
if ($(window).scrollTop()>topMain){//如果滚动条顶部的距离大于topMain则就nav导航就添加类.nav_scroll，否则就移除。
nav.addClass("nav_scroll");
}
else
{
nav.removeClass("nav_scroll");
}
});
})
</script>
</head>
<body>
<div id="header"><h1>花瓣</h1></div><!--header-->
<div class="nav">
<ul>
<li><a>关注</a></li>
<li><a>最新</a></li>
<li><a>最热</a></li>
<li><a>视频</a></li>
<li><a>家居</a></li>
<li><a>旅行</a></li>
</ul>
</div><!--nav-->
<div style="background:#f9f9f9;color:#000;" id="cont">
<h2>1</h2>
<h2>2</h2>
<h2>3</h2>
<h2>4</h2>
<h2>5</h2>
<h2>6</h2>
<h2>7</h2>
<h2>8</h2>
<h2>1</h2>
<h2>2</h2>
<h2>3</h2>
<h2>4</h2>
<h2>5</h2>
<h2>6</h2>
<h2>7</h2>
<h2>8</h2>
<h2>1</h2>
<h2>2</h2>
<h2>3</h2>
<h2>4</h2>
<h2>5</h2>
<h2>6</h2>
<h2>7</h2>
<h2>8</h2>
<h2>1</h2>
<h2>2</h2>
<h2>3</h2>
<h2>4</h2>
<h2>5</h2>
<h2>6</h2>
<h2>7</h2>
<h2>8</h2>
<h2>1</h2>
<h2>2</h2>
<h2>3</h2>
<h2>4</h2>
<h2>5</h2>
<h2>6</h2>
<h2>7</h2>
<h2>8</h2>
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>顶部浮动的导航效果</title>
<style type="text/css">
body,h1,ul{margin:0;}
ul li{list-style-type:none;}
#header{width:100%;border-top:solid 1px #ccc;border-bottom:solid 1px #ccc;text-align:center;}
h1{padding:10px 0;color:#D74452;}
.nav{width:1000px;background:#fff;margin:20px auto 0;border:solid 1px #ccc;zoom:1;border-radius:5px;box-shadow:0 1px 6px rgba(0,0,0,0.1);color:#D74452;}
.nav_scroll{position:fixed;width:100%;margin:0;left:0;top:0;}
.nav:after{content:"";display:block;height:0;clear:both;visibility:hidden;}
.nav ul li{float:left;margin:0 20px;height:30px;line-height:30px;}
.nav ul li a{cursor:pointer; }
.nav ul li a:hover{text-decoration:underline;}
h2{height:400px;line-height:400px;}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
var topMain=$("#header").height()+20//是头部的高度加头部与nav导航之间的距离。
var nav=$(".nav");
$(window).scroll(function(){
if ($(window).scrollTop()>topMain){//如果滚动条顶部的距离大于topMain则就nav导航就添加类.nav_scroll，否则就移除。
nav.addClass("nav_scroll");
}
else
{
nav.removeClass("nav_scroll");
}
});
})
</script>
</head>
<body>
<div id="header"><h1>花瓣</h1></div><!--header-->
<div class="nav">
<ul>
<li><a>关注</a></li>
<li><a>最新</a></li>
<li><a>最热</a></li>
<li><a>视频</a></li>
<li><a>家居</a></li>
<li><a>旅行</a></li>
</ul>
</div><!--nav-->
<div style="background:#f9f9f9;color:#000;" id="cont">
<h2>1</h2>
<h2>2</h2>
<h2>3</h2>
<h2>4</h2>
<h2>5</h2>
<h2>6</h2>
<h2>7</h2>
<h2>8</h2>
<h2>1</h2>
<h2>2</h2>
<h2>3</h2>
<h2>4</h2>
<h2>5</h2>
<h2>6</h2>
<h2>7</h2>
<h2>8</h2>
<h2>1</h2>
<h2>2</h2>
<h2>3</h2>
<h2>4</h2>
<h2>5</h2>
<h2>6</h2>
<h2>7</h2>
<h2>8</h2>
<h2>1</h2>
<h2>2</h2>
<h2>3</h2>
<h2>4</h2>
<h2>5</h2>
<h2>6</h2>
<h2>7</h2>
<h2>8</h2>
<h2>1</h2>
<h2>2</h2>
<h2>3</h2>
<h2>4</h2>
<h2>5</h2>
<h2>6</h2>
<h2>7</h2>
<h2>8</h2>
</div>
</body>
</html>
分享到：
发表评论
-
Jquery实现表格行的动态增加与删除
2014-05-29 08:45 1265<!DOCTYPE html PUBLIC " ... -
CSS3伪类选择器
2014-04-18 09:32 620CSS的伪类语法和别的语 ... -
Jquery实现选中左边的下拉菜单点击按钮之后跑右边
2014-04-15 14:34 1046script代码： <script type=" ... -
html之marquee详解
2014-03-28 10:07 646该标签不是HTML3.2的一部分，并且只支持MSIE3以后内核 ... -
Html中a标签的四个属性 link ,visited , hover ,active 是有顺序的! LVHA
2014-03-25 15:39 19091。html中a标签的四个属性书写是有顺序的，如果顺序不对，显 ... -
修改360浏览器内核
2014-03-10 17:19 1945浏览器内核控制Meta标签说明文档 背景介绍 由于众所周知 ... -
实现DIV层内的文字垂直居中
2014-03-07 14:03 770有时候，为了网页设计的美观，需要把div+css设计的页面里的 ... -
bootstrap时间控件
2014-03-06 13:27 1227<!DOCTYPE html PUBLIC " ... -
IE=EmulateIE7 标签的作用
2014-02-28 14:05 655对于 Web 开发人员来说 ... -
修改IE浏览器默认的文档模式
2014-02-28 13:26 1927开始运行输入C:\Windows\System32\gpedi ... -
网页制作中Iframe自适应高度的解决办法
2013-12-27 10:14 593进行网页设计时，由于网站的海量信息以及标准化的网页制作模式 ... -
Jquery获取当前屏幕的宽度、高度
2013-12-05 14:48 956<script type="text/java ... -
iframe,frameset区别
2013-12-05 10:24 577■ 框架概念 ： 所谓框架便是网页画面分成几个框窗，同时取得 ... -
js+JQuery实现返回顶部功能
2013-11-18 11:05 549很多网站上都有返回顶部的效果，本文阐述如何使用jquery实现 ... -
转 CSS hack：针对IE6，IE7，firefox显示不同效果
2013-09-05 13:55 1005CSS hack：针对IE6，IE7，firefox显示不同效 ... -
white-space:
2013-08-30 10:57 508定义和用法 white-space 属性设置如何处理元素内的空 ... -
通过css将直角矩形变为圆角矩形
2013-08-30 10:56 1229{border-radius:6px 6px 0 0} -
整合IE7与其他IE版本的兼容
2013-08-21 09:39 602<!--[if lte IE 7]> <d ... -
常见浏览器兼容性问题与解决方案css篇
2013-08-12 17:17 780所谓的浏览器兼容性问题，是指因为不同的浏览器对同一段代码有不同 ... -
如何在页面中设置IE浏览器的文档模式
2013-08-04 12:58 1106如何在页面中设置IE浏 ...
相关推荐
在"jQuery顶部浮动弹出层动画弹出层特效"这个主题中，我们将深入探讨如何利用jQuery来创建动态、吸引人的弹出层效果，特别是在页面顶部浮动的设计。 首先，让我们了解什么是弹出层。弹出层是一种网页设计技术，它...
jquery天猫商城商品分类顶部浮动固定层菜单栏 jquery天猫商城商品分类顶部浮动固定层菜单栏 jquery天猫商城商品分类顶部浮动固定层菜单栏 jquery天猫商城商品分类顶部浮动固定层菜单栏
在网页设计中，"顶部浮动固定导航条"是一种常见的用户界面设计模式，它能提供一致的导航体验，无论用户在页面的哪个位置滚动，导航条始终保持在屏幕的顶部可见。这种设计方法通常用于大型网站或内容丰富的页面，以...
本教程将详细讲解如何利用jQuery技术制作一个在页面顶部浮动的层，该层可以通过点击图标按钮进行显示和隐藏。这个功能在网页设计中常见于顶部导航栏或通知区域，为用户提供方便快捷的交互体验。 首先，我们需要理解...
**jQuery基于Bootstrap的顶部浮动导航菜单** 在网页设计中，导航菜单是用户界面的重要组成部分，它帮助用户快速访问网站的不同部分。本示例中的“jQuery基于Bootstrap顶部浮动导航菜单代码”是一个高效且实用的设计...
在网页设计中，"页面顶部浮动可关闭广告条"是一种常见的功能，用于在用户浏览页面时展示广告或通知。这种广告条通常会固定在页面的顶部，随着用户滚动页面而始终保持可见，同时提供一个明显的关闭按钮，允许用户选择...
在本项目中，我们关注的是"Bootstrap顶部浮动导航菜单页面滚动显示隐藏"这一功能。这个功能通常用于创建响应式的网页，使得在页面滚动时，导航栏能够智能地根据用户的滚动行为进行显示或隐藏。 在`index-bs3.html`...
《基于jQuery和Bootstrap的顶部浮动导航菜单实现》 在网页设计中，导航菜单是一个至关重要的元素，它为用户提供了一个简洁的界面，使他们能够轻松地浏览网站内容。本篇文章将详细解析如何使用jQuery和Bootstrap来...
在网页设计中，导航菜单是用户浏览网站时的重要指引，而顶部浮动导航菜单更是常见且实用的设计元素。本文将深入探讨如何使用jQuery技术来创建一个具有浮动效果和锚点导航功能的顶部菜单，并实现当页面滚动到特定内容...
导航条原本正常显示,可能不一定在顶部位置.但当然滚动鼠标时,导航条或广告图片会...顶部浮动时,需要jquery的支持,注意引用.============== 共三个html文件,一个是顶部浮动,两个在底部浮动,包含一个手机版的页脚导航条
标题中的“监听滚动条顶部距离、显示百分比、下拉到底部顶部浮动”是指在网页开发中实现的一种常见交互效果。这种效果通常用于创建响应式的网页界面，特别是那些需要根据用户滚动行为改变页面元素状态的设计。以下是...
导航条原本正常显示,可能不一定在顶部位置.但当然滚动鼠标时,导航条或广告图片会...顶部浮动时,需要jquery的支持,注意引用.============== 共三个html文件,一个是顶部浮动,两个在底部浮动,包含一个手机版的页脚导航条
"jQuery带返回顶部右侧浮动导航"就是这样一个实现该功能的插件。下面将详细介绍这个插件及其相关知识点。 首先，jQuery是一个广泛使用的JavaScript库，它简化了JavaScript的DOM操作、事件处理、动画以及Ajax交互。...
在网页设计中，"顶部下拉浮动菜单导航"是一种常见的用户界面元素，它提供了一种高效的方式来组织和访问网站的主要部分。这种设计模式通常应用于头部导航栏，当用户滚动页面时，菜单会保持在屏幕顶部可见，提高了用户...
【jQuery京东浮动网站楼层导航代码】是一个用于网页开发的JavaScript特效，主要针对的是网站的菜单导航部分。这个代码实现的功能是模仿京东商城网页左侧的楼层导航，它具有动态跟随滚动的效果，即用户在浏览页面时，...
VB 'InNum-ÊäÈëÊý,nDec-СÊýλÊý,nWidth-¿í¶È,IC-×óÓÒ¶ÔÆë±êÖ¾,OutStr-Êä³ö×Ö·û´® Public Function Formats(InNum As Variant, cFormat As String) As String ...
在Android开发中，"浮动layout滑动到顶部悬停效果"是一种常见的用户界面设计，它提供了优秀的用户体验，尤其是在浏览长列表或滚动内容时。这种效果通常应用于导航栏、工具栏或者搜索框等元素，使它们在用户滚动页面...
标题所说的"顶部浮动"、"头部浮动"、"标题浮动"以及"滚动浮动"都是指的这种效果。接下来，我们将深入探讨这个话题。 首先，让我们理解"分组Listview"的概念。分组Listview是指在ListView的基础上，增加了一个可以...
标题“导航始终浮动在浏览器顶部”所描述的是一个常见的网页设计技术，它的目的是使网站的导航菜单在用户滚动页面时始终保持在屏幕的顶部，这样可以方便用户随时访问各个页面链接，提升用户体验。这个效果通常通过...
"jQuery网页右侧浮动二维码返回顶部代码.zip"这个压缩包就提供了这样的功能实现，主要利用了jQuery库，具体包括以下几个关键知识点： 1. **jQuery库**：jQuery是一个高效、简洁的JavaScript库，它简化了HTML文档...