堆栈内存溢出
  繁体   English   中英

基于Javascript滚动显示/隐藏图像

[英]Show/Hide the Image based on Scrolling in Javascript

 原文  2016-01-08 07:28:13  3   1    javascript/ jquery/ html/ css

问题描述

我必须基于滚动显示/隐藏图像。 但是这里的条件是，如果用户在页面顶部/底部附近多次上下滚动，则图像不应反复淡入和淡出。 在淡入之前，它应该收听1秒钟。以下是我尝试的逻辑。

码 

<div class="a" style="height: 300px;width: 300px;background-color: green;position:fixed;">
</div>

var $toTop = $('div.a');
$(window).scroll(function () {
if ($(this).scrollTop() > 100) {
    $toTop.fadeIn();
} else if ($toTop.is(':visible')) {
    $toTop.fadeOut();
}
});

1 个解决方案

解决方案1
 1  2016-01-08 07:35:49

您可以通过将超时保存在jquery主数据对象中来实现，该超时在触发滚动事件时等待一秒钟执行。 该事件还将清除所有先前注册的超时： 

 var $toTop = $('div.a'); $(window).scroll(function() { clearTimeout($.data(this, 'waitASecond')); $toTop.stop(); $.data(this, 'waitASecond', setTimeout(function() { if ($(window).scrollTop() > 100) { $toTop.fadeIn(); } else if ($toTop.is(':visible')) { $toTop.fadeOut(); } }, 1000)); }); 
 body { height:1000px; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <body> Scroll Down and wait.... <div class="a" style="height: 700px;width: 300px;background-color: green;display:none"></div> </body>

使用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.

相关问题 根据天数显示/隐藏图像 javascript 使用JavaScript显示/隐藏图像 如何根据 if/else javascript 中的图像更改显示/隐藏内容 滚动时显示/隐藏 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> 隐藏并使用Javascript显示图像 根据位置显示或隐藏图像（图像滑块） 基于滚动显示图像的新部分 我需要根据是否有图像显示/隐藏文本 基于按钮单击的JavaScript隐藏/显示DIV
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM