<!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>
分享到:
相关推荐
PHP实例开发源码—高仿花瓣网源码 php版.zip PHP实例开发源码—高仿花瓣网源码 php版.zip PHP实例开发源码—高仿花瓣网源码 php版.zip
高仿花瓣网源码简介 高仿花瓣网源码是基于thinksns进行开发的分享类网站源码。 Pinterest是最火爆、最受关注的图片 兴趣分享类网站。Pinterest名称由Pin(图钉) Interest(兴趣)组成,寓意为把自己感兴趣的东西...
仿花瓣、兴趣图谱,版本虽然不是最新的,但是保证可以用!大家可以下载看喜欢么!
高仿花瓣网源码是基于thinksns进行开发的分享类网站源码。Pinterest是最火爆、最受关注的图片+兴趣分享类网站。Pinterest名称由Pin(图钉)+Interest(兴趣)组成,寓意为把自己感兴趣的东西(图片)用图钉钉在钉板...
4.标签栏采集工具 5.分享音乐 6.专题功能 7.微群(2.8版) 8.积分兑换(2.8版) 9.搭配秀(2.8版) 10.基于thinksns,可以轻易的添加官方的应用 程序特点: 1.类似 Pinterest、美丽说的瀑布流布局、内容随...
仿花瓣网的图片以瀑布流效果展示。 效果案例:http://www.movie366.com/tuijian/today.html
仿花瓣的最新程序 包括采集 图库 花瓣有的 这里大部分都有 无bug
花瓣petal主题是一款瀑布流WordPress主题,主题清新简洁。瀑布流是今年流行的一种页面布局方式,...主题名称:petal_2.0仿花瓣瀑布流布局(瀑布流主题) 主题版本:2.0 主题作者:空杯 主题插件:推荐安装WP-PostViews
仿花瓣系统
该软件基于thinksns进行开发,高仿花瓣网分享网站。 Pinterest是最火爆、最受关注的图片 兴趣分享类网站。Pinterest名称由Pin(图钉) Interest(兴趣)组成,寓意为把自己感兴趣的东西(图片)用图钉钉在钉板...
jQuery花瓣网毛玻璃模糊背景代码是一款个性的网站背景图片毛玻璃模糊效果,借助jQuery不用PS就能达到模糊效果。
仿花瓣瀑布流模板 无限图片滚动 异步加载 jquery Masonry 方砖石布局插件制作无限滚动页面图片与内容无限加载
有需要的可以看看、
一个模仿花瓣的客户端。完成瀑布流展示,两侧侧滑菜单,复杂scrollview
花瓣网知美网源码仿Pinterest源码ThinkSNS 2.3商业版
花世界ThinkSNS仿Pinterest,仿花瓣,兴趣图谱分享系统
基于PHP的高仿花瓣网php版源码.zip
基于PHP的高仿花瓣网源码 php版.zip
主要介绍了jQuery+CSS3实现仿花瓣网固定顶部位置带悬浮效果的导航菜单,可实现页面向下滑动后导航栏横向悬浮并固定在顶部的功能,涉及jQuery事件响应及页面元素属性动态修改相关操作技巧,需要的朋友可以参考下