[JavaScript30] 📋 24. Sticky Nav

20464 ワード

24. 📋 Sticky Nav

スクロール時に固定されたメニュー.

イニシャルコード

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sticky Nav</title>
    <link rel="stylesheet" href="style_JuneHyung.css">
</head>
<body>
    <header>
        <h1>A story about getting lost.</h1>
    </header>

    <nav id="main">
        <ul>
            <li class="logo"><a href="#">LOST</a></li>
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Images</a></li>
            <li><a href="#">Locations</a></li>
            <li><a href="#">Maps</a></li>
        </ul>
    </nav>

    <div class="site-wrap">
        
   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore tempora rerum, est autem cupiditate~~</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore tempora rerum, est autem cupiditate~~~</p>
   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore tempora rerum, est autem cupiditate~~~</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore tempora rerum, est autem cupiditate~~~</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore tempora rerum, est autem cupiditate~~~</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore tempora rerum, est autem cupiditate~~~</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore tempora rerum, est autem cupiditate~~~</p>
   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore tempora rerum, est autem cupiditate~~~</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore tempora rerum, est autem cupiditate~~~</p>
   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore tempora rerum, est autem cupiditate~~~</p>

    <img src="http://unsplash.it/400/400" class="align-left slide-in">

   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore tempora rerum, est autem cupiditate~~~</p>

    <img src="http://unsplash.it/400/400" class="align-right slide-in">

   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore tempora rerum, est autem cupiditate~~~</p>



   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore tempora rerum, est autem cupiditate~~~</p>

    <img src="http://unsplash.it/400/400" class="align-right slide-in">

   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore tempora rerum, est autem cupiditate~~~</p>
   <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempore tempora rerum, est autem cupiditate~~~</p>
    </div>
    <script>
        
    </script>
</body>
</html>

初期画面

🌏 プロセス

👉 1.定数、変数の作成

const nav = document.querySelector('#main');
const topOfNav = nav.offsetTop;

メニュー領域とメニュー上部の座標値を保存します.

👉 2.スクロール時にメニューを固定します。

function fixNav(){
    // console.log(topOfNav, window.scrollY);
    if(window.scrollY >= topOfNav){
        document.body.style.paddingTop = nav.offsetHeight + 'px';
        document.body.classList.add('fixed-nav');
    }else{
        document.body.style.paddingTop = 0;
        document.body.classList.remove('fixed-nav');
    }
}

cssコンテンツの追加
fixed-navの他のcssを作成します.

.fixed-nav nav{
    position: fixed;
    box-shadow: 0 5px rgba(0,0,0,0.1);
}

.fixed-nav li.logo{
    max-width:500px;
}

メニューの上部がスクロールの上部値より小さい場合:つまり、下にスクロールすると.fixed-navというレベルを増やします.fixed-nav 삭제

LOGOの場合、既存のLOGOの幅が0の場合、幅を調整できます.

Reference

この問題について([JavaScript30] 📋 24. Sticky Nav), 我々は、より多くの情報をここで見つけました https://velog.io/@cjh951114/JavaScript30-24.-Sticky-Nav

テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。

Collection and Share based on the CC Protocol

[Web開発]CSSの基本知識

マルチピクチャアップロードと選択的に削除