嘉缘官方论坛

 找回密码
 注册会员

扫一扫,访问微社区

QQ登录

只需一步,快速开始

立即体验天翼云服务器(质量靠谱V3.6版本中需要设置的地方汇总点此领幸运券买阿里云优惠多
查看: 3166|回复: 4

[资源下载] 导航怎么跟随下拉。代码分享

[复制链接]
发表于 2013-9-18 17:07:20 | 显示全部楼层 |阅读模式
论坛上的这个跟随是写死的。CSS 它这个在顶部没关系。


[code brush:text;toolbar:false;].header_wrap{
    background:#488fce;/*导航背景*/
    display:block;
    position:fixed;
    _position:absolute;
    top:0;
    left:0;
    width:100%;
    z-index:10;
    box-shadow:0 1px 3px rgba(0,0,0,0.3);
}[/code]

其实这个很简单下面JS。任意位置使用。


[code brush:text;toolbar:false;]$(document).ready(function()
{   
    var nav=$("#wrapper"); //样式插入
    var headHeight=nav.height()+45; //根据自己的导航
    $(window).scroll(function()
    {
    if($(this).scrollTop()>headHeight)
    {
    nav.addClass("navFix");//插入navFix
    }
    else
    {
    nav.removeClass("navFix");
    }
    });
});[/code]
下面CSS。回复复制CSS


演示 http://www.zmdsjob.com/company/company.php?comid=66150


游客,如果您要查看本帖隐藏内容请回复
回复

使用道具 举报

495

主题

3158

帖子

20万

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
207527

社区居民新人进步

发表于 2013-9-18 17:38:41 | 显示全部楼层
360极速  往下拉闪的厉害,拉不下去
十一休了整整13天,嘉缘福利好,没办法
回复 支持 反对

使用道具 举报

11

主题

58

帖子

579

积分

商业客户-标准

积分
579
发表于 2013-9-20 15:39:07 | 显示全部楼层
看看怎么样
回复 支持 反对

使用道具 举报

1

主题

56

帖子

119

积分

禁止发言

积分
119
发表于 2013-10-31 20:24:37 | 显示全部楼层
石狮人才网谢谢楼主分享啊
回复 支持 反对

使用道具 举报

0

主题

6

帖子

43

积分

正式会员

积分
43
发表于 2013-11-3 13:38:38 | 显示全部楼层
太好了,我收下了
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册会员

本版积分规则

QQ|Archiver|手机版|小黑屋|嘉缘软件官网 ( 沪ICP备12042403号-2 )

GMT+8, 2024-3-29 10:22 , Processed in 0.048947 second(s), 23 queries .

Powered by Discuz! X3.4

Copyright © 2001-2021, Tencent Cloud.

快速回复 返回顶部 返回列表