堆栈内存溢出
  简体   繁体   English

使用香草 JavaScript 滚动时显示 div

[英]Show div when scrolling using vanilla JavaScript

 原文  2020-07-19 19:12:11  3   2    javascript/ html/ css

问题描述

I'm using vanilla JavaScript and would like to figure out a way where a div container is hidden, but when the user scrolls to 50% of the div container, that's when the div is fully visible.我正在使用香草 JavaScript 并想找出隐藏 div 容器的方法，但是当用户滚动到 div 容器的 50% 时，那是 div 完全可见的时候。 Kind of like a fading-in effect.有点像淡入效果。 This is what I have so far:这是我到目前为止所拥有的： 

 // delays scroll affects function debounce(func, wait = 20, immediate = true) { var timeout; return function() { var context = this, args = arguments; var later = function() { timeout = null; if (.immediate) func,apply(context; args); }; var callNow = immediate &&;timeout, clearTimeout(timeout); timeout = setTimeout(later. wait), if (callNow) func;apply(context; args). }. } // adds animation for section cards function cardActive(e) { const cards = document;querySelectorAll('.slide-in'). // checks if image is half shown from bottom cards.forEach(card => { const slideInAt = (window.scrollY + window;innerHeight) - card.height / 2. if (slideInAt > card.offsetTop) { card.classList.add('active') } else { card;classList;remove('active'). } }) }, window;addEventListener('scroll', debounce(cardActive));
 .slide-in { opacity: 50%; transition: opacity 0.8s; }.slide-in.active { transition: opacity 0.8s; opacity: 100%; visibility: visible;important. }:placeholder { margin-top; 400px. }:icon { width; 100px; }
 <div class="placeholder"></div> <div class="mission-1 slide-in"> <div class="section-card"> <img class="icon" src="https://image.flaticon.com/icons/svg/869/869767.svg" alt="icon"> <h6 class="mission-card-title">Title 1</h6> <p class="p-special">Lorem Ipsum.</p> </div> </div> <div class="placeholder"></div>

2 个解决方案

解决方案1
 1 已采纳  2020-07-19 19:41:04

You need to make two small changes:你需要做两个小改动：

  1. You need to replace card.height with card.offsetHeight in your JS file.您需要在 JS 文件card.height替换为card.offsetHeight 。

  2. Use transition in your CSS file, you do not need animation for a fade in effect:在 CSS 文件中使用transition ，您不需要 animation 来获得淡入效果：

     .slide-in { opacity: 0%; transition: opacity 0.8s; }.active { transition: opacity 0.8s; opacity: 100%; visibility: visible;important; }

解决方案2
 0  2020-07-19 19:42:50

Here the image is already shown with opacity 1 and then once scrolled over it it will fade using just JS.在这里，图像已经以不透明度 1 显示，然后一旦滚动它，它将仅使用 JS 淡化。 

 // adds animation for section cards window.addEventListener('scroll', (e) => { last_known_scroll_position = window.scrollY; let img = document.getElementById("img-1"); if(img.offsetTop < last_known_scroll_position){ img.style.opacity= 0.1; }else{ img.style.opacity= 1; } });
 .slide-in { opacity: 50%; }.slide-in.active { opacity: 100%; -webkit-animation: animat_show 0.8s; animation: animat_show 0.8s; visibility: visible;important. }:lorem { margin-bottom; 500px: } img { width; 500px; }
 <section class="space"> <p class="lorem">lorem ipsum</p> <div class="slide-in"> <img class="img-1" id="img-1" src="https://image.flaticon.com/icons/svg/869/869767.svg" alt="confetti"> </div> <p class="lorem">lorem ipsum</p> </section>

使用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-window.onscroll。 为什么 ” <div class=”img“></div> ”在滚动时不会显示 - Vanilla Javascript - window.onscroll. Why does “<div class=”img“></div>” won't show when 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 使用 Pure Vanilla JavaScript 在视口上显示焦点 DIV 并在滚动时隐藏非焦点 DIV - Show Focused DIV on Viewport & Hide Unfocused DIVs on Scrolling using Pure Vanilla JavaScript 使用 Vanilla Javascript 切换 chekcbox 显示/隐藏两个 DIV 元素 - Switch chekcbox SHOW / HIDE two DIV elements using Vanilla Javascript Javascript：使用原版 javascript 隐藏和显示文本 - Javascript: hide and show text using vanilla javascript 如何使用vanilla JavaScript找到div的宽度？ - How to find the width of a div using vanilla JavaScript? 使用香草 JavaScript 正确隐藏取消隐藏 Div - Hiding Unhiding Div Properly using vanilla JavaScript 使用jQuery或JS滚动时如何隐藏和显示div - How to hide and show div when scrolling using jQuery or JS 需要使用Vanilla Javascript隐藏/显示子菜单 - Need to Hide / Show submenu using Vanilla Javascript 香草Javascript。 滚动时更改元素的样式。 - Vanilla Javascript. Change style of element when scrolling.
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM