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>利用 ...
随机推荐
- 前端实战Demo:一张图片搞定一页布局
对前端程序员来说,从设计师的手中拿过设计图和素材之后根据需要进行切图是必要的基本功,但是一般的程序员可能对切图并非那么熟悉,所以可能有很多时间都花在使用Photoshop上,那么这里就有一种方法可以减 ...
- 正则匹配test
var t='VARCHAR(5)' var pattern=/VARCHAR\(\d+\)/g pattern.test(t)//true test()返回false true 但是有哪位小伙伴能告 ...
- jQuery简单的手风琴菜单
查看效果:http://keleyi.com/keleyi/phtml/menu/5.htm 本菜单的HTML代码和JS代码都简洁,完整源代码: <!DOCTYPE html PUBLIC &q ...
- webstorm+react+webpack-demo
序言:通过这个小例子你也许.大概.可能会掌握以下几点 1.webstorm如何使用命令行 2.如何使用webpack的loaders把json格式的文件转化为javascript文件 3.如何使用不同 ...
- 解决xcode8模拟器不能删除应用的问题
问题描述:想删除模拟器上的测试项目,但是长按之后主界面模糊一下,并没有出现小叉叉来删除. 原因:这是因为xcode8中模拟器自带Touch3D,我们控制不好触摸板的力度. 解决方法: 1. ...
- Linux0.11内核--进程调度分析之1.初始化
[版权所有,转载请注明出处.出处:http://www.cnblogs.com/joey-hua/p/5596746.html ] 首先看main.c里的初始化函数main函数里面有个函数是对进程调度 ...
- Intent属性详解一 component属性
先看效果图 概述 在介绍Component之前,我们首先来了解ComponentName这个类:ComponentName与Intent同位于android.content包下,我们从Android官 ...
- android FrameLayout详解
首先看演示: FrameLayout框架布局是最简单的布局形式.所有添加到这个布局中的视图都以层叠的方式显示.第一个添加的控件被放在最底层,最后一个添加到框架布局中的视图显示在最顶层,上一层的控件会覆 ...
- Android Touch事件分发机制学习
Android 事件分发机制 ViewGroup dispatchTouchEvent 返回true dispatchTouchEvent: Activity ACTION_DOWN Myrelat ...
- Guest Speaker on 2015 WinHEC Shenzhen 秋季大会
继今年3月份的WinHEC春季大会,秋季大会于11月10日-11日深圳如期举行.此次大会的主题是Windows 10 IoT和Microsoft Azure,云和端的无缝连接是微软物联网解决方案的典型 ...