jquery的固定定位效果
另外针对跳转到固定位置,很多处理是通过锚点实现,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的固定定位效果的更多相关文章
- Bootstrap 固定定位(Affix)
来自:慕课网 http://www.imooc.com/code/5396 Affix 效果常见的有以下三种: ☑ 顶部固定 ☑ 侧边栏固定 ☑ 底部固定 固定定位--声明式触发固定定位 Affix ...
- 理解CSS相对定位和固定定位
× 目录 [1]相对定位 [2]固定定位 前面的话 一般地,说起定位元素是指position不为static的元素,包括relative.absolute和fixed.前面已经详细介绍过absolut ...
- position之fixed固定定位、absolute绝对定位和relative相对定位
什么是层模型? 什么是层布局模型?层布局模型就像是图像软件PhotoShop中非常流行的图层编辑功能一样,每个图层能够精确定位操作,但在网页设计领域,由于网页大小的活动性,层布局没能受到热捧.但是在网 ...
- 解决ie6下不支持fix属性,模拟固定定位
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...
- JavaScript Table行定位效果
作者:cloudgamer 时间: 2009-09-17 文档类型:原创 来自:蓝色理想 第 1 页 JavaScript Table行定位效果 [1] 第 2 页 JavaScript Table行 ...
- input固定定位后,当input框获取到焦点时,会离开手机软键盘的解决方法
前些天做页面时候遇到这样一个问题,将input框用position:fixed固定定位在最底部的时候,当Input获取焦点的时候,input框离开了手机软键盘,而不是吸附在软键盘上,效果如下图: 找了 ...
- 【CSS3】---层模型position之fixed固定定位、absolute绝对定位和relative相对定位
什么是层模型? 什么是层布局模型?层布局模型就像是图像软件PhotoShop中非常流行的图层编辑功能一样,每个图层能够精确定位操作,但在网页设计领域,由于网页大小的活动性,层布局没能受到热捧.但是在网 ...
- JS仿淘宝详情页菜单条智能定位效果
类似于淘宝详情页菜单条智能定位 对于每个人来说并不陌生!如下截图所示:红色框的那部分! 基本原理: 是用JS侦听滚动事件,当页面的滚动距离(页面滚动的高度)大于或者等于 "对象"( ...
- 层模型--固定定位(position:fixed)
fixed:表示固定定位,与absolute定位类型类似,但它的相对移动的坐标是视图(屏幕内的网页窗口)本身. 由于视图本身是固定的,它不会随浏览器窗口的滚动条滚动而变化,除非你在屏幕中移动浏览器窗口 ...
随机推荐
- Ubuntu12.04安装Chrome浏览器,并添加到左侧的启动栏
在google官网下载google chrome deb包,有32位和64位之分: 怎么判断系统是32位还是64位的,可以用以下代码: ; int *p = &a; printf(" ...
- Cscope的使用(领略Vim + Cscope的强大魅力)
文章出处:http://blog.csdn.net/dengxiayehu/article/details/6330200 Cscope的使用(领略Vim + Cscope的强大魅力) 1.Cscop ...
- linux的less命令
less 在查看之前不会加载整个文件.可以尝试使用 less 和 vi 打开一个很大的文件,你就会看到它们之间在速度上的区别. 在 less 中导航命令类似于 vi.本文中将介绍一些导航命令以及使用 ...
- div section article区分--20150227
div section article ,语义是从无到有,逐渐增强的.div 无任何语义,仅仅用作样式化或者脚本化的钩子(hook),对于一段主题性的内容,则就适用 section,而假如这段内容可以 ...
- LeetCode 最长连续递增序列
给定一个未经排序的整数数组,找到最长且连续的的递增序列. 示例 1: 输入: [1,3,5,4,7] 输出: 3 解释: 最长连续递增序列是 [1,3,5], 长度为3. 尽管 [1,3,5,7] 也 ...
- Go统计键盘输入随机字母的个数
package main import "fmt" //通过键盘输入20个小写字母,统计个数 func main(){ //通过键盘器获取字符 var arr [20]byte f ...
- springboot 修炼之路
网上无意中发现一份关于springboot的教程说明,说的很详细,大家可以参考.具体地址:http://www.spring4all.com/article/246
- CentOS6.5卸载openJDK和安装Sun JDK
CentOS6.5卸载openJDK和安装Sun JDK 最近业务需要,新安装了CentOS6.5系统,在配置tomcat的时候,总是报错找不到jdk中的java.研究了半天,发现应该是openJDK ...
- perl的bareword
perl的bareword可能被认为:label . 句柄 .函数 . 普通字符串. 上下文不同,解释器有歧义. 最好用 use strict; use warning;
- python--线程的其他方法
一 . current_thread的用法 import threading import time from threading import Thread, current_thread def ...