Javascript_30_24

26861 ワード
javascript30 テキストリンク

こんにちは！


デレクです😃


今日は私が予備軍を受け入れる日です:)実は今受け入れています.
... 開くと、경청하며投稿が整理されます.
今日はDay 24の計画を整理します
これは後でホームページを作ったり、美しいメニューバーを作ったりするときに必ず使う内容かもしれません.

24. Sticky Nav


n/a.ターゲット



ユーザーがページをスクロールするにつれて、上部のメニューバーで簡単なアニメーションを実現します.
ポートフォリオサイトやホームページを作成する際に使う価値のあるテーマだと思います.

DerekとWes Bos実装コード

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

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

window.addEventListener("scroll", fixNav);
簡単です!しかし今日のテーマはHTML内容も添付しないと理解できないので、HTML内容を追加します.
<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">
  ...
</div>
ユーザーと対話するのはnavtag!つまり.
<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>
ѐの上の|ʢ4|が|ʢ4|のラベルがメニューバーです!

1.変数の設定

const nav = document.querySelector("#main");
const topOfNav = nav.offsetTop;
mainメニューバー要素、idこのメニューバーの上部位置値:)

2.登録イベント

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

window.addEventListener("scroll", fixNav);
1に登録されている変数を使用してイベントを登録します.nav関数を見ると、条件文があります.
if(window.scrollY >= topOfNav)
この条件文では、ユーザーが横方向に何回スクロールしたか、および何nav値をスクロールしたかを確認します.
すなわち、ユーザが、topOfNavのメニューバー上部の位置よりもメニューバー上部の位置でスクロールする場合、fixNavというクラスをtopOfNavに追加します.そうでなければ、navクラスを削除します.

3.制御fixed-nav属性


では、このクラスのnav属性を見てみましょう.
.fixed-nav nav {
  position: fixed;
  box-shadow: 0 5px rgba(0, 0, 0, 0.2);
}
簡単です!スクロール回数が多いほど、メニューバーを固定するだけで済みます.したがって、fixed-navの値はCSSに変更されます.
メニューバーを固定するほか、プロパティを変更することもできます.

メニューバーが固定されると、左に小さなラベルが見えます!
これはfixed-navで実現できる.
li.logo {
  max-width: 0;
  overflow: hidden;
  background: white;
  transition: all 1s;
  font-weight: 600;
  font-size: 30px;
}

.fixed-nav li.logo {
  max-width: 500px;
}
もともとはcssにのみ適したpositionがfixedになればよい.
つまり、ある場所にcssclassがあれば、li.logo500 pxが固定されます!
その場所はどこでしょうか、
function fixNav () {
  if(window.scrollY >= topOfNav) {
    document.body.classList.add("fixed-nav");
    ...
ここにはcssに貼られているのが見えます!
ユーザーがスクロールしすぎると、.fixed-nav li.logoTAGfixed-navclass!max-width底部のクラスがbodyのbodyタグには、次のものが含まれます.fixed-nav属性が有効になります!

4.制御<body class="fixed-nav">


ここではいくつかの疑問があるかもしれませんが、logo関数には特別な部分があります.
function fixNav () {
  if(window.scrollY >= topOfNav) {
    document.body.classList.add("fixed-nav");
    document.body.style.paddingTop = nav.offsetHeight + "px";
  } else {
    document.body.style.paddingTop = 0;
    document.body.classList.remove("fixed-nav");
  }
}
制御liの部分!なぜなら、
  • mix-width: 500pxラベルがスクロールするにつれてpaddingTopはfixNavになります.
  • paddingTopnavposition標高とマーク高さの比fixed標高は瞬時に消える.
    • このような状況を防ぐためだ.直接展示すると、こうなります!
    スクロールすると、底の段落が境界からパチパチと上に飛び上がります!
    これを回避するために、positionの値をfixedに入力するか、0に設定するなどの操作を追加しました.
    これは簡単ですが、いつか使うテーマを整理しました!

    エラーや修正が必要な場合は、いつでもフィードバックしてください.
    ありがとう!🤗
    二分検索実装の詳細
    [Git]Gitコマンドを整理し続けます!(2)