jQuery scroll事件
生活随笔
收集整理的這篇文章主要介紹了
jQuery scroll事件
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
前言
- jquery 3.5.1
scroll事件
<html> <header> <script crossorigin="anonymous" integrity="sha512-bLT0Qm9VnAYZDflyKcBaQ2gg0hSYNQrJ8RilYldYQ1FxQYoCLtUjuuRuZo+fjqhx/qtq/1itJ0C2ejDxltZVFg==" src="https://lib.baomitu.com/jquery/3.5.1/jquery.min.js"></script> <script type="text/javascript">$(function(){$(window).scroll(function(){console.log("滾動條位置：", $(window).scrollTop());});}); </script> <style type="text/css"> *{margin:0;} .item{width: 100%;height: 300px;padding: 100px 0 0 100px; } .item:nth-of-type(even){background: #abc;color: #fff; } .item:nth-of-type(odd){background: #fff;color: #333; } .rightFlatBar {position: fixed;right: 5px;bottom: 0px;width: 60px;height: auto; } .rightFlatBar div{display: none;width: 60px;height: 60px;margin-bottom: 5px;border: 1px solid #ececec;border-radius: 5px;transition: .3s;box-shadow: 0px 0px 3px rgba(0,0,0,0.08);text-align:center;line-height: 60px;background: #fff;cursor:hand; }</style> </header><body><div><div class="item"><h1>條目1</h1></div><div class="item"><h1>條目2</h1></div><div class="item"><h1>條目3</h1></div><div class="item"><h1>條目4</h1></div><div class="item"><h1>條目5</h1></div></div><div class="rightFlatBar"><div>頂部</div><div>條目1</div><div>條目2</div><div>條目3</div><div>條目4</div><div>條目5</div></div> </body> </html>運行效果：
參考
https://www.cnblogs.com/Emily-m/p/11099181.html
總結
以上是生活随笔為你收集整理的jQuery scroll事件的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 1479 元 = 2K+240Hz+HD
- 下一篇： 《惊奇队长 2》内地上映首日票房破 30