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.
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?
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:
#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:
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.