文档章节

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 代码片段

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

_小狼狗
2015/11/09
0
0
jQuery 的 Div 标签滚动条属性及判断垂直滚动条是否到达底部

转自:http://blog.163.com/liufupanhao@126/blog/static/1284651702010894509982/ 关于 jQuery 的 Div 标签的滚动条的概念,没有几个人能够完全、正确搞明白的。 我知道很多人不同意我的观点...

大漠胡杨
2014/08/01
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

没有更多内容

加载失败,请刷新页面

加载更多

js实现产生n个随机数,并且随机数之和是固定值

function getrandom(minnum , maxnum ,total,size){ var num = total; //定义整数 var length= size; //定义多个整数的数量 var numArr = []; while(length > 1){ var rnd = Math.floor(Mat......

开源昕昕
15分钟前
1
0
精选Spring Boot三十五道必知必会知识点!

Spring Boot 是微服务中最好的 Java 框架. 我们建议你能够成为一名 Spring Boot 的专家。本文精选了三十五个常见的Spring Boot知识点,祝你一臂之力! 问题一 Spring Boot、Spring MVC 和 Sp...

Java填坑之路
16分钟前
2
0
MyBatis学习笔记

相关文档 mybatis深入理解(一)之 # 与 $ 区别以及 sql 预编译 MyBatis 处理sql中的 大于,小于,大于等于,小于等于

OSC_fly
17分钟前
0
0
Gradle从不同地方复制文件到一个文件夹/打zip包

复制 task copySDK(type: Copy, dependsOn: [":fatJarTask"]) { delete JAR_NAME delete SDK_OUT_PATH delete "$ROOT_BUILD_PATH/$SDK_ZIP_NAME" into('/jniLibs') {......

SuShine
17分钟前
1
0
CentOS关闭占用端口,修改Apache默认端口,并重启Apache

查找并关闭进程 在Linux系统中可以使用lsof命令和kill命令,两个命令配合查找并关闭占用端口的进程 查看某一端口使用情况的命令: lsof -i:端口号 效果如下,PID即进程的ID 根据PID关闭进程,...

临江仙卜算子
24分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部