文档章节

jQuery 判断滚动条(类似与淘宝中的搜索框那样的效果)

kenneth5530
 kenneth5530
发布于 2014/06/29 16:19
字数 272
阅读 30
收藏 0
$(window).resize(function(){
    if($(window).width()<1150){     //浏览器宽度小于155时
        $("#div1").css({
                "position":"absolute"           //改变样式
            });
    }else{
        $("#div1").css({
            "position":"fixed",     //改变样式
        });
    }
});


$(window).scroll(function(){
    if($(window).scrollTop()>90){    //垂直滚动条钓offset 大于90时。
        $("#div1").css({
            "top":"0",       //修改相关div样式
        });
    }else{
        $(".left-nav").css({
            "top":"92px",     //修改相关div样式
        });
    }
});

类似与淘宝的导航固定
<!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 src="jquery%201.11.1/jquery-1.11.1.min.js"language="javascript" type="text/javascript"></script>
    <style>
        *{
            margin:0px;
            padding:0px;
        }
        .nav{
            background:#000000;
            height:57px;
            line-height:57px;
            color:#ffffff;
            text-align:center;
            font-family:"微软雅黑";
            font-size:30px;
        }
        .fixedNav{
            position:fixed;
            top:0px;
            left:0px;
            width:100%;
            z-index:100000;
            /*IE6就要加下面两行代码*/
                /*position:absolute;*/
                /*_top:expression(eval(document.documentElement.scrollTop));*/
        }
    </style>
</head>
<body>
<div class="header" style="background:#CCCC00;height:100px;"></div>
<div class="nav">
    <p>类似与淘宝的导航固定</p>
</div>
<div class="content" style="background:#0099FF; height:2000px;"></div>
<script type="text/javascript">
    $(function(){
        $(window).scroll(function() {
            if($(window).scrollTop()>=100){
                $(".nav").addClass("fixedNav");
             }else{
                $(".nav").removeClass("fixedNav");
            }
        });
    });
</script>
</body>
</html>


© 著作权归作者所有

共有 人打赏支持
kenneth5530
粉丝 1
博文 18
码字总数 6639
作品 0
成都
程序员
私信 提问
jQuery对表单、表格的操作及更多的应用

jQuery对表单、表格的操作及更多的应用 1 表单应用 一个表单有3个基本组成部分。 (1) 表单标签:包含处理表单数据所用的服务器端应用程序URL以及数据提交到服务器的方法 (2) 表单域:包含文本...

zhangda89
2011/10/07
0
0
12 个必要的 jQuery 表单插件

Web表单是网站中很常见的Web组件,你用它来收集数据,用户的详细信息等。然而,现有的表单限制很多,功能比较简单,尽管有 HTML5 ,不幸的是,并非所有浏览器都支持它,所以现在我们可以使用...

红薯
2012/03/28
5.7K
8
7 款灵巧实用的 CSS3 和 jQuery 插件工具

作为WEB开发前端开发者,大部分应该对jQuery比较熟悉,对免费开源的jQuery也用的非常多。但是随着CSS3标准的诞生和发展,很多jQuery插件也都纷纷应用了CSS3新标准,也因此让插件有更好的展示...

yykj
2012/12/03
3.7K
7
19个带示例的jQuery滚动条插件

1、NiceScroll:可用于桌面、移动与触摸设备的jQuery滚动插件 NiceScroll是一个jQuery插件(since 1.5),它有着类似于ios/移动设备的样式。它支持Div、iFrame、一个body的滚动条效果。适用于...

彭博
2012/11/27
2K
0
19个带示例的jQuery滚动条插件

1、NiceScroll:可用于桌面、移动与触摸设备的jQuery滚动插件 NiceScroll是一个jQuery插件(since 1.5),它有着类似于ios/移动设备的样式。它支持Div、iFrame、一个body的滚动条效果。适用于...

彭博
2012/07/25
51K
14

没有更多内容

加载失败,请刷新页面

加载更多

string类回顾

writeademo
5分钟前
0
0
在DataWorks中实现指定UDF只能被指定账户访问

在DataWorks中实现指定资源被指定账户访问 背景 之前写过一篇文章是关于“DataWorks和MaxCompute内部权限体系的区别”有兴趣的朋友可以点击阅读查看详情。但是还是有些同学会问,我如何在Dat...

阿里云云栖社区
6分钟前
0
0
MaxCompute安全管理指南-案例篇

通过《MaxCompute安全管理-基础篇》了解到MaxCompute和DataWorks的相关安全模型、两个产品安全方面的关联,以及各种安全操作后,本篇主要给出一些安全管理案例,给安全管理的成员作为参考。 ...

阿里云官方博客
9分钟前
0
0
Spring Cloud 中使用Feign解决参数注解无法继承的问题

Spring Cloud 中使用Feign解决参数注解无法继承的问题 在使用Feign的时候,通常先写一个接口类,然后再写实现类,根据官网的例子接下来编写一个简单的Feign的请求例子 @FeignClient("spring...

不学无数的程序员
10分钟前
0
0
springboot kafka读写

依赖 <dependency> <groupId>org.springframework.kafka</groupId> <artifactId>spring-kafka</artifactId> <version>1.1.1.RELEASE</version></dependency> 配置 #=======......

张欢19933
16分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部