希望社交媒體欄能夠在Scroll上消失
[英]Would Like Social Media Bar to Disappear on Scroll
問題描述
當用戶向下滾動時，我試圖讓我的社交媒體欄更多地離開和離開頁面。
當你一直向上滾動頁面時，我只想重新顯示該欄。 我想要的效果與此類似。 我希望我的消失在左邊，只有當用戶一直向上滾動頁面時才會重新出現。 如果可能的話，我希望將JavaScript保持在最低限度，並且（大部分）使用CSS轉換。
我目前的代碼是這樣的：
var prevScrollpos = window.pageYOffset; window.onscroll = function() { var currentScrollPos = window.pageYOffset; if (prevScrollpos > currentScrollPos) { document.getElementById("mySidenav").style.left = "0"; } else { document.getElementById("mySidenav").style.right = "-50px"; } prevScrollpos = currentScrollPos; }
#mySidenav a { position: absolute; left: -100px; transition: 0.3s; padding: 15px; width: auto; text-decoration: none; font-size: 20px; color: white; border-radius: 0 5px 5px 0; } #mySidenav a:hover { left: 0; } #about { top: 20px; background-color: #1DA1F2; } #blog { top: 80px; background-color: #4867AA; } #projects { top: 140px; background-color: #E03B65; } #contact { top: 200px; background-color: #FF4500; } #filler { margin-top: 2000px; }
<html> <head> <link href="style.css" rel="stylesheet" type="text/css" /> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.9/css/all.css" integrity="sha384-5SOiIsAziJl6AWe0HWRKTXlfcSHKmYV4RBF18PPJ173Kzn7jzMyFuTtk8JA7QQG1" crossorigin="anonymous"> </head> <body> <div id="mySidenav" class="sidenav"> <a href="#" id="about"> Twitter <i class="fab fa-twitter"></i> </a> <a href="#" id="blog">Facebook <i class="fab fa-facebook"></i> </a> <a href="#" id="projects"> Instagram <i class="fab fa-instagram"></i> </a> <a href="#" id="contact"> Reddit <i class="fab fa-reddit"></i> </a> </div> <p id="filler">Filler</p> </body> </html>
誰能幫助指導我朝正確的方向發展？
1 個解決方案
解決方案1
4 已采納 2018-12-12 02:07:27
如果我正確理解了您的問題，那么您可以通過添加以下隱藏菜單時應用的CSS來實現此目的：
#mySidenav.hidden a {
left: -200px;
}
接下來，您將更新腳本，以便根據滾動方向從#mySidenav應用或刪除hidden類：
var prevScrollpos = window.pageYOffset;
window.addEventListener("scroll", function() {
var currentScrollPos = window.pageYOffset;
var sideNavClassList = document.getElementById("mySidenav").classList;
// When new scroll position is less than previos, remove hidden
// class from #mySidenav so that it comes back into view, otherwise
// apply the hidden class to ensure that it's out of view
if (prevScrollpos > currentScrollPos) {
sideNavClassList.remove("hidden");
} else {
sideNavClassList.add("hidden");
}
prevScrollpos = currentScrollPos;
});
這是一個完整的工作片段 - 希望有所幫助！
var prevScrollpos = window.pageYOffset; window.addEventListener('scroll', function() { var currentScrollPos = window.pageYOffset; var sideNavClassList = document.getElementById("mySidenav").classList; if (prevScrollpos > currentScrollPos) { sideNavClassList.remove("hidden"); } else { sideNavClassList.add("hidden"); } prevScrollpos = currentScrollPos; })
#mySidenav.hidden a { left: -200px; } #mySidenav a { position: absolute; left: -100px; transition: 0.3s; padding: 15px; width: auto; text-decoration: none; font-size: 20px; color: white; border-radius: 0 5px 5px 0; } #mySidenav a:hover { left: 0; } #about { top: 20px; background-color: #1DA1F2; } #blog { top: 80px; background-color: #4867AA; } #projects { top: 140px; background-color: #E03B65; } #contact { top: 200px; background-color: #FF4500; } #filler { margin-top: 2000px; }
<html> <head> <link href="style.css" rel="stylesheet" type="text/css" /> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.9/css/all.css" integrity="sha384-5SOiIsAziJl6AWe0HWRKTXlfcSHKmYV4RBF18PPJ173Kzn7jzMyFuTtk8JA7QQG1" crossorigin="anonymous"> </head> <body> <div id="mySidenav" class="sidenav"> <a href="#" id="about"> Twitter <i class="fab fa-twitter"></i> </a> <a href="#" id="blog">Facebook <i class="fab fa-facebook"></i> </a> <a href="#" id="projects"> Instagram <i class="fab fa-instagram"></i> </a> <a href="#" id="contact"> Reddit <i class="fab fa-reddit"></i> </a> </div> <p id="filler">Filler</p> </body> </html>
讓無框 React/Electron 應用程序標題欄在滾動期間不消失
[英]Getting frameless React/Electron app title bar to not disappear during scroll
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.