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

方法一:

  1. $(function() {
  2. var elm = $('.nav');
  3. var startPos = $(elm).offset().top;
  4. $.event.add(window, "scroll", function() {
  5. var p = $(window).scrollTop();
  6. $(elm).css('position',((p) > startPos) ? 'fixed' : 'static');
  7. $(elm).css('top',((p) > startPos) ? '0px' : '');
  8. });
  9. });

方法二:

  1. $(function(){
  2. //获取要定位元素距离浏览器顶部的距离
  3. var navH = $(".nav").offset().top;
  4.  
  5. //滚动条事件
  6. $(window).scroll(function(){
  7. //获取滚动条的滑动距离
  8. var scroH = $(this).scrollTop();
  9. //滚动条的滑动距离大于等于定位元素距离浏览器顶部的距离,就固定,反之就不固定
  10. if(scroH>=navH){
  11. $(".nav").css({"position":"fixed","top":0});
  12. }else if(scroHnavH){
  13. $(".nav").css({"position":"static"});
  14. }
  15. })
  16. })

例:

  1. html>
  2. head>
  3. title>位置固定(</title>
  4. script src="__COMS__/Jq/jquery-1.7.2.min.js"></script>
  5.  
  6. style type="text/css">
  7. .fixed_div{
  8. position:fixed;
  9. left:200px;
  10. bottom:20px;
  11. width:400px;
  12. }
  13. </style>
  14. script type="text/javascript">
  15. $(function(){
  16. //获取要定位元素距离浏览器顶部的距离
  17. var navH = $(".nav").offset().top;
  18.  
  19. //滚动条事件
  20. $(window).scroll(function(){
  21. //获取滚动条的滑动距离
  22. var scroH = $(this).scrollTop();
  23. //滚动条的滑动距离大于等于定位元素距离浏览器顶部的距离,就固定,反之就不固定
  24. if(scroH>=navH){
  25. $(".nav").css({"position":"fixed","top":0});
  26. }else if(scroHnavH){
  27. $(".nav").css({"position":"static"});
  28. }
  29. })
  30. })
  31. </script>
  32. </head>
  33. body>
  34. div class="top">top</div>
  35. p> </p>
  36. hr>
  37. div class="nav">topnav</div>
  38.  
  39. div class="fixed_div" style="border:1px solid #200888;">content, I'm content</div>
  40. <div style="height:888px;"></div>
  41. </body>
  42. </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. Linux(一)__入门介绍

    linux的特点 优点: 1.免费的/开源的系统 2.支持多线程/多用户的系统 3.安全性好 4.对内存和文件管理优越 5.提供了丰富的网络功能 6.良好的用户界面.图形化界面和字符型界面 linux ...

  2. Techparty-广州Javascript技术专场(学习分享)

    上周末(2016/07/31)去了一个技术沙龙学习前端相关的东西,下面是各个主题我印象比较深的. React + Redux 最佳实践 主题:本次分享,主要从React/Redux相关概念及其工具链, ...

  3. Android—基于Socket与上传图片到客户端

    最近项目中需要客户端和Socket互相传递数据时候需要相互传递图片所以做下总结以免以后忘记,也希望给大家带来帮助. 先上客户端的代码: 根据图片名称上传照相机中单个照片(此方法为自己封装) 参数所代表 ...

  4. [SSIS] 在脚本里面使用数据库连接字符串进行查询等处理, 入坑

    入坑.!!!!! SSIS 中dts包 设置的  ADO.Net连接, 在传入脚本的时候, 我要使用 数据库连接,进行数据的删除操作. 于是我使用了 了如下的 代码 使用的是windows 身份验证, ...

  5. Windows on Device 项目实践 2 - 感光灯制作

    在上一篇<Windows on Device 项目实践 1 - PWM调光灯制作>中,我们学习了如何利用Intel Galileo开发板和Windows on Device来设计并完成一个 ...

  6. Linux命令学习总结: file命令

    命令简介: 该命令用来识别文件类型,也可用来辨别一些文件的编码格式.它是通过查看文件的头部信息来获取文件类型,而不是像Windows通过扩展名来确定文件类型的. 执行权限 :All User 指令所在 ...

  7. 原生 CSS 网格布局学习笔记

    下是来自Oliver Williams的帖子. Oliver已经学习了相当长时间的原生CSS网格,可以说是在CSS网格方面有一定的发言权.在这篇文章中,他将以非同寻常的思路分析自己的CSS网格布局学习 ...

  8. Windows下FFmpeg各版本库文件下载

    ffmpeg主要是基于linux开发,当然它也支持windows,不过并不支持visual studio系列IDE(因为它使用了大量C99特性,而vs不支持C99). 要想在windows上使用 一可 ...

  9. wordpress-4.4.1 数据库表结构解析

    wordpress-4.4.1.zip 安装包  SQL结构 : wp_commentmeta  :文章评论额外信息表. CREATE TABLE IF NOT EXISTS `wp_commentm ...

  10. Jquery操作cookie,实现简单的记住用户名的操作

     一.jquery.cookie.js介绍  jquery.cookie.js是一个基于jquery的插件,一个轻量级的cookie 插件,可以读取.写入.删除 cookie. jquery.cook ...