$.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. SpringMVC源码解析-DispatcherServlet启动流程和初始化

    在使用springmvc框架,会在web.xml文件配置一个DispatcherServlet,这正是web容器开始初始化,同时会在建立自己的上下文来持有SpringMVC的bean对象. 先从Dis ...

  2. FreeRTOS - 任务使用注意

    如果使用xTaskCreate() 创建任务,任务栈使用的是FreeRTOS heap

  3. 链表系列 - [LeetCode] 链表的交错重排L1,Ln,L2,Ln-1 ....

    其实一开始并没有想到时间上O(n)的方法,想到了也是空间复杂度是O(n)的(需要用到栈或者递归):链表分两段,用栈记录第一段的遍历过程. 后来经提示想到了,可以将第二段链表逆序.从而不需要额外的辅助空 ...

  4. zoj 2006 Glass Beads

    Glass Beadshttp://acm.zju.edu.cn/onlinejudge/showProblem.do?problemId=1006 Time Limit: 2 Seconds     ...

  5. 2050年这些职业将逐渐被AI(人工智能)取代

    耳熟能详的人工智能   深蓝Deep Blue是美国IBM公司生产的一台超级国际象棋电脑,重1270公斤,有32个大脑(微处理器),每秒钟可以计算2亿步."深蓝”输入了一百多年来优秀棋手的对 ...

  6. mvc BundleConfig实现对Css、Js压缩打包加载

    Bundle不是.net Framework框架中的一员,使用Bundle首先要先添加引用,如下: nuget包管理--程序包管理控制台--Install-Package Microsoft.AspN ...

  7. select + 回调 + 事件循环

    #1. epoll并不代表一定比select好 # 在并发高的情况下,连接活跃度不是很高, epoll比select # 并发性不高,同时连接很活跃, select比epoll好 #通过非阻塞io实现 ...

  8. 【bzoj1593-预定旅馆】线段树维护连续区间

    题解: 这题非常经典啊似乎..经典模型要记住啊.. 对于每个节点维护该区间里的最大的连续区间,然后我们就可以logn递归找最前面的一段. 那就维护mx(无限制),lmx(必须从左边开始),rmx(必须 ...

  9. 【HDU】6148 Valley Numer 数位DP

    [算法]数位DP [题意]定义V-number为从左到看单位数字未出现先递增后递减现象的数字,求0~N中满足条件的数字个数.T<=200,lenth(n)<=100 [题解]百度之星201 ...

  10. Spring MVC 与 CORS

    1. CORS 简介 同源策略(same origin policy)是浏览器安全的基石.在同源策略的限制下,非同源的网站之间不能发送 ajax 请求的. 为了解决这个问题,w3c 提出了跨源资源共享 ...