Javascript 用于使元素在滚动后消失并重新出现
[英]Javascript for making the element disappear and reappear after scroll
问题描述
我希望一个元素在从顶部滚动后消失并重新出现。 我为此找到了 javascript，但有些不对劲。 我对 JS 不太了解，我在这里找到它，插入它，但它不能正常工作 - 它只会使元素改变 position。 我在 StackExchange 和 Internet 上找到的 javascript 的多个示例由于某种原因也不起作用。
如何使元素在向下滚动后消失并在滚动回顶部后重新出现？
我还在小屏幕上为这个元素设置了 CSS，那么我应该为小屏幕制作单独的脚本吗？
var prevScrollpos = window.pageYOffset; window.onscroll = function() { var currentScrollPos = window.pageYOffset; if (prevScrollpos > currentScrollPos) { document.getElementById("stub").style.top = "0"; } else { document.getElementById("stub").style.top = "150px"; } prevScrollpos = currentScrollPos; }
.stub { background-color: #577284; float: right; position: fixed; right: 0; text-transform: uppercase; font-family: 'Yanone Kaffeesatz', sans-serif; font-weight: 700; padding: 10px; border: 3px solid #ff8000; margin-right: 1em; } #stublink { color: #F3E0BE; text-decoration: none; }.stub:hover.pagenav { display: block; position: absolute; top: 100%; left: -3px; width: calc(100% + 6px); }.pagenav { background-color: #577284; display: none; text-transform: uppercase; font-size: 0.8em; font-family: 'Yanone Kaffeesatz', sans-serif; font-weight: 700; border: 3px solid #ff8000; border-top: none; padding-bottom: 10px; }.pagenav a { display: block; color: #F3E0BE; padding: 6px 0px 0px 8px; }.pagenav a:hover { box-shadow: inset 5px 0 0 0 #ff8000 } body { height: 200vh }; @media only screen and (max-width: 670px) {.stub { right: 0; left: auto; top: 0; bottom: auto; }.stub:hover.pagenav { display: block; position: absolute; top: 100%; left: -3px; } }
<body> <div class="stub" id="stub"> <div class="pagenav"> <a href="#last"> <table> <tr> <td>02.19 03.20</td> <td>:</td> <td class="two"></td> </tr> </table> </a> <a href="#previous"> <table> <tr> <td>02.18 02.19</td> <td>:</td> <td class="two"></td> </tr> </table> </a> <a href="#dec17"> <table> <tr> <td>12.17 04.18</td> <td>:</td> <td class="two"></td> </tr> </table> </a> <a href="#nov17"> <table> <tr> <td>11.17 01.18</td> <td>:</td> <td class="two"></td> </tr> </table> </a> <a href="#sep16"> <table> <tr> <td>09.16 11.17</td> <td>:</td> <td class="two"></td> </tr> </table> </a> <a href="#sep15"> <table> <tr> <td>09.15 08.16</td> <td>:</td> <td class="two"></td> </tr> </table> </a> <a href="#jan15"> <table> <tr> <td>01.15 03.16</td> <td>:</td> <td class="two"></td> </tr> </table> </a> <a href="#jan14"> <table> <tr> <td>01.14 08.15</td> <td>:</td> <td class="two"></td> </tr> </table> </a> </div><a id="stublink" href=#>Pagemenu</a> </div> <script></script> </body>
3 个解决方案
解决方案1
2 已采纳 2020-05-02 14:13:07
更改该行 document.getElementById("stub").style.top = "0"; 对于那个 document.getElementById("stub").style.block = "block";
var prevScrollpos = window.pageYOffset; window.onscroll = function() { var currentScrollPos = window.pageYOffset; if (prevScrollpos > currentScrollPos) { document.getElementById("stub").style.display = "block"; } else { document.getElementById("stub").style.display = "none"; } prevScrollpos = currentScrollPos; }
.stub { background-color: #577284; float: right; position: fixed; right: 0; text-transform: uppercase; font-family: 'Yanone Kaffeesatz', sans-serif; font-weight: 700; padding: 10px; border: 3px solid #ff8000; margin-right: 1em; } #stublink { color: #F3E0BE; text-decoration: none; }.stub:hover.pagenav { display: block; position: absolute; top: 100%; left: -3px; width: calc(100% + 6px); }.pagenav { background-color: #577284; display: none; text-transform: uppercase; font-size: 0.8em; font-family: 'Yanone Kaffeesatz', sans-serif; font-weight: 700; border: 3px solid #ff8000; border-top: none; padding-bottom: 10px; }.pagenav a { display: block; color: #F3E0BE; padding: 6px 0px 0px 8px; }.pagenav a:hover { box-shadow: inset 5px 0 0 0 #ff8000 } body { height: 200vh }; @media only screen and (max-width: 670px) {.stub { right: 0; left: auto; top: 0; bottom: auto; }.stub:hover.pagenav { display: block; position: absolute; top: 100%; left: -3px; } }
<body> <div class="stub" id="stub"> <div class="pagenav"> <a href="#last"> <table> <tr> <td>02.19 03.20</td> <td>:</td> <td class="two"></td> </tr> </table> </a> <a href="#previous"> <table> <tr> <td>02.18 02.19</td> <td>:</td> <td class="two"></td> </tr> </table> </a> <a href="#dec17"> <table> <tr> <td>12.17 04.18</td> <td>:</td> <td class="two"></td> </tr> </table> </a> <a href="#nov17"> <table> <tr> <td>11.17 01.18</td> <td>:</td> <td class="two"></td> </tr> </table> </a> <a href="#sep16"> <table> <tr> <td>09.16 11.17</td> <td>:</td> <td class="two"></td> </tr> </table> </a> <a href="#sep15"> <table> <tr> <td>09.15 08.16</td> <td>:</td> <td class="two"></td> </tr> </table> </a> <a href="#jan15"> <table> <tr> <td>01.15 03.16</td> <td>:</td> <td class="two"></td> </tr> </table> </a> <a href="#jan14"> <table> <tr> <td>01.14 08.15</td> <td>:</td> <td class="two"></td> </tr> </table> </a> </div><a id="stublink" href=#>Pagemenu</a> </div> <script></script> </body>
解决方案2
1 2020-05-02 14:10:58
您需要使用id为“存根”的元素的style.display属性并将其设置为：
- 当
prevScrollPos > currentScrollPos时“阻塞”； - 在其他情况下为“无”。
var prevScrollPos = window.pageYOffset; window.onscroll = function() { var currentScrollPos = window.pageYOffset; document.getElementById("stub").style.display = prevScrollPos > currentScrollPos? "block": "none"; prevScrollPos = currentScrollPos; }
.stub { background-color: #577284; float: right; position: fixed; right: 0; text-transform: uppercase; font-family: 'Yanone Kaffeesatz', sans-serif; font-weight: 700; padding: 10px; border: 3px solid #ff8000; margin-right: 1em; } #stublink { color: #F3E0BE; text-decoration: none; }.stub:hover.pagenav { display: block; position: absolute; top: 100%; left: -3px; width: calc(100% + 6px); }.pagenav { background-color: #577284; display: none; text-transform: uppercase; font-size: 0.8em; font-family: 'Yanone Kaffeesatz', sans-serif; font-weight: 700; border: 3px solid #ff8000; border-top: none; padding-bottom: 10px; }.pagenav a { display: block; color: #F3E0BE; padding: 6px 0px 0px 8px; }.pagenav a:hover { box-shadow: inset 5px 0 0 0 #ff8000 } body { height: 200vh }; @media only screen and (max-width: 670px) {.stub { right: 0; left: auto; top: 0; bottom: auto; }.stub:hover.pagenav { display: block; position: absolute; top: 100%; left: -3px; } }
<div class="stub" id="stub"> <div class="pagenav"> <a href="#last"> <table> <tr> <td>02.19 03.20</td> <td>:</td> <td class="two"></td> </tr> </table> </a> <a href="#previous"> <table> <tr> <td>02.18 02.19</td> <td>:</td> <td class="two"></td> </tr> </table> </a> <a href="#dec17"> <table> <tr> <td>12.17 04.18</td> <td>:</td> <td class="two"></td> </tr> </table> </a> <a href="#nov17"> <table> <tr> <td>11.17 01.18</td> <td>:</td> <td class="two"></td> </tr> </table> </a> <a href="#sep16"> <table> <tr> <td>09.16 11.17</td> <td>:</td> <td class="two"></td> </tr> </table> </a> <a href="#sep15"> <table> <tr> <td>09.15 08.16</td> <td>:</td> <td class="two"></td> </tr> </table> </a> <a href="#jan15"> <table> <tr> <td>01.15 03.16</td> <td>:</td> <td class="two"></td> </tr> </table> </a> <a href="#jan14"> <table> <tr> <td>01.14 08.15</td> <td>:</td> <td class="two"></td> </tr> </table> </a> </div><a id="stublink" href=#>Pagemenu</a> </div>
解决方案3
0 2020-05-02 14:49:16
我会使用交叉点观察器 api https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API
如果要使用display css 属性，请小心，因为使用显示属性：
- 如果一个元素是
display: none它根本不会被渲染（尝试使用visibility: hidden或opacity: 0） - css 过渡不起作用。
所以我建议使用不透明度。
css
.stub {
transition: opacity 1s linear;
opacity: 0;
}
.stub.triggered {
opacity: 1;
}
javascript：
const options = {
root: null, // The document viewport (default)
rootMargin: '0px', // No offset from the root element (default)
threshold: 1.0, // Full intersection into the root element
};
const obs = new IntersectionObserver( elms => {
elms.forEach( curr => {
if(curr.intersectionRatio < options.threshold) {
curr.target.classList.remove('triggered')
} else {
curr.target.classList.add('triggered')
}
})
}, options)
Array.from(document.querySelectorAll('.stub')).forEach(obs.observe.bind(obs))
正如您在 MDN 页面上看到的，如果需要，可以使用 Internet Explorer polyfill https://github.com/w3c/IntersectionObserver
Javascript-点击消失的方块会重新出现在其他地方
[英]Javascript - Block that should disappear on click reappear elsewhere
赛普拉斯验证元素不闪烁（消失然后快速重新出现）
[英]Cypress verify element does NOT flicker (disappear then quickly reappear)
在Rails中，jQuery对象在页面加载后消失，刷新后重新出现
[英]In Rails, jQuery objects disappear after pageload, reappear on refresh
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.