文档章节

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
jquery form元素操作

jQuery获取Select选择的Text和Value: 语法解释: 1. $("#select_id").change(function(){//code...}); //为Select添加事件,当选择其中一项时触发 2. var checkText=$("#select_id").find("o......

remainvitality
2013/10/25
0
0
jQuery教程:教你打造20个超级酷的视觉效果

我们都爱jQuery,因为基于它我们可以做出各种奇特的效果。下面这些特效教程都基于不同的主题,它们都包括一些很酷的视觉效果。按照下列步骤来进行重新设计,或按照这些使用的步骤用到你自己的...

ch2004
2012/04/03
0
0
jQuery页面滚动图片等元素动态加载实现

一、关于滚动显屏加载 常常会有这样子的页面,内容很丰富,页面很长,图片较多。比如说光棍节很疯狂的淘宝商城页面。 或者是前段时间写血本买了个高档耳机的京东商城页面,或者是新浪微博之类...

凯文加内特
2014/03/18
0
0
非常实用的12 个 jQuery 代码片段

jQuery是一个非常流行而且实用的JavaScript前端框架,本文并不是介绍jQuery的特效动画,而是分享一些平时积累的12个jQuery实用代码片段,希望对你有所帮助。 1. 导航菜单背景切换效果 在项目...

_小狼狗
2015/11/09
0
0

没有更多内容

加载失败,请刷新页面

加载更多

数据集可视化---张量场的可视表示

中国龙-扬科
15分钟前
1
0
JavaScript创建对象方法实例小结

本文实例讲述了JavaScript创建对象方法。分享给大家供大家参考,具体如下: 最简单的方式就是创建一个Object对象,并为其添加属性和方法。 //示例代码var person=new Object()person.name=...

peakedness丶
17分钟前
1
0
GO 读写锁实现原理剖析

前言 TODO:简单说明读写锁用法及规则。 读写锁数据结构 类型定义 TODO: 源码中数据结构 TODO:讲解每个成员作用 接口定义 获取写锁 释放写锁 获取读锁 释放读锁 场景分析 写锁阻止写锁 TODO...

恋恋美食
21分钟前
1
0
Java核心(二)深入理解线程池ThreadPool

本文你将获得以下信息: 线程池源码解读 线程池执行流程分析 带返回值的线程池实现 延迟线程池实现 为了方便读者理解,本文会由浅入深,先从线程池的使用开始再延伸到源码解读和源码分析等高...

王磊的博客
22分钟前
2
0
web项目中的乱码问题原理分析

Java web开发过程经常遇到乱码,本篇我们探讨一下乱码产生的原因与解决思路。 一次完整的Web请求会有4次编解码转换,如下所示。 第一次:客户端(通常为浏览器)将字符转换成TCP字节流发向服...

fame_yao
26分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部