jQuery 事件 - scroll() 方法与 jQuery CSS 操做 scrollTop() 方法

时间 2020-02-04

标签 jquery 事件 scroll 方法 css scrolltop 栏目 JQuery 繁體版

原文原文链接

1.jQuery 事件 - scroll() 方法

定义和用法

当用户滚动指定的元素时，会发生 scroll 事件。javascript

scroll 事件适用于全部可滚动的元素和 window 对象（浏览器窗口）。css

scroll() 方法触发 scroll 事件，或规定当发生 scroll 事件时运行的函数。html

将函数绑定到 scroll 事件

语法

$(selector).scroll(function)

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
x=0;
$(document).ready(function(){
  $("div").scroll(function() {
    $("span").text(x+=1);
  });
  $("button").click(function(){
    $("div").scroll();
  });
});
</script>
</head>
<body>
<p>请试着滚动 DIV 中的文本：</p>
<div style="width:200px;height:100px;overflow:scroll;">text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. 
<br /><br />
text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text. text.</div>
<p>滚动了 <span>0</span> 次。</p>
<button>触发窗口的 scroll 事件</button>
</body>
</html>

2. scrollTop() 方法

定义和用法：

scrollTop() 方法返回或设置匹配元素的滚动条的垂直位置。java

scroll top offset 指的是滚动条相对于其顶部的偏移。jquery

若是该方法未设置参数，则返回以像素计的相对滚动条顶部的偏移。web

语法

$(selector).scrollTop(offset)

参数	描述
offset	可选。规定相对滚动条顶部的偏移，以像素计。

提示和注释

注释：该方法对于可见元素和不可见元素均有效。浏览器

注释：当用于获取值时，该方法只返回第一个匹配元素的 scroll top offset。函数

注释：当用于设置值时，该方法设置全部匹配元素的 scroll top offset。flex

<!DOCTYPE html>
<html>
<head>
	<title>scroll()与scrollTop()结合</title>
	<meta charset="utf-8">
	<script type="text/javascript" src="jquery-1.8.3.js"></script>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;

		}
		.menu{
			overflow:hidden;
			width:500px;
			padding-top: 30px;
			margin: 0 auto;		
		}

		li {
			font-size: 20px;
		}
		.nav {
			width:500%;
			display: flex;
			overflow-x: scroll;
			transition: left,.1s;
		}
		.nav::-webkit-scrollbar {
			display: none;
		}
		.fixed {
			position: fixed;
			top: 0;
		}
		.nav_ {
			float: left;

		}
		span {
			display: block;
			padding: 0 10px;
		}
	</style>
</head>
<body>
	<div class="menu">
		<div class="nav">
			<div class="nav_ hover">
				<span>发现</span>
				<em ></em>
			</div>
			<div class="nav_">
				<span>关注</span>
				<em ></em>
			</div>
			<div class="nav_">
				<span>11.11必买</span>
				<em ></em>
			</div>
			<div class="nav_">
				<span>发型</span>
				<em ></em>
			</div>
			<div class="nav_">
				<span>温柔风</span>
				<em ></em>
			</div>
			<div class="nav_">
				<span>遮肉显瘦</span>
				<em ></em>
			</div>
			<div class="nav_">
				<span>约会</span>
				<em ></em>
			</div>
			<div class="nav_">
				<span>高颜值</span>
				<em ></em>
			</div>
			<div class="nav_">
				<span>韩系</span>
				<em ></em>
			</div>
			<div class="nav_">
				<span>梨型身材</span>
				<em ></em>
			</div>
			<div class="nav_">
				<span>显腿长</span>
				<em ></em>
			</div>			
		</div>
	</div>
	<ul>
		<li>111111</li>
		<li>111111</li>
		<li>111111</li>
		<li>111111</li>
		<li>111111</li>
		<li>111111</li>
		<li>111111</li>
		<li>111111</li>
		<li>111111</li>
		<li>111111</li>
		<li>111111</li>
		<li>111111</li>
		<li>111111</li>
		<li>111111</li>
		<li>111111</li>
		<li>111111</li>
		<li>111111</li>
		<li>111111</li>
		<li>111111</li>
		<li>111111</li>
		<li>111111</li>
		<li>111111</li>
		<li>111111</li>
		<li>111111</li>
		<li>111111</li>
		<li>111111</li>
		<li>111111</li>
		<li>111111</li>
		<li>111111</li>
		<li>111111</li>
		<li>111111</li>
		<li>111111</li>
		<li>111111</li>
		<li>111111</li>
		<li>111111</li>
		<li>111111</li>
		<li>111111</li>
		<li>111111</li>
		<li>111111</li>
		<li>111111</li>
		<li>111111</li>
		<li>111111</li>
		<li>111111</li>
		<li>111111</li>
		<li>111111</li>
		<li>111111</li>
		<li>111111</li>
		<li>111111</li>
		<li>111111</li>
		<li>111111</li>
		<li>111111</li>
		<li>111111</li>
		<li>111111</li>
		<li>111111</li>
		<li>111111</li>
		<li>111111</li>
		<li>111111</li>
		<li>111111</li>
		<li>111111</li>
		<li>111111</li>
		<li>111111</li>
		<li>111111</li>
		<li>111111</li>
		<li>111111</li>
		<li>111111</li>
		<li>111111</li>
		<li>111111</li>
		<li>111111</li>
		<li>111111</li>
		<li>111111</li>
		<li>111111</li>
		<li>111111</li>
		<li>111111</li>
		<li>111111</li>
		<li>111111</li>
		<li>111111</li>
		<li>111111</li>
		<li>111111</li>
		<li>111111</li>
		<li>111111</li>
		<li>111111</li>
		<li>111111</li>
		<li>111111</li>
		<li>111111</li>
		<li>111111</li>
		<li>111111</li>
		<li>111111</li>
		<li>111111</li>
		<li>111111</li>
		<li>111111</li>
		<li>111111</li>
		<li>111111</li>
		<li>111111</li>
		<li>111111</li>
		<li>111111</li>
		<li>111111</li>
		
	</ul>
	
</body>
<script type="text/javascript">
$(window).scroll(function(){
	if ( $(window).scrollTop()>=480) {
		$(".nav").addClass("fixed");
	} else {
		$(".nav").removeClass("fixed")
	}
});
</script>
</html>

jQuery 事件 - scroll() 方法 与 jQuery CSS 操做 scrollTop() 方法