仿花瓣网的自动悬浮导航效果

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:100%;

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;

}

$(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");

}

});

})

花瓣网

关注
最新
最热
视频
家居
旅行

1

2

3

4

5

6

7

8

1

2

3

4

5

6

7

8

刚进入网页导航栏是固定位置的

当拖动的高度超过限定高度之后导航栏变成悬浮在顶部

仿花瓣网html模板,仿花瓣网的自动悬浮导航效果 jquery相关推荐

HTML CSS游戏官网网页模板仿绝地求生吃鸡游戏网站大学生游戏介绍网站毕业设计 DW游戏主题网页模板下载
0258资源网正版模板emlog资源网/娱乐网模板
简介: emlog程序安装即可,程序最好是emlog5.3 模板当初花了500大洋定制的,感谢@0258分享,喜欢的赶快下载,有什么问题评论区交流. 网盘下载地址: http://kekewl.org ...
HTML5期末大作业：直播网站设计——仿在线媒体歪秀直播官网模板html源码(11个页面) HTML+CSS+JavaScript 期末作业HTML代码
HTML5期末大作业:直播网站设计--仿在线媒体歪秀直播官网模板html源码(11个页面) HTML+CSS+JavaScript 期末作业HTML代码临近期末, 你还在为HTML网页设计结课作业, ...
苹果cms V10模板仿特视网自适应模板
简介: 苹果cms V10模板仿特视网自适应模板网盘下载地址: http://kekewangLuo.net/rzCwZYX4pJO0 图片:
苹果cms V10模板仿优酷网PC模板+wap模板
介绍: 苹果cms V10模板仿优酷网PC模板+wap模板网盘下载地址: http://kekewangLuo.net/OuZ98B55Sin0 图片:
全新仿DS网首页模板个人自动发卡，自动发货安装教程及其源码下载
全新仿DS网首页模板增加首页弹窗广告修复部分bug修复支付BUG 访问域名/install 点击安装后台地址域名/admin 初始账号admin 密码123456 增加首页弹窗广告修复部分 ...
漂亮的仿大婶娱乐网模板娱乐资源网整站源码 laysns内核
介绍: 漂亮的laysns内核仿大婶娱乐网模板娱乐资源网整站源码打包,PHP+Mysql 网盘下载地址: https://zijiewangpan.com/AzKGCYOfeiZ 图片:
HTML5期末大作业：仿阴阳师游戏网站设计——仿阴阳师游戏官网首页(1页) 学生动手游页设计模板下载网游大学生HTML网页制作作品简单游戏网页设计成品 dreamweaver学生网站模板
HTML5期末大作业:仿阴阳师游戏网站设计--仿阴阳师游戏官网首页(1页) 学生动手游页设计模板下载网游大学生HTML网页制作作品简单游戏网页设计成品 dreamweaver学生网站模板常见网页 ...
帝国CMS仿《手艺活》DIY手工制作网源码/92kaifa仿手艺活自适应手机版模板
帝国CMS仿<手艺活>DIY手工制作网源码/92kaifa仿手艺活自适应手机版模板 ☑️ 编号:ym433 ☑️ 品牌:帝国CMS ☑️ 语言:php ☑️ 大小:4GB ☑️ 类型:DI ...

仿花瓣网html模板,仿花瓣网的自动悬浮导航效果 jquery

花瓣网

1

2

3

4

5

6

7

8

1

2

3

4

5

6

7

8

仿花瓣网html模板,仿花瓣网的自动悬浮导航效果 jquery相关推荐

最新文章

热门文章