0

在我的网站上，我有一个很长的案例研究页面，有 10 个部分，因此我想创建一个水平菜单，其中包含指向页面上每个部分的链接。用户将能够在小屏幕设备上水平滑动它，以便用户可以访问通常不在视口画布上的链接。

我了解如何实现所有这些，但我需要的是这个；当用户向下滚动并到达菜单链接稍微向右偏离画布的第五部分时，菜单将向左滑动到足以使链接图标出现在最左侧的视口中。反过来，这也会将来自该链接的其他链接也带到画布上。

但问题是，如果我向滚动菜单容器添加一个类，该类分配一个 transform: translate(X) 值并因此在用户到达特定部分时将其动画到左侧，整个菜单会在该点固定，它是用户不可能从那时起手动来回滑动菜单以访问他们想要的任何菜单链接。

我也希望同样的事情反过来发生，这样在上面触发并且菜单向左移动之后，当用户决定向上滚动页面并越过触发初始菜单滑动操作的部分时，它向右滑回其原始位置。

每当用户在任一方向（向上或向下）滚动经过该特定点时，触发菜单滑动的这种行为都应该发生，但用户仍然应该能够以任一方式手动将菜单滑动到任何点。

我知道所有这一切都必须使用 Javascript 才能实现，但我尝试了很多不同的想法，包括 element.scrollintoView，它不起作用，因为将其分配给菜单中的一个 ID 不会使整个菜单滑过。我还尝试通过添加动画类来移动菜单，但这也不起作用。

更新：

我在代码笔上创建了一个基本示例：

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>

您会看到我添加了一些 javascript 来尝试在页面向下滚动到 #about 部分时使菜单向左滚动，以便底部菜单中的“关于”链接滑动到视口的最左侧。但这似乎不起作用。

正如我在上一篇文章中所解释的那样，这就是我想要实现的目标以及使菜单向后滚动，以便当用户向上滚动过去时，“主页”链接位于视口最左侧的原始位置#about 部分。

在此处输入图像描述

在此处输入图像描述

我还需要用户在上述行为发生后仍然能够手动左右滑动菜单。

我非常感谢任何人对此提供的任何帮助。

非常感谢。

马克

4

0 回答 0