Home > Developer > JavaScript
Responds to browser scroll bar events based on the navigation that is fixed on the top of jquery.
Today, we will share with you a jquery-based navigation that is fixed at the top. This navigation item has a high navigation height when the browser scroll bar is located at the top. When the browser scroll down, the navigation height is automatically reduced and located at the top. As follows:
Source code download
Implementation Code:
Html code:
<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 code:
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/5o/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> jquery floating layer </title>
<Script src = "jquery-1.8.3.js"> </script> <! -- Pay attention to modifying the reference path -->
<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 (){
// Keep the floating layer 80 PX away from the top of the window
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 this code to an empty html file. Modify the reference path of jQuery.1.8.3.js and open this page in the browser. You can see that the result is what you want.
Jquery determines whether the scroll bar has reached the bottom. How can it determine whether the scroll bar has reached the top?
$ (Document). scrollTop () gets the vertical scroll distance, that is, the distance from the top of the current tumble window to the top of the entire page
$ (Document). scrollLeft () This is the distance to obtain the horizontal scroll bar.
Do you understand ??
To get the top, you only need to get scrollTop () = 0, which is the top.
To get the bottom, you only need to get scrollTop () >=$ (document). height ()-$ (window). height () to know whether the scroll ends.
$ (Document). height () // gets the height of the entire page
$ (Window ). height () // obtain the height of the page that can be viewed by your browser. The size of the page varies with the document size when you zoom in the browser window.
In fact, you can do an experiment on your own.
$ (Document). scroll (function (){
$ ("# Lb"). text ($ (document). scrollTop ());
})
<Span id = "lb" style = "top: 100px; left: 100px; position: fixed;"> </span> <! -- A fixed span label is easy to view when scrolling -->
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
