[英]Make an element hide when page is scrolling but when page become static the element again appear
我在我的網站上添加了一個浮動操作按鈕。 我真的對 JavaScript 和 jQuery 一無所知。 我可以通過一種方法使浮動操作按鈕在窗口滾動時消失並在窗口停止滾動時出現嗎？
沒有滾動停止的直接事件，但在這里完成了一項工作； 用戶停止滾動時的事件
剛剛添加了一些調整，例如在滾動期間隱藏按鈕並顯示它是否經過了幾毫秒。
$.fn.scrollEnd = function(callback, timeout) { $(this).scroll(function() { // hide button $(".floatingBtn").hide(); var $this = $(this); if ($this.data('scrollTimeout')) { clearTimeout($this.data('scrollTimeout')); } $this.data('scrollTimeout', setTimeout(callback, timeout)); }); }; $(window).scrollEnd(function() { // show button if scrolling stopped $(".floatingBtn").show(); }, 600);
.container { height: 1200px; } .floatingBtn { position: fixed; bottom: 12px; right: 12px; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="container"> <button class="floatingBtn">Hello World!</button> </div>
試試下面的代碼。 那應該工作。 在下面的代碼中用“YOURID”替換元素的 id。
$.fn.scrollStopped = function(callback) { var that = this, $this = $(that); $this.scroll(function(ev) { clearTimeout($this.data('scrollTimeout')); $this.data('scrollTimeout', setTimeout(callback.bind(that), 250, ev)); }); }; $(window).on("scroll",function(e){ $("#YOURID").hide(); }).scrollStopped(function(ev){ $("#YOURID").show(); }) <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <BODY style="height:1200px;"> <br><br><br><br><br><br> <button id="YOURID" type="buton" style="position:fixed">FLOATING BUTTON</button> </BODY>
在滾動時顯示元素（向上和向下） - 當頁面為 static（不滾動）時隱藏元素
[英]Show element on scroll (both up and down) - hide element when page is static (not scrolling)
有一種方法可以在向下滾動時隱藏元素並在向上滾動時再次顯示元素嗎？
[英]Is there a way to hide an element when scrolling down & show the element again while scrolling up?
元素A放置在元素B上。無論如何，當將鼠標懸停在元素A上時，使頁面看起來元素B仍在懸停嗎？
[英]Element A is positioned over Element B. Anyway, when hovering over Element A, make the page appear that Element B is still being hovered over?
當元素根本沒有出現在頁面上時檢查元素的可見性
[英]Check visibility of an element when the element does not appear on the page at all
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.