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>

时间: 2024-08-16 06:40:21

Jquery DIV滚动至浏览器顶部位置固定的相关文章

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

$(function(){ //获取要定位元素距离浏览器顶部的距离 var navH = $(".win").offset().top; //滚动条事件 $(window).scroll(function(){ //获取滚动条的滑动距离 var scroH = $(this).scrollTop(); //滚动条的滑动距离大于等于定位元素距离浏览器顶部的距离,就固定,反之就不固定 if(scroH>=navH){ $(".win").css({"po

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

<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title>滚动至顶部后固定</title> <style type="text/css"> .wrapper{width:1000px;height:2000px;margin-left:auto;margin-right:auto;} .header{height:150p

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

<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title>滚动至顶部后固定</title> <style type="text/css"> .wrapper{width:1000px;height:2000px;margin-left:auto;margin-right:auto;} .header{height:150p

获取DIV与浏览器顶部相聚一定位置之后移动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('pos

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

<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title>DIV滚动至顶部后固定</title> </head> <body style="height:2000px;"> <div style="height: 200px"></div> <div id=&q

asp.net网站开发中用jquery实现滚动浏览器滚动条加载数据(类似于腾讯微博)

自从腾讯微博上线以来,基本上就开始用了,一直到现在,作为一个开发人员,也看到了腾讯微博一直在不停的改变,也不知道大家有没有发现,腾讯微博提供两种加载数据的方式,一种是分页,一种是滚动浏览器滚动条加载数据,分页功能我想大家都做得太多了,今天我与大家分享一下我用滚动条滚动加载数据,小生不才,还望各位大侠指教,呵呵~ 下面开讲: 首先说一下思路,我用的是Jquery,然后通过Jquery的ajax()方法通过 HTTP 请求加载远程数据来实现的,用到Jquery,首先要应用jquery.min.js类

如何精确定位固定大小的div在网页的中间位置并且不随分辨率的设置改变(位置大小都不变)

所有的框模型一开始都是按文档中正常的元素流定位,而定位position属性允许我们改变这些自然的位置.通过利用一些简单的Css规则,position使得设计者可以将HTML元素精确放置,position属性确定了每个元素框(box)定位的参考点. 在详细介绍之前,我们先简要的说明一下定位的4种方法: 1.静止定位(static):这种方法使得所有的元素最终位置都是一个静止位置.所以没有什么需要特殊说的. 2.绝对定位(absolute):这种方法允许用户指定元素的左上角.右下角或者其他的参考点和

菜单滚动至顶部后固定

<!DOCTYPE HTML><html><head><meta charset="UTF-8"><title>菜单滚动至顶部后固定-柯乐义</title><style type="text/css">.wrapper{width:1000px;height:2000px;margin-left:auto;margin-right:auto;}.header{height:150px

HTML滚动时位置固定

现在显示器一般都是宽屏,网页两端常常会留白. 两边可能会放一些推荐.标签或是导航什么的辅助模块. 现在有的网站页面内容过长时,用户将滚动条向下拉时,拉到一定程度,左右两侧的辅助模块就会固定在指定位置,不随滚动条滚动.这个的体验很好. 试着自己写了一个. 原理很简单,就是使用JS计算当滚动条位置大于元素显示位置时,将元素设置为 position:fixed; 设置好top,left这样就固定好位置了. <!DOCTYPE html> <html> <head> <t