希望社交媒体栏能够在Scroll上消失
[英]Would Like Social Media Bar to Disappear on Scroll
问题描述
I am trying to have my social media bar more left and off the page when the user scrolls down. 
当用户向下滚动时，我试图让我的社交媒体栏更多地离开和离开页面。
I would only like the bar to re-appear when you scroll all the way back up the page. 当你一直向上滚动页面时，我只想重新显示该栏。 My desired effect is similar to this. 我想要的效果与此类似。 I would like mine to disappear to the left, and only re-appear when the user scrolls all the way back up the page. 我希望我的消失在左边，只有当用户一直向上滚动页面时才会重新出现。 If possible, I would like to keep the JavaScript to a minimum and (mostly) use CSS transform. 如果可能的话，我希望将JavaScript保持在最低限度，并且（大部分）使用CSS转换。
My current code is this: 我目前的代码是这样的：
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>
Could anyone help guide me in the right direction? 谁能帮助指导我朝正确的方向发展？
1 个解决方案
解决方案1
4 已采纳 2018-12-12 02:07:27
If I understand your question correctly, then you could achieve this by adding the following CSS that applies when the menu is to be hidden: 如果我正确理解了您的问题，那么您可以通过添加以下隐藏菜单时应用的CSS来实现此目的：
#mySidenav.hidden a {
left: -200px;
}
Next, you'd update your script so that the hidden class is applied or removed from #mySidenav depending on the scroll direction: 接下来，您将更新脚本，以便根据滚动方向从#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;
});
Here's a full working snippet - hope that helps! 这是一个完整的工作片段 - 希望有所帮助！
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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.