Jquery DIV滚动至浏览器顶部位置固定
获取元素(这里定位元素A)距离顶部的高度,接着设定scroll滚动的事件,比如超过那个高度,把A的位置设定为fixed,小于该高度,修改回relative。
方法一:
$(function() {
var elm = $('.nav');
var startPos = $(elm).offset().top;
$.event.add(window, "scroll", function() {
var p = $(window).scrollTop();
$(elm).css('position',((p) > startPos) ? 'fixed' : 'static');
$(elm).css('top',((p) > startPos) ? '0px' : '');
});
});
方法二:
$(function(){
//获取要定位元素距离浏览器顶部的距离
var navH = $(".nav").offset().top;
//滚动条事件
$(window).scroll(function(){
//获取滚动条的滑动距离
var scroH = $(this).scrollTop();
//滚动条的滑动距离大于等于定位元素距离浏览器顶部的距离,就固定,反之就不固定
if(scroH>=navH){
$(".nav").css({"position":"fixed","top":0});
}else if(scroH<navH){
$(".nav").css({"position":"static"});
}
})
})
例:
<html>
<head>
<title>位置固定(</title>
<script src="__COMS__/Jq/jquery-1.7.2.min.js"></script> <style type="text/css">
.fixed_div{
position:fixed;
left:200px;
bottom:20px;
width:400px;
}
</style>
<script type="text/javascript">
$(function(){
//获取要定位元素距离浏览器顶部的距离
var navH = $(".nav").offset().top; //滚动条事件
$(window).scroll(function(){
//获取滚动条的滑动距离
var scroH = $(this).scrollTop();
//滚动条的滑动距离大于等于定位元素距离浏览器顶部的距离,就固定,反之就不固定
if(scroH>=navH){
$(".nav").css({"position":"fixed","top":0});
}else if(scroH<navH){
$(".nav").css({"position":"static"});
}
})
})
</script>
</head>
<body>
<div class="top">top</div>
<p> </p>
<hr>
<div class="nav">topnav</div> <div class="fixed_div" style="border:1px solid #200888;">content, I'm content</div>
<div style="height:888px;"></div>
</body>
</html>
文章来自:http://blog.sina.com.cn/s/blog_3eba8f1c0101k94s.html
Jquery DIV滚动至浏览器顶部位置固定的更多相关文章
- Jquery DIV滚动至浏览器顶部后固定不动代码
$(function(){ //获取要定位元素距离浏览器顶部的距离 var navH = $(".win").offset().top; //滚动条事件 $(window).scr ...
- div滚动到页面顶端后固定住
<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title> ...
- 获取DIV与浏览器顶部相聚一定位置之后移动DIV
获取元素(这里定位元素A)距离顶部的高度,接着设定scroll滚动的事件,比如超过那个高度,把A的位置设定为fixed,小于该高度,修改回relative. 方法一: $(function() { ...
- Jquery实现相对浏览器位置固定、悬浮
<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></sc ...
- 滚动页面时DIV到达顶部时固定在顶部
本示例使用Javascript实现了滚动页面时,DIV到达顶部时固定在顶部.在IE下效果有点闪,效果网址:http://www.keleyi.com/keleyi/phtml/fixdiv.htm 下 ...
- jquery页面滚动,菜单固定到顶部
// 菜单固定 $(function(){ //获取要定位元素距离浏览器顶部的距离 var navH = $("#topp").offset().top; //滚动条事件 $(wi ...
- JS 实现DIV 滚动至顶部后固定
JS 实现DIV 滚动至顶部后固定 <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8" ...
- 设置一个div网页滚动时,使其固定在头部,当页面滚动到距离头部300px时,隐藏该div,另一个div在底部,此时显示;当页面滚动到起始位置时,头部div出现,底部div隐藏
设置一个div网页滚动时,使其固定在头部,当页面滚动到距离头部300px时,隐藏该div,另一个div在底部,此时显示: 当页面滚动到起始位置时,头部div出现,底部div隐藏 前端代码: <! ...
- 利用jquery制作滚动到指定位置触发动画
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>利用 ...
随机推荐
- springmvc的类型转换
一.springmvc的类型转换 (一)默认情况下,springmvc内置的类型转换器只能 将"yyyy/MM/dd"类型的字符串转换为Date类型的日期 情境一: 而现在我们无 ...
- ios页面过渡效果插件Kontext
效果体验:http://keleyi.com/keleyi/phtml/html5/28.htm 以下是代码: <!doctype html> <html> <head& ...
- [转]使用Jenkins搭建持续集成(CI)环境
转自:魔のkyo的工作室 首先从官网http://jenkins-ci.org/下载 Java Web Archive (.war) 例如我保存到 D:\jenkins\jenkins.war 运行J ...
- SharePoint 快捷获取列表栏内部名称
在列表设置页面点击浏览器书签获取列表字段内部名称,使用效果如下图: 如何使用: 修改浏览器上任意书签的url地址为以下代码,注意:代码中不能有换行符 javascript:(function(){va ...
- Linux常用命令:文件与目录
目录与路径 cd:切换目录 例如:cd ~willhua,则回到用户willhua的主文件夹 cd ~或者cd,则表示回到自己的的主文件夹 cd -,则表示回到上个目录 pwd:显示目前所在目录 ...
- 初识JAVA之OOP
有一段时间没发博客了,每次手打还是很累,但感觉很充实.. 最近发现很多初学者到了面向对象编程这个知识点时,不太清楚类是如何转化成为对象的,很是困扰,今天我在这里谈谈我的理解,大家一起来研究学习... ...
- iOS 直播-网速监控
iOS 直播-网速监控 CXNetworkSpeed.h // // CXNetworkSpeed.h // CXNetworkSpeedDemo // // Created by xubaoaich ...
- Java中的Atomic包
Atomic包的作用 方便程序员在多线程环境下,无锁的进行原子操作 Atomic包核心 Atomic包里的类基本都是使用Unsafe实现的包装类,核心操作是CAS原子操作: 关于CAS compare ...
- SqlServer--delete、truncate 、Drop删除表的区别
--删除表中的全部数据,自动编号不清零. --1.delete from Biao --删除表中的全部数据,自动编号清零. --2.truncate table Biao --truncate特点: ...
- Linux查看关机时间
在Linux系统中,如何查看系统什么时候执行了shutdown命令关闭服务器了呢? 方法1:使用 last -x|grep shutdown 查看shutdown的历史记录 [root@mylnx20 ...