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>利用 ...
随机推荐
- Linux(一)__入门介绍
linux的特点 优点: 1.免费的/开源的系统 2.支持多线程/多用户的系统 3.安全性好 4.对内存和文件管理优越 5.提供了丰富的网络功能 6.良好的用户界面.图形化界面和字符型界面 linux ...
- Techparty-广州Javascript技术专场(学习分享)
上周末(2016/07/31)去了一个技术沙龙学习前端相关的东西,下面是各个主题我印象比较深的. React + Redux 最佳实践 主题:本次分享,主要从React/Redux相关概念及其工具链, ...
- Android—基于Socket与上传图片到客户端
最近项目中需要客户端和Socket互相传递数据时候需要相互传递图片所以做下总结以免以后忘记,也希望给大家带来帮助. 先上客户端的代码: 根据图片名称上传照相机中单个照片(此方法为自己封装) 参数所代表 ...
- [SSIS] 在脚本里面使用数据库连接字符串进行查询等处理, 入坑
入坑.!!!!! SSIS 中dts包 设置的 ADO.Net连接, 在传入脚本的时候, 我要使用 数据库连接,进行数据的删除操作. 于是我使用了 了如下的 代码 使用的是windows 身份验证, ...
- Windows on Device 项目实践 2 - 感光灯制作
在上一篇<Windows on Device 项目实践 1 - PWM调光灯制作>中,我们学习了如何利用Intel Galileo开发板和Windows on Device来设计并完成一个 ...
- Linux命令学习总结: file命令
命令简介: 该命令用来识别文件类型,也可用来辨别一些文件的编码格式.它是通过查看文件的头部信息来获取文件类型,而不是像Windows通过扩展名来确定文件类型的. 执行权限 :All User 指令所在 ...
- 原生 CSS 网格布局学习笔记
下是来自Oliver Williams的帖子. Oliver已经学习了相当长时间的原生CSS网格,可以说是在CSS网格方面有一定的发言权.在这篇文章中,他将以非同寻常的思路分析自己的CSS网格布局学习 ...
- Windows下FFmpeg各版本库文件下载
ffmpeg主要是基于linux开发,当然它也支持windows,不过并不支持visual studio系列IDE(因为它使用了大量C99特性,而vs不支持C99). 要想在windows上使用 一可 ...
- wordpress-4.4.1 数据库表结构解析
wordpress-4.4.1.zip 安装包 SQL结构 : wp_commentmeta :文章评论额外信息表. CREATE TABLE IF NOT EXISTS `wp_commentm ...
- Jquery操作cookie,实现简单的记住用户名的操作
一.jquery.cookie.js介绍 jquery.cookie.js是一个基于jquery的插件,一个轻量级的cookie 插件,可以读取.写入.删除 cookie. jquery.cook ...