首頁 > 開發者 > JavaScript
基於jquery固定於頂部的導航響應瀏覽器捲軸事件，jquery捲軸
今天給大家分享一款基於jquery固定於頂部的導航，這款導航當瀏覽器捲軸位於頂部時，導航高度較高，當瀏覽器滾動向下滾動時，導航高度自動減低，並位於頂部。如下：
源碼下載
實現的代碼：
html代碼：
<div id="page"><div id="toolbar" data-0="height:192px" data-128="height: 64px"><div id="actions"><div class="icon"><svg viewbox="0 0 24 24" x="0px" y="0px" version="1.1" xmlns="http://www.w3.org/2000/svg"xmlns:xlink="http://www.w3.org/1999/xlink"><g id="menu"><path d="M3,18h18v-2H3V18z M3,13h18v-2H3V13z M3,6v2h18V6H3z"></path></g></svg></div><div class="spacer"></div><div class="icon"><svg viewbox="0 0 24 24" x="0px" y="0px" version="1.1" xmlns="http://www.w3.org/2000/svg"xmlns:xlink="http://www.w3.org/1999/xlink"><g id="search"><path d="M15.5,14h-0.8l-0.3-0.3c1-1.1,1.6-2.6,1.6-4.2C16,5.9,13.1,3,9.5,3C5.9,3,3,5.9,3,9.5S5.9,16,9.5,16c1.6,0,3.1-0.6,4.2-1.6l0.3,0.3v0.8l5,5l1.5-1.5L15.5,14z M9.5,14C7,14,5,12,5,9.5S7,5,9.5,5C12,5,14,7,14,9.5S12,14,9.5,14z"></path></g></svg></div><div class="icon"><svg viewbox="0 0 24 24" x="0px" y="0px" version="1.1" xmlns="http://www.w3.org/2000/svg"xmlns:xlink="http://www.w3.org/1999/xlink"><g id="more-vert"><path d="M12,8c1.1,0,2-0.9,2-2s-0.9-2-2-2c-1.1,0-2,0.9-2,2S10.9,8,12,8z M12,10c-1.1,0-2,0.9-2,2s0.9,2,2,2c1.1,0,2-0.9,2-2S13.1,10,12,10z M12,16c-1.1,0-2,0.9-2,2s0.9,2,2,2c1.1,0,2-0.9,2-2S13.1,16,12,16z"></path></g></svg></div></div><div id="title" data-0="font-size: 48px; padding: 0 0 24px 12px;" data-128="font-size: 18px; padding: 0 0 21px 60px;">Page Title</div></div><div id="content" data-0="padding-top: 192px;" data-192="padding-top: 190px;"><div class="card">Content goes here!</div><div class="card">Content goes here!</div><div class="card">Content goes here!</div><div class="card">Content goes here!</div><div class="card">Content goes here!</div><div class="card">Content goes here!</div><div class="card">Content goes here!</div></div></div><script src='jquery.js'></script><script src='skrollr.min.js'></script><script> $(document).ready(function () {skrollr.init({ smoothScrolling: true });}); //@ sourceURL=pen.js</script>
css代碼：
html, body {background: #fafafa;color: #1BBBFB;font-family: sans-serif;}#page {position: absolute;top: 0;right: 0;bottom: 0;left: 0;}#toolbar {display: block;position: fixed;width: 100%;z-index: 10;box-sizing: border-box;-moz-box-sizing: border-box;background-color: #1BBBFB;padding: 0 16px;}#actions {position: relative;display: flex;align-items: center;flex-direction: row;height: 64px;top: 0;left: 0;right 0;}#actions .icon {padding: 7px;margin: 2px;vertical-align: middle;}#actions .spacer {flex: 1;}#actions svg {display: inline-block;pointer-events: none;position: relative;vertical-align: middle;width: 24px;height: 24px;fill: #fff;}#title {padding: 21px;position: absolute;bottom: 0;color: #fff;}#content {display: block;position: relative;padding: 24px;}.card {display: block;position: relative;width: 60%;height: 100px;border: 1px solid #1BBBFB;-webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px;background-color: #fff;margin: 16px auto;padding: 24px;}
<html xmlns="www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>jquery浮動層</title>
<script src="jquery-1.8.3.js"></script><!-- 注意修改引用路徑 -->
<style type="text/css">
#Float {background-color: #000;height: 200px;width: 100px;position: absolute;top: 80px;right: 20px;}
</style>
</head>
<script language="javascript">
$(document).ready(function(){
$(window).scroll(function (){
// 讓浮動層距離視窗頂部，始終保持80px
var offsetTop = $(window).scrollTop() + 80 +"px";
$("#Float").animate({top : offsetTop },{ duration:500 , queue:false });
});
});
</script>
<body>
<div style="height:2000px;"></div>
<div id="Float"></div>
</body>
</html>
這段代碼copy到一個空的html中，注意修改jQuery.1.8.3.js的引用路徑，然後在瀏覽器中開啟這個頁面，可以看到效果，應該就是你想要的
jquery 判斷捲軸到達了底部，怎判斷捲軸是否又到達的頂
$(document).scrollTop() 擷取垂直滾動的距離 即當前滾動的地方的視窗頂端到整個頁面頂端的距離
$(document).scrollLeft() 這是擷取水平捲軸的距離
看明白了嗎？？
你要擷取頂端 只需要擷取到scrollTop()==0的時候 就是頂端了
要擷取底端 只要擷取scrollTop()>=$(document).height()-$(window).height() 就可以知道已經滾動到底端了
$(document).height() //是擷取整個頁面的高度
$(window).height() //是擷取當前 也就是你瀏覽器所能看到的頁面的那部分的高度 這個大小在你縮放瀏覽器視窗大小時 會改變 與document是不一樣的 根據英文應該也能理解吧
其實你可以自己做個實驗就知道了
$(document).scroll(function(){
$("#lb").text($(document).scrollTop());
})
<span id="lb" style="top:100px;left:100px;position:fixed;"></span><!--一個固定的span標記 滾動時方便查看-->
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
