私の Web サイトには、10 セクションからなるかなり長いケース スタディ ページがあるため、ページの各セクションへのリンクを含む水平メニューを作成したいと考えています。ユーザーは、通常はビューポート キャンバスの外にあるリンクにアクセスできるように、小さな画面のデバイスでこれを水平方向にスワイプできます。
そのすべてを達成する方法は理解していますが、必要なのはこれです。ユーザーが下にスクロールして 5 番目のセクションに到達すると、メニュー リンクが右側のキャンバスからわずかに外れます。メニューは十分に左にスライドし、リンク アイコンがビューポートに表示されて左端で停止します。これにより、そのリンクから続く他のリンクもキャンバスに表示されます。
ただし、問題は、transform: translate(X) 値を割り当てるクラスをスクロール メニュー コンテナに追加すると、ユーザーが特定のセクションに到達したときに左にアニメーション化されるため、メニュー全体がその時点で修正され、それがユーザーが手動でメニューを前後にスワイプして、その時点から必要なメニュー リンクにアクセスすることはできません。
また、同じことが逆に発生するようにしたいので、上記がトリガーされてメニューが左に移動した後、ユーザーがページを上にスクロールして最初のメニュースライドアクションをトリガーしたセクションを過ぎたときに、右にスライドして元の位置に戻ります。
メニュー スライドがトリガーされるこの動作は、ユーザーがいずれかの方向 (上または下) に特定のポイントを過ぎてスクロールするたびに発生する必要がありますが、ユーザーはいずれの方向にも手動でメニューを任意のポイントにスワイプできる必要があります。
これはすべてJavascriptを使用して可能でなければならないことを知っていますが、メニュー内の1つのIDに割り当てるとメニュー全体がスライドしないため、element.scrollintoViewを含むさまざまなアイデアを試しました。また、アニメーション化されたクラスを追加してメニューを移動しようとしましたが、それもうまくいきませんでした。
アップデート：
コードペンで基本的な例を作成しました：
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>
ページが #about セクションまで下にスクロールされたときに、メニューを左にスクロールして、下部メニューの「about」リンクがビューポートの左端にスライドするように、JavaScript を追加したことがわかります。しかし、それは機能していないようです。
以前の投稿で説明したように、これは私が達成しようとしているものであり、メニューを後方にスクロールして、ユーザーが過去にスクロールしたときに「ホーム」リンクがビューポートの左端の元の位置にあるようにすることです#about セクション。
また、上記の動作が発生した後も、ユーザーが手動でメニューを左右にスワイプできるようにする必要があります。
誰でもこれについて何か助けていただければ幸いです。
どうもありがとう。
マルク