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>