簡體   English   中英

有沒有辦法只在用戶滾動時顯示div?

[英]Is there a way to only show a div when a user is scrolling?

我正在努力使它只在用戶滾動時顯示div。 當他們停止滾動時,div淡出。

我用Google搜索了各種術語,但也許我的條款不正確,因為返回的結果是在某個高度顯示div。

有什么建議么?

看看jQuery的.scroll事件處理程序

var myTimeout = -1;                    // Var to store a timeout reference in
$(window).scroll(function() {          // When the user scrolls the window
    $('#myDiv').show();                // Show the div (Any element)
    if(myTimeout !== -1){              // If a timeout is running
        clearTimeout(myTimeout);       // Clear that timeout
    }
    myTimeout = setTimeout(function(){ // Set a timeout to hide the div
        $('#myDiv').hide();            // Function that hides the div
    }, 1000);                          // Run the function after 1 sec (1000 ms)
});

這段代碼在用戶開始滾動時顯示div,然后在用戶停止滾動后隱藏它1秒。

通過jQuery Mobile

$(document).on("scrollstop",function(){
  alert("Stopped scrolling!");
});


 $(document).on("scrollstart",function(){
  alert("Started scrolling!");
});

使用javascript顯示/隱藏<div>滾動時</div><div id="text_translate"><p>我想制作一個采用性的粘性導航欄。 我以前從未用 Javascript 編寫過自己的代碼。</p><p> 我的解決方案是制作兩個基於滾動顯示/隱藏的粘性導航欄。 我的解決方案是這樣的:</p><ul><li> 首先,在完成任何滾動之前,我的第一個導航欄(黃色)將可見並位於距頂部 100px 的位置,即top:100px 。</li><li> 然后,當啟動滾動時,我希望這個黃色&lt;div&gt;使用display:none消失。</li><li> 同樣在滾動時,在黃色導航欄消失的同時,我會顯示帶有top:200px的橙色導航欄。</li><li> 現在,橙色條從一開始就(錯誤地)顯示,但它不應該......在任何給定時間只應顯示一個條。 我希望欄,即兩個&lt;div&gt;元素,在多次上下滾動時也能保持出現/消失。</li></ul><p> 我的 javascript 有問題,codepen 抱怨$未定義。</p><p> <a href="https://codepen.io/G1111/pen/RwBPrPR" rel="nofollow noreferrer">https://codepen.io/G1111/pen/RwBPrPR</a> </p><p></p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"><div class="snippet-code"><pre class="snippet-code-js lang-js prettyprint-override"> $(window).scroll(function() { Testvariable = $(window).scrollTop(); if (Testvariable == 0) { document.getElementById("stickys").style.display = "normal"; document.getElementById("stickys2").style.display = "none"; } else { document.getElementById("stickys").style.display = "none"; document.getElementById("stickys2").style.display = "normal"; } });</pre><pre class="snippet-code-css lang-css prettyprint-override"> #stickys { top: 100px;important: background-color; yellow: height; 100px: position; fixed: position; fixed:important; box-sizing: border-box; margin: 0 0% 0 0%;important: padding; 0:important; width: calc(60vw - 0%); left: calc(20vw - 0%); right: calc(20vw - 0%); width: calc(100vw - 0%); left: 0px; right: 0px; opacity: 1; } #stickys2 { top: 200px;important: background-color; orange: height; 100px: position; fixed: position; fixed:important; box-sizing: border-box; margin: 0 0% 0 0%;important: padding; 0:important; width: calc(60vw - 0%); left: calc(20vw - 0%); right: calc(20vw - 0%); width: calc(100vw - 0%); left: 0px; right: 0px; opacity: 1; }</pre><pre class="snippet-code-html lang-html prettyprint-override"> &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt; &lt;div id="stickys"&gt; My first sticky navigation bar. Show initially, then hide when slighest scroll, that is when Testvariable&gt;0. Here, top:100px &lt;/div&gt; &lt;div id="stickys2"&gt; My second sticky navigation bar. Hide initially, then show when slighest scroll, that is when Testvariable&gt;0. Here, top: 200px. &lt;/div&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;</pre></div></div><p></p></div>

[英]Using javascript to show/hide <div> when scrolling

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 用戶開始滾動時暫時隱藏Div,然后顯示Div 僅當用戶將元素懸停幾秒鍾時才顯示 div 如何僅在用戶在div上滾動時顯示滾動條 使用香草 JavaScript 滾動時顯示 div 滾動時顯示/隱藏 div 或圖像 使用javascript顯示/隱藏<div>滾動時</div><div id="text_translate"><p>我想制作一個采用性的粘性導航欄。 我以前從未用 Javascript 編寫過自己的代碼。</p><p> 我的解決方案是制作兩個基於滾動顯示/隱藏的粘性導航欄。 我的解決方案是這樣的:</p><ul><li> 首先,在完成任何滾動之前,我的第一個導航欄(黃色)將可見並位於距頂部 100px 的位置,即top:100px 。</li><li> 然后,當啟動滾動時,我希望這個黃色&lt;div&gt;使用display:none消失。</li><li> 同樣在滾動時,在黃色導航欄消失的同時,我會顯示帶有top:200px的橙色導航欄。</li><li> 現在,橙色條從一開始就(錯誤地)顯示,但它不應該......在任何給定時間只應顯示一個條。 我希望欄,即兩個&lt;div&gt;元素,在多次上下滾動時也能保持出現/消失。</li></ul><p> 我的 javascript 有問題,codepen 抱怨$未定義。</p><p> <a href="https://codepen.io/G1111/pen/RwBPrPR" rel="nofollow noreferrer">https://codepen.io/G1111/pen/RwBPrPR</a> </p><p></p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"><div class="snippet-code"><pre class="snippet-code-js lang-js prettyprint-override"> $(window).scroll(function() { Testvariable = $(window).scrollTop(); if (Testvariable == 0) { document.getElementById("stickys").style.display = "normal"; document.getElementById("stickys2").style.display = "none"; } else { document.getElementById("stickys").style.display = "none"; document.getElementById("stickys2").style.display = "normal"; } });</pre><pre class="snippet-code-css lang-css prettyprint-override"> #stickys { top: 100px;important: background-color; yellow: height; 100px: position; fixed: position; fixed:important; box-sizing: border-box; margin: 0 0% 0 0%;important: padding; 0:important; width: calc(60vw - 0%); left: calc(20vw - 0%); right: calc(20vw - 0%); width: calc(100vw - 0%); left: 0px; right: 0px; opacity: 1; } #stickys2 { top: 200px;important: background-color; orange: height; 100px: position; fixed: position; fixed:important; box-sizing: border-box; margin: 0 0% 0 0%;important: padding; 0:important; width: calc(60vw - 0%); left: calc(20vw - 0%); right: calc(20vw - 0%); width: calc(100vw - 0%); left: 0px; right: 0px; opacity: 1; }</pre><pre class="snippet-code-html lang-html prettyprint-override"> &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt; &lt;div id="stickys"&gt; My first sticky navigation bar. Show initially, then hide when slighest scroll, that is when Testvariable&gt;0. Here, top:100px &lt;/div&gt; &lt;div id="stickys2"&gt; My second sticky navigation bar. Hide initially, then show when slighest scroll, that is when Testvariable&gt;0. Here, top: 200px. &lt;/div&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;.&lt;br&gt;</pre></div></div><p></p></div> 用戶滾動時在屏幕上粘貼div 導航欄僅在iOS中向上滾動時顯示 僅當值 = 0 時才顯示 div 僅在打印時顯示div
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM