今天做了个固定定位的效果。比如对导航需要进行固定定位效果：
当没有滚动到导航下面，导航正常显示。
当滚动到导航下面，导航就固定到顶部。
这个效果使用了jquery的方法实现，具体思路为：
1)首先获取导航相对与文档的偏移量top（使用offset().top）
2)定义滚动事件，获取滚动元素的scrollTop，对scrollTop及top进行比较
3)若scrollTop超过了top，则对导航进行position:fixed设置，若没有超过，则对导航设置默认的position:static.

另外针对跳转到固定位置，很多处理是通过锚点实现，location.href=#id或者location.hash=#id这种形式实现。其实也可以利用jquery的offset().top来达到同样的效果，具体可以看下面代码中针对固定定位元素的click事件的处理。

这里写了个demo：

<!doctype html>

<html>

<head>

<meta charset="utf8">

<title>jquery固定定位demo</title>

<style type="text/css">

    body{margin:;padding-top:100px;background-color:#fff;}

    .content{width:500px;height:300px;background-color:#ccc;}

    h2{padding:10px;background-color:#000;color:#fff;}

</style>

<script type="text/javascript" src="jquery.js"></script>

</head>

<body>

    <div class="floor">

        <h2 class="fixed">第一楼</h2>

        <div class="content">ddddd</div>

    </div>

    <div class="floor">

        <h2>第二楼</h2>

        <div class="content">ffff</div>

    </div>

    <div class="floor">

        <h2>第三楼</h2>

        <div class="content">sdfsf</div>

    </div>

    <div class="floor">

        <h2>第四楼</h2>

        <div class="content">aaaaaa</div>

    </div>

    <script type="text/javascript">

        var fixed = $(".fixed");

        var position = fixed.css("position");

        var offsetTop = fixed.offset().top;

        //定义滚动事件，判断scrollTop及offsetTop

        $(window).scroll(function(){

            var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;

            if(scrollTop > offsetTop){

                fixed.css({"position":"fixed","width":"100%","top":"0"});

            }else{

                fixed.removeAttr("style").css({"position":position,"width":"100%"});

                

            }

        });

        //点击固定元素，回到最初的位置

        fixed.bind("click",function(){

            if($(this).css("position") == "fixed"){

                $(this).removeAttr("style").css({"position":"static","width":"100%"});    

                $(document).scrollTop(offsetTop);

            }

            

        });

    

    </script>

</body>

</html>

jquery的固定定位效果的更多相关文章

  1. Bootstrap 固定定位（Affix）

    来自:慕课网 http://www.imooc.com/code/5396 Affix 效果常见的有以下三种: ☑ 顶部固定 ☑ 侧边栏固定 ☑ 底部固定 固定定位--声明式触发固定定位 Affix ...

  2. 理解CSS相对定位和固定定位

    × 目录 [1]相对定位 [2]固定定位 前面的话 一般地,说起定位元素是指position不为static的元素,包括relative.absolute和fixed.前面已经详细介绍过absolut ...

  3. position之fixed固定定位、absolute绝对定位和relative相对定位

    什么是层模型? 什么是层布局模型?层布局模型就像是图像软件PhotoShop中非常流行的图层编辑功能一样,每个图层能够精确定位操作,但在网页设计领域,由于网页大小的活动性,层布局没能受到热捧.但是在网 ...

  4. 解决ie6下不支持fix属性，模拟固定定位

    <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...

  5. JavaScript Table行定位效果

    作者:cloudgamer 时间: 2009-09-17 文档类型:原创 来自:蓝色理想 第 1 页 JavaScript Table行定位效果 [1] 第 2 页 JavaScript Table行 ...

  6. input固定定位后，当input框获取到焦点时，会离开手机软键盘的解决方法

    前些天做页面时候遇到这样一个问题,将input框用position:fixed固定定位在最底部的时候,当Input获取焦点的时候,input框离开了手机软键盘,而不是吸附在软键盘上,效果如下图: 找了 ...

  7. 【CSS3】---层模型position之fixed固定定位、absolute绝对定位和relative相对定位

    什么是层模型? 什么是层布局模型?层布局模型就像是图像软件PhotoShop中非常流行的图层编辑功能一样,每个图层能够精确定位操作,但在网页设计领域,由于网页大小的活动性,层布局没能受到热捧.但是在网 ...

  8. JS仿淘宝详情页菜单条智能定位效果

    类似于淘宝详情页菜单条智能定位 对于每个人来说并不陌生!如下截图所示:红色框的那部分! 基本原理: 是用JS侦听滚动事件,当页面的滚动距离(页面滚动的高度)大于或者等于 "对象"( ...

  9. 层模型--固定定位(position:fixed)

    fixed:表示固定定位,与absolute定位类型类似,但它的相对移动的坐标是视图(屏幕内的网页窗口)本身. 由于视图本身是固定的,它不会随浏览器窗口的滚动条滚动而变化,除非你在屏幕中移动浏览器窗口 ...

随机推荐

  1. Bootstrap历练实例：危险样式按钮

    <!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content=& ...

  2. shell脚本，tee小工具的用法。

    解释: tee是个工具 , 它的作用就是把标准输出,复制一份,扔文件里 ,原标准输出还输出,-a就相当于 >> 追加到文件里的意思.  不加就是 > 重定向到文件里去.

  3. HTML5开发手机应用--viewport的作用--20150216

    在用HTML5开发手机应用或手机网页时,<head>部分总会有如下一段代码,这段代码到底什么意思呢.在网上,大家会得到很多答案.我从网上搜集了部分介绍,整理一下,以留备用. <met ...

  4. Linux rm删除文件未释放空间问题分析

    问题描述: 在自己的虚拟机上做实验时出现空间不足情况,检查发现之前的kafka集群测试日志在几天写了 25G,于是进入 /data/kafka01/logs 目录执行 “rm -rf *” 删除所有测 ...

  5. 开启和连接mysql服务器（win10为例）

    1.windows图标右键,选择“计算机管理”: 2.展开左边的“ 服务和应用程序” 选项,点击“服务",找到 MySQL 服务器,点击左侧的 "启动",即可完成 MyS ...

  6. （43）zabbix报警媒介介绍

    zabbix触发器到了要发送通知的情况下,需要一个中间介质来接收并传递它的消息给运维们,以往用nagios,通常用脚本发送邮件或者发送飞信来达到报警.这个脚本实际上就是一个媒介了. zabbix有如下 ...

  7. day23 03 组合的例子

    day23 03 组合的例子 一.用到组合的方式,编写一个圆环,并能够计算出它的周长和面积 from math import pi # 从内置函数里面导入pi # 先定义一个圆类 class Circ ...

  8. [转]Makefile中的wildcard/notdir/patsubst

    1.wildcard : 扩展通配符 2.notdir : 去除路径 3.patsubst :替换通配符 例子:建立一个测试目录,在测试目录下建立一个名为sub的子目录$ mkdir test$ cd ...

  9. ASP.NET Web Application中使用链接文件

    最近重构一个内部的平台系统,作为一个平台,其下有几个子系统,每个子系统有自己的网站系统.而每个网站使用的是统一的风格,统一的验证机制,反馈系统,等等.所以,为了避免几个子系统中重复出现相同的资源或文件 ...

  10. NYOJ 745 首尾相连数组的最大子数组和

    首尾相连数组的最大子数组和 时间限制:1000 ms  |  内存限制:65535 KB 难度:4   描述 给定一个由N个整数元素组成的数组arr,数组中有正数也有负数,这个数组不是一般的数组,其首 ...