On my website, I have a case study page that is pretty long with 10 sections, so I want to create a horizontal menu with links to each section on the page. The user will be able to swipe this horizontally for the small screen devices so that the user can access links that would normally be off the viewport canvas.
I understand how to achieve all of that but what I need is this; when the user scrolls down and reaches the fifth section who's menu link is slightly off-canvas to the right, the menu will slide left enough so that the link icon appears into the viewport stopping on the far left. This will, in turn, bring the other links that follow on from that one onto the canvas too.
The problem though is that if I add a class to the scrolling menu container which assigns a transform: translate(X) value and therefore animates it to the left when the user reaches the particular section, the whole menu fixes at that point, and it's not possible for the user to then manually swipe the menu back and forth to access any menu link they desire from that point on.
I also want the same to happen in reverse, so that after the above has triggered and the menu has shifted along to the left, when the user decides to scroll back up the page and past the section that triggered the initial menu slide action, it slides back to the right to its original position.
This behavior with the menu slide being triggered should happen each and any time the user scrolls past that certain point in either direction (up or down), yet the user should still be able to manually swipe the menu to any point either way.
I know all of this must be possible using Javascript but I've tried loads of different ideas, including element.scrollintoView, which doesn't work since assigning that to one IDs in the menu doesn't slide the whole menu over. I've also tried moving the menu by adding an animated class but that didn't work either.
Update:
I've created a basic example on code pen:
https://codepen.io/creativezest/pen/MWyqPYL
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Horizontal Scrolling Menu</title>
<meta name="description" content="An interactive getting started guide for Brackets.">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css">
</head>
<body>
<wrapper>
<div class="container heading">
<h1>Horizontal Scrolling Menu</h1>
</div>
<section id="home" class="page-section">
<div class="container">
<h2>Home</h2>
</div>
</section>
<section id="news" class="page-section">
<div class="container">
<h2>News</h2>
</div>
</section>
<section id="contact" class="page-section">
<div class="container">
<h2>Contact</h2>
</div>
</section>
<section id="about" class="page-section">
<div class="container">
<h2>About</h2>
</div>
</section>
<section id="support" class="page-section">
<div class="container">
<h2>Support</h2>
</div>
</section>
<section id="blog" class="page-section">
<div class="container">
<h2>Blog</h2>
</div>
</section>
<section id="tools" class="page-section">
<div class="container">
<h2>Tools</h2>
</div>
</section>
<section id="base" class="page-section">
<div class="container">
<h2>Base</h2>
</div>
</section>
<section id="custom" class="page-section">
<div class="container">
<h2>Custom</h2>
</div>
</section>
<section id="testimonials" class="page-section">
<div class="container">
<h2>Testimonials</h2>
</div>
</section>
<section id="more" class="page-section">
<div class="container">
<h2>More</h2>
</div>
</section>
<div id="scrollmenu">
<div class="scroll-links-container">
<a href="#home" class="link">Home</a>
<a href="#news" class="link">News</a>
<a href="#contact" class="link">Contact</a>
<a href="#about" class="link">About</a>
<a href="#support" class="link">Support</a>
<a href="#blog" class="link">Blog</a>
<a href="#tools" class="link">Tools</a>
<a href="#base" class="link">Base</a>
<a href="#custom" class="link">Custom</a>
<a href="#testimonials" class="link">Testimonials</a>
<a href="#more" class="link">More</a>
</div>
</div>
</wrapper>
body, html {
margin: 0;
padding: 0;
font-family: sans-serif;
font-size: 16px;
background-color: white;
}
html {
scroll-behavior: smooth;
}
wrapper {
display: block;
width: 360px;
margin: 0 auto;
background-color: black;
padding-top: 20px;
}
h1 {
font-family: sans-serif;
font-size: 3.5rem;
color: white;
padding: 0px 20px;
}
h2 {
font-family: sans-serif;
font-size: 2.5rem;
color: white;
}
section {
width: 360px;
background-color: transparent;
}
.container.heading {
padding: 20px 20px 20px 20px;
}
.container {
padding: 200px 40px 200px 40px;
}
div#scrollmenu {
position: fixed;
bottom: 0;
background-color: #333;
overflow: auto;
white-space: nowrap;
width: 360px;
margin: 0 auto;
text-align: center;
padding: 0;
margin: 0;
}
div#scrollmenu a {
display: inline-block;
color: white;
text-align: center;
padding: 25px 25px;
text-decoration: none;
}
div#scrollmenu a:hover {
background-color: #777;
}
.active {
background-color: #777;
}
.slide-about-left {
transform: translateX(-300px);
transition: transform 0.5s;
}
$(window).scroll(function() {
var hT = $('#about').offset().top,
hH = $('#about').outerHeight(),
wH = $(window).height(),
wS = $(this).scrollTop();
if (wS > (hT+hH-wH)){
$(".scroll-links-container").addClass("slide-about-left");
}
});
</body>
</html>
You'll see I've added some javascript to attempt to get the menu to scroll left when the page is scrolled down to the #about section so that the 'about' link in the bottom menu slides to the far left of the viewport. But it doesn't seem to be working.
As I explained in my previous post, this is what I am trying to achieve as well as make the menu scroll backward so that the 'home' link is in its original position on the far left of the viewport when the user scrolls back up past the #about section.
I also need the user to still be able to manually swipe the menu left and right after the above behaviors have taken place.
I would really appreciate any help anyone can give on this.
Many thanks.
Marc