Jquery当div超出页面时就固定到顶部否则跟随页面滚动
$.fn.smartFloat = function () {
var position = function (element) {
var top = element.position().top, pos = element.css("position");
$(window).scroll(function () {
var scrolls = $(this).scrollTop();
if (scrolls > top) {
if (window.XMLHttpRequest) {
element.css({
position: "fixed",
top: 0
});
} else {
element.css({
top: scrolls
});
}
} else {
element.css({
position: pos,
top: top
});
}
});
};
return $(this).each(function () {
position($(this));
});
}; $("#floatdiv").css("left", $("#rolltop").position().left - 1120).smartFloat();
<div id="rolltop">回到顶部</div>
<div id="floatdiv" style="position:absolute; top: 320px; width: 120px; height: 278px;background-color:#f00;"></div>
#rolltop {
margin-right: -430px;
position: fixed;
right: 45%;
top: 80%;
width: 25px;
background-color:#f00;
}
Jquery当div超出页面时就固定到顶部否则跟随页面滚动的更多相关文章
- 让div固定在顶部不随滚动条滚动
让div固定在顶部不随滚动条滚动 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "h ...
- 让div固定在顶部不随滚动条滚动【转】
让div固定在顶部不随滚动条滚动 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "h ...
- jquery实现导航栏跟随窗口滚动
最近在制作一个模版的时候用到的一个jquery插件,当网站导航滚动到当前可见页面顶部时,固定在顶部并随窗口滚动,有很多的网站前台模版有有类似的效果. smohan.fixednav.js /* * 随 ...
- 刷新页面vuex数据不消失和不跳转页面
先说点什么 vuex和路由拦截这一块捣鼓的有一段时间了,总算是爬出来了,特地来分享一下,首先声明没有什么基础介绍,用的是登录状态存储sessionStorage的方法!!! 进入正题 刷新 刷新相当与 ...
- 滚动页面时DIV到达顶部时固定在顶部
本示例使用Javascript实现了滚动页面时,DIV到达顶部时固定在顶部.在IE下效果有点闪,效果网址:http://www.keleyi.com/keleyi/phtml/fixdiv.htm 下 ...
- 设置一个div网页滚动时,使其固定在头部,当页面滚动到距离头部300px时,隐藏该div,另一个div在底部,此时显示;当页面滚动到起始位置时,头部div出现,底部div隐藏
设置一个div网页滚动时,使其固定在头部,当页面滚动到距离头部300px时,隐藏该div,另一个div在底部,此时显示: 当页面滚动到起始位置时,头部div出现,底部div隐藏 前端代码: <! ...
- Jquery关闭离开页面时提醒
[导读] 离开页面提示多般是放到了发新闻或写日志的页面,我们在百度空间或QQ空间在我们未保存信息时如果离开页面都有提示了,下面我来介绍利用jquery的beforeunload来实现此方法. jque ...
- 使用yii的layout,加入<?php echo $content; ?>这句话时,它会自动在子页面上面添加一个div包裹
使用yii的layout,加入<?php echo $content; ?>这句话时,它会自动在子页面上面添加一个div包裹,而且div的id命名为id=content,这个和已有id重复 ...
- jQuery实现发送验证码30s倒计时,且刷新页面时有效
在这里讲一讲这个案例的实现思路吧(个人见解)..核心思想:为防止页面刷新时倒计时失效的解决方案是:当每次刷新一次页面时都执行一个函数 即下面讲到的 setStyle() 函数.这个函数会根据当前的 c ...
随机推荐
- angularJS入门小Demo2 【包含不用数据库而用data.json格式响应前台的ajax请求方式测试】
事件绑定: <html> <head> <title>angularJS入门小demo-5 事件指令</title> <script src=&q ...
- linux上修改系统默认语言设置
locale命令设置语言环境(临时修改) [keysystem@localhost ~]$ date Fri Feb :: CST [keysystem@localhost ~]$ locale LA ...
- selenium - webdriver常用方法
先定位元素,定位元素后,需要对元素进行后续操作,单击按钮/输入文本,等等. from selenium import webdriver driver = webdriver.Chrome() dri ...
- bzoj 1189 [HNOI2007]紧急疏散evacuate 二分+网络流
[HNOI2007]紧急疏散evacuate Time Limit: 10 Sec Memory Limit: 128 MBSubmit: 3626 Solved: 1059[Submit][St ...
- bzoj 3580 冒泡排序 乱搞+思维
冒泡排序 Time Limit: 15 Sec Memory Limit: 256 MBSubmit: 243 Solved: 108[Submit][Status][Discuss] Descr ...
- HDU2686 费用流 模板
Matrix Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Subm ...
- window10下的solr6.1.0入门笔记之---安装部署
1.安装部署java1.6+ ,确保jre安装[安装步骤略] 安装后的环境为jdk1.8+ jre1.8+ 2.安装ant 下载:官网=>http://ant.apache.org/=> ...
- 51Nod 1049最大子段和 | 模板
Input示例 6 -2 11 -4 13 -5 -2 Output示例 20 1.最大子段和模板 #include "bits/stdc++.h" using namespace ...
- [Luogu 1168] 中位数
中位数可以转化为区间第k大问题,当然是选择Treap实现名次树了啊.(笑) 功能十分简单的Treap即能满足需求--只需要插入与查找第大的功能. 插入第i个数时,如果i是奇数,随即询问当前排名第(i+ ...
- Tomcat报错:Failed to start component [StandardEngine[Catalina].StandardHost[localhost].StandardContext[/JFreeChartTest]]
最好把项目移除,然后在tomcat的webapps发布路径下也把项目文件删掉,重新部署就好了,原因是可能在tomcat的remove覆盖中以前的文件有所保留导致冲突,亲测有效