control of scroll position with JavaScript

　スクロールにおいてのエレメントの表示位置を JavaScript によって変更する例です。

　エレメントの位置を固定するためにCSSでプロパティ設定をしておきます。例では、CSSにおけるクラス名stickyです。

- ad -

動作の確認

cssあり/なし、scriptあり/なしを選択することができます。HTMLだけなら、CSSありで、scriptありでと確かめることができます。

CSSあり scriptあり別ページで開きます。

HTML

　ここでは、ナビゲーションメニューがスクロールによって最上部に到達すると固定します。

<div class="base">
<header>
<a href="../"><img id="site_title" src="../img/19091501.png" alt="備忘録的プログラミングリファレンス" /></a>
<nav id="top_navi">
<ul>
<li><a href="../Example/">Tips</a></li>
<li><a href="../HTML/">HTML</a></li>
<li><a href="../CSS/">CSS</a></li>
<li><a href="../DOM/">DOM</a></li>
<li><a href="../Javascript/">JavaScript</a></li>
<li><a href="../SQL/">SQL</a></li>
</ul>
</nav>
</header>

<nav id="top_navi">
<p style="padding:10px 3px;">
<a class="current" href="../Example/">Example</a> | <a href="../HTML/">HTML</a> | <a href="../CSS/">CSS</a> | <a href="../DOM/">DOM</a> | <a href="../Javascript/">JavaScript</a>
</p>
</nav>
<main>
<h1>MAIN CONTENTS</h1>
<p>上のナビメニュー領域が一番上に到達すると固定し、この領域は下に潜り込んでいきます。</p>
</main>

<section class="for_ads for_ads_footer">
	<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script><ins class="adsbygoogle" style="display:block; text-align:center;" data-ad-layout="in-article" data-ad-format="fluid" data-ad-client="ca-pub-3439152705161912" data-ad-slot="3192738035"></ins><script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
</section>

<footer>
 <div id="site_title_footer">
        <a href="https://www.smpl-rfrns.net/">備忘録的プログラミングリファレンス</a>
    </div>
    <p><a href="../term_of_use.html">プライバシーポリシー</a></p>
    <div id="copyright">
        © A.Takahasi
    </div>
</footer>
</div>

css

　領域のスクロールの様子が分かりやすいように赤い点線が入っています。

CSSにおけるクラス名stickyは、エレメントの位置を固定するためのプロパティ設定です。

JavaScript

　この例では、ナビメニューをある位置までスクロールしたら固定しますが、幅に変化があるためにwidth値の取得と設定を行っています。