当前位置：创新互联 >> 常见问题 >> 前端开发 >> jQuery >> jquery鼠标向下滚动(固定层位置)

jquery鼠标向下滚动(固定层位置)

作者：创新互联文章来源：前端开发部点击数：更新时间：2008-08-25
下面我来给各位介绍几个实例
代码如下复制代码
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script>
window.onload = function(){
$(window).scroll(function() {
var sTop = $(window).scrollTop();
if (sTop > 100) {
   $('#pinning').show();
} else {
   $('#pinning').hide();
};;
});
};
</script>
</head>
<body>
<div id="pinning" style="display: none; position: fixed; top: 5px; left: 5px; width: 500px; height: 30px; border: 3px solid #ccc; text-align: right;">固定层</div>
<div style="width: 500px; border: 1px solid #000; height: 3000px;">这是内容<br>这是内容<br>这是内容<br>这是内容<br>这是内容<br>这是内容<br>这是内容<br>这是内容<br>这是内容<br></div>
</body>
</html>

实例二
代码如下复制代码
<!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>无标题文档</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$(window).scroll(function(){
var scrollTop = $(document).scrollTop();
var headheight = $(".head").height();
if(scrollTop >= headheight){
$("#fudong").addClass("fixed");
}else{
$("#fudong").removeClass("fixed");
   }
})
})
</script>
<style>
*{margin:0;padding:0}
* html,* html body{background:url(about:blank) fixed}
#wrap {width:950px;height:2000px;margin:0 auto;border:1px solid #000;position:relative}
#wrap .head {height:200px;background:#AA5F55}
#fudong {width:950px;height:30px;background:#ccc;}
.fixed {position:fixed;_position:absolute;top:0;top:expression(eval(document.documentElement.scrollTop + 0))}
</style>
</head>
<body>
<div id="wrap">
<div class="head"></div>
<div id="fudong">1111</div>
</div>
</body>
</html>
jQuery ajax Load关闭缓存的方法 :上一篇
jQuery判断元素是否存在方法总结 :下一篇

前端开发

域名注册

虚拟主机

网站建设

服务器租用

营销推广

网站程序

移动互联网

企业邮箱

网站备案

jquery鼠标向下滚动(固定层位置)

jquery鼠标向下滚动(固定层位置)

jQuery相关文章