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

下面我来给各位介绍几个实例

代码如下

复制代码

<!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>

时间： 2024-08-01 14:34:57

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

jquery鼠标向下滚动(固定层位置)的相关文章

当鼠标向下滚动时，怎么使页面横向拖动

有一个jquery鼠标滚轮垂直滚动的代码有什么办法可以当内容滚动到顶部或底部不移动鼠标继续滚动页面

jQuery向下滚动即时加载内容实现的瀑布流效果_php实例

jquery-js或者是JQuery 如何控制一行文字呈弧形向下滚动，谢大神们，急~~~

鼠标点击坐标-控制台程序下，通过点击鼠标，获得点击位置的坐标

jQuery的自动左右滚动及可控制滚动效果

页面加载完毕后滚动条自动滚动一定位置

jQuery的上下无缝滚动代码（单行多行）

基于jquery的内容循环滚动小模块（仿新浪微博未登录首页滚动微博显示）_jquery