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.