$.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超出页面时就固定到顶部否则跟随页面滚动的更多相关文章

  1. 让div固定在顶部不随滚动条滚动

    让div固定在顶部不随滚动条滚动 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "h ...

  2. 让div固定在顶部不随滚动条滚动【转】

    让div固定在顶部不随滚动条滚动 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "h ...

  3. jquery实现导航栏跟随窗口滚动

    最近在制作一个模版的时候用到的一个jquery插件,当网站导航滚动到当前可见页面顶部时,固定在顶部并随窗口滚动,有很多的网站前台模版有有类似的效果. smohan.fixednav.js /* * 随 ...

  4. 刷新页面vuex数据不消失和不跳转页面

    先说点什么 vuex和路由拦截这一块捣鼓的有一段时间了,总算是爬出来了,特地来分享一下,首先声明没有什么基础介绍,用的是登录状态存储sessionStorage的方法!!! 进入正题 刷新 刷新相当与 ...

  5. 滚动页面时DIV到达顶部时固定在顶部

    本示例使用Javascript实现了滚动页面时,DIV到达顶部时固定在顶部.在IE下效果有点闪,效果网址:http://www.keleyi.com/keleyi/phtml/fixdiv.htm 下 ...

  6. 设置一个div网页滚动时,使其固定在头部,当页面滚动到距离头部300px时,隐藏该div,另一个div在底部,此时显示;当页面滚动到起始位置时,头部div出现,底部div隐藏

    设置一个div网页滚动时,使其固定在头部,当页面滚动到距离头部300px时,隐藏该div,另一个div在底部,此时显示: 当页面滚动到起始位置时,头部div出现,底部div隐藏 前端代码: <! ...

  7. Jquery关闭离开页面时提醒

    [导读] 离开页面提示多般是放到了发新闻或写日志的页面,我们在百度空间或QQ空间在我们未保存信息时如果离开页面都有提示了,下面我来介绍利用jquery的beforeunload来实现此方法. jque ...

  8. 使用yii的layout,加入<?php echo $content; ?>这句话时,它会自动在子页面上面添加一个div包裹

    使用yii的layout,加入<?php echo $content; ?>这句话时,它会自动在子页面上面添加一个div包裹,而且div的id命名为id=content,这个和已有id重复 ...

  9. jQuery实现发送验证码30s倒计时,且刷新页面时有效

    在这里讲一讲这个案例的实现思路吧(个人见解)..核心思想:为防止页面刷新时倒计时失效的解决方案是:当每次刷新一次页面时都执行一个函数 即下面讲到的 setStyle() 函数.这个函数会根据当前的 c ...

随机推荐

  1. 【枚举暴力】【UVA11464】 Even Parity

    传送门 Description 给你一个0/1矩阵,可以将矩阵中的0变成1,问最少经过多少此操作使得矩阵任意一元素四周的元素和为偶数. Input 第一行是一个整数T代表数据组数,每组数据包含以下内容 ...

  2. 在eclipse中安装html编辑器插件

    1.下载插件( 点击下载)                 解压后得到GEF-ALL-3.4.1.zip和tk.eclipse.plugin.htmleditor_2.2.0.jar   2.安装GE ...

  3. Block中的循环引用警告

  4. Ubuntu Android adb调试无法识别设备 -- List of devices attached ???????????? no permissions

    在Ubuntu下做Android开发, 使用adb devices调试的时候出现在面的错误: 这个问题之前就出现过的,突然就忘了,Mark一下.在网上找了一下,基本上是一些比较麻烦的办法,但是在我的记 ...

  5. SSO解决session共享的几种方案

    之前做项目遇到了这个sso系统,当时只是理解了一部分,今天偶尔发现一篇文章,觉得写的不错,增加了sso知识: 单点登录在现在的系统架构中广泛存在,他将多个子系统的认证体系打通,实现了一个入口多处使用, ...

  6. 隐藏Nginx版本号

    一般来说,黑客攻击服务器的首要步骤就是收集信息,比如说你的软件版本,这些将成为下一步有针对性攻击的依据.所以说一定程度的隐藏这些信息就显得非常有必要了,本文将简单介绍如何在网络上隐藏Nginx版本号以 ...

  7. SpringBoot打war包并部署到tomcat下运行

    一.修改pom.xml. 1.packaging改为war 2.build节点添加<finalName>你的项目名</finalName> 二.修改项目启动类,继承Spring ...

  8. wcf 服务创建,配置,测试

    一.WCF创建: 常规的创建WCF服务是通过SOAP传输的,很多网站开发人员想放弃使用XML而使用JSON,这个时候可以参照:http://www.cnblogs.com/zhili/p/WCFRes ...

  9. JAVA中3种将byte转换为String的方法

    HttpClient 类库中GetMethod类的getResponseBody方法返回的是byte[]类型,要操作起来不方便,我想把它转化成String类型. 查了网上的资料,有说法认为用这种方法比 ...

  10. 推荐15条MySQL改善经验,让系统更稳定

    1. 为查询缓存优化查询 像 NOW() 和 RAND() 或是其它的诸如此类的SQL函数都不会开启查询缓存,谨慎使用 2.EXPLAIN 我们的SELECT查询(可以查看执行的行数) 可以让我们找到 ...