div固定在浏览器顶部_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滚动至浏览器顶部后固定不动代码

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

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

...

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

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

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

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

jquery页面滚动，菜单固定到顶部

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

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

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

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

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

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

利用 ...

随机推荐

关于Java类加载双亲委派机制的思考(附一道面试题)

预定义类加载器和双亲委派机制 JVM预定义的三种类型类加载器: 启动(Bootstrap)类加载器:是用本地代码实现的类装入器,它负责将 /lib下面 ...

SVN Working Copy locked ,并且进行clean up也还是不行

标题:working copy locked 提示:your working copy appears to be locked. run cleanup to amend the situation ...

阿里云搭建LAMP环境详细教程

一.云服务器的选择 随着大数据时代的到来,为了满足更为复杂的运算和用户更为苛刻的需求,云计算应运而生,随之而来的就是云服务器.过去的服务器成本较高,运算模式较为单一,资源利用率不高,而云服务器的出现刚 ...

5个基于css3超炫的鼠标滑动按钮动画

今天给大家分享5个基于css3超炫的鼠标滑动按钮动画.这5个按钮鼠标经过的时候有超炫的动画效果.这5个按钮适用浏览器:360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之 ...

linux下so动态库一些不为人知的秘密(上)

linux 下有动态库和静态库,动态库以.so为扩展名,静态库以.a为扩展名.二者都使用广泛.本文主要讲动态库方面知识.        基本上每一个linux 程序都至少会有一个动态库,查看某个程序使 ...

Linux内存管理 (19)总结内存管理数据结构和API

专题:Linux内存管理专题 关键词:mm.vaddr.VMA.page.pfn.pte.paddr.pg_data.zone.mem_map[]. 1. 内存管理数据结构的关系图 在大部分Linux ...

Tomcat使用https

# 用JDK自带的Keytool生成keystore文件keytool -genkey -alias tomcat -keyalg RSA -keypass Envisi0n -storepass E ...

C#退出程序，退出任务管理器

//窗体关闭之前 this.FormClosing += (s, r) => { System.Environment.Exit(0); }; //窗体关闭 this.Closed += (s, ...

ios7新特性--1

1.用户界面的扁平化 2.UIKit 动态行为支持 应用程序可以设置UIView 对象和其他对象(遵从UIDynamicItem 协议)的动态行为属性.遵从UIDynamicItem协议的对象被称为d ...