获取元素(这里定位元素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滚动至浏览器顶部位置固定的更多相关文章

  1. Jquery DIV滚动至浏览器顶部后固定不动代码

    $(function(){ //获取要定位元素距离浏览器顶部的距离 var navH = $(".win").offset().top; //滚动条事件 $(window).scr ...

  2. div滚动到页面顶端后固定住

    <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title> ...

  3. 获取DIV与浏览器顶部相聚一定位置之后移动DIV

    获取元素(这里定位元素A)距离顶部的高度,接着设定scroll滚动的事件,比如超过那个高度,把A的位置设定为fixed,小于该高度,修改回relative. 方法一: $(function() {  ...

  4. Jquery实现相对浏览器位置固定、悬浮

      <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></sc ...

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

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

  6. jquery页面滚动,菜单固定到顶部

    // 菜单固定 $(function(){ //获取要定位元素距离浏览器顶部的距离 var navH = $("#topp").offset().top; //滚动条事件 $(wi ...

  7. JS 实现DIV 滚动至顶部后固定

    JS 实现DIV 滚动至顶部后固定 <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8" ...

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

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

  9. 利用jquery制作滚动到指定位置触发动画

    <!DOCTYPE html><html><head> <meta charset="utf-8"> <title>利用 ...

随机推荐

  1. spring aop注解配置

    spring aop是面向切面编程,使用了动态代理的技术,这样可以使业务逻辑的代码不掺入其他乱七八糟的代码 可以在切面上实现合法性校验.权限检验.日志记录... spring aop 用的多的有两种配 ...

  2. [Cordova] 手机网页里的1px

    [Cordova] 手机网页里的1px 1px的显示 Cordova让开发人员可以使用HTML页面,来开发APP的显示内容.但是在手机上,HTML页面里定义的1px,并不是直接对应到手机屏幕的一个像素 ...

  3. ember.js里的实用方法

    一款基于jQuery的插件,以下是关于数组的一些方法 var arr = ['Wang', 'Jason', '444128852@qq.com', 'i2cao.xyz', 'ubuntuvim.x ...

  4. jquery-懒加载技术(简称lazyload)

    第一:lazyLoad简介及作用 网站性能优化的插件,提高用户体验. 页面如果有很多图片的时候,当你滚动到相应的行时,当前行的图片才即时加载的,这样子的话页面在打开只加可视区域的图片,而其它隐藏的图片 ...

  5. HTML5学习笔记二 HTML基础

    一.HTML 标题 HTML 标题(Heading)是通过<h1> - <h6> 标签来定义的. <h1>标题一</h1> <h2>标题二& ...

  6. 配置nginx支持ssl服务器—HTTPS

    下文摘自: http://docs.bigbluebutton.org/install/install.html     Configuring HTTPS on BigBlueButtonAncho ...

  7. AJAX初探,XMLHttpRequest介绍

    AJAX初探,XMLHttpRequest介绍 AJAX      AJAX = Asynchronous JavaScript and XML. 异步的JavaScript和XML.      AJ ...

  8. 使用FragmentTabHost+TabLayout+ViewPager实现双层嵌套Tab

    大多数应用程序都会在底部使用3~5个Tab对应用程序的主要功能进行划分,对于一些信息量非常大的应用程序,还需要在每个Tab下继续划分子Tab对信息进行分类显示. 本文实现采用FragmentTabHo ...

  9. 敏捷遇上UML——软创基地马年大会(深圳站 2014-3-15)

    邀请函: 尊敬的阁下: 我们将在深圳为您奉献高端知识大餐,当敏捷遇上UML,会发生怎样的化学作用呢?首席专家张老师将会为您分享需求分析及软件设计方面的最佳实践,帮助您掌握敏捷.UML及两者相结合的实战 ...

  10. There is insufficient system memory to run this query 错误

    服务器环境大致情况如下: 操作系统:   Microsoft Windows Server 2003 R2 Enterprise Edition Service Pack 2 数据库  :   Mic ...