jQuery滚动页面当DIV到达顶部时固定在顶部,到底部是固定在底部

jQuery滚动页面当DIV到达顶部时固定在顶部,到底部是固定在底部
可以做类似美团网右侧的浏览记录效果
直接上代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery滚动页面当DIV到达顶部时固定在顶部,到底部是固定在底部</title>
</head>
<style>
body{margin:0; padding:0; background:#fff}
div{width:100%;}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<body>
<div style="height:100px;background:#999"></div>
<div style="height:200px;">
<div id="menu" style="background:green; height:200px;"></div>
</div>
<div style="height:200px;"></div>
<div id="bottom" style="background:red; height:200px; margin-top:100px;"></div>
<div style="height:800px;background:#999"></div>
<script type="text/javascript">
$(function () {
var ie6 = document.all;
var dv = $('#menu'), st, botv;
var bv = $('#bottom');
dv.attr('otop', dv.offset().top);
dv.attr('oheight', dv.height());

$(window).scroll(function () {
st = Math.max(document.body.scrollTop || document.documentElement.scrollTop);
botv=bv.offset().top-st-parseInt(dv.attr('oheight'));
if (st > parseInt(dv.attr('otop'))) {
if(parseInt(bv.offset().top-st)<parseInt(dv.attr('oheight'))){
dv.css({ 'position': 'fixed', top: botv });
}else{
if (ie6) {//IE6不支持fixed属性,所以只能靠设置position为absolute和top实现此效果
dv.css({ position: 'absolute', top: st });
}
else if (dv.css('position') != 'fixed') dv.css({ 'position': 'fixed', top: 0 });
}
} else if (dv.css('position') != 'static') dv.css({ 'position': 'static' });
});
});
</script>
</body>
</html>


领头羊网络
专业网站开发

专业网站开发

19 声望
0 粉丝
0 条评论
推荐阅读
【新浪云商店】WOPHP企业网站系统5.0
我在新浪云商店发现了一个很不错的应用【WOPHP企业网站系统5.0】,相当给力,推荐给大家。以前建网站装应用都好麻烦,但云商店的一键安装功能特方便,只要点点鼠标就能速度装好,立刻使用了,赶紧来体验下吧。 [...

领头羊网络阅读 2.1k

Ajax实现搜索联想 搜索关键词提醒 无刷新搜索
通过javascript监听搜索框的内容,调用后端即可。(1)javascript监听搜索框的内容(2)把搜索框的关键词传给后端进行搜索(3)搜索到结果,遍历到页面

TANKING1阅读 4.3k

Promise: 异步编程的理解和使用
JavaScript 中,Promise 的流行是得益于 jQuery 的方法 jQuery.Deferred(),其他也有一些更精简独立的 Promise 库,例如:Q、When、Bluebird。

后除2阅读 770

使用原生js替换jQuery
前端发展很快,现代浏览器原生 API 已经足够好用。我们并不需要为了操作 DOM、Event 等再学习一下 jQuery 的 API。同时由于 React、Angular、Vue 等框架的流行,直接操作 DOM 不再是好的模式,jQuery 使用场景大...

donggongai1阅读 424评论 1

Y 分钟速成 jquery
jQuery是JavaScript的一个函数库,它可以帮你“写更少,做更多”。它集成了很多常见的JavaScript任务并且很容易调用。jQuery被世界各地的很多的大公司和开发者使用。它包括了AJAX,事件处理,文档操作以及很多其它...

小X学技术阅读 678

Jquery实现的Switch开关按钮(仿iOS开关)
1、swich主体switch-on 代表开启,如需设置默认关闭,可设置为 switch-off,themeColor 是主题色,zoom 可设置swich的大小,调整 zoom 的值即可调整大小。

TANKING阅读 580

封面图
Shi 山淘金,这个技术搞出来属实不易了
当一个人开始回首往事,说明他过的并不好...不排除他在摸鱼回首往事,翻看过去的Shi山,一个个简单又精致的活动H5映入眼帘,是什么让曾经手无缚鸡(撸码)之力的我,捯饬出如此精美的H5(纯属自嗨),点我审阅扫...

用户bPbJLQQ阅读 367

封面图

专业网站开发

19 声望
0 粉丝
宣传栏