スクロールを検出してタイトルを非表示および表示

1583 ワード
テキストリンク

概要


固定ヘッドの作業は完了したが、固定ヘッドにより欠点が生じた.たとえば、メニューをクリックすると、タイトルは移動する場所を隠しますが、タイトルはその場所にあるはずです.

そうではありません.下のように見えるはずです.

ヘザーは固定して、みんなにタイトルを見せたいと思っています.それなら、すべての部分のレイアウトを調整すればいいのですが、そうは思いません...複数のサイトを見て、考えていることをスクロールするときにタイトルがなく、少し上に行くとこのようなサイトがたくさんあります.

かいはつ


以前のコードでは
window.onscrollでscrollFunctionという関数が呼び出されました.
window.onscroll = function () {
    scrollFunction();
  };
この関数ではヘッダの表示と非表示を決めていますが、ここで計算すればいいです.
箱は全部で3つあり、これによって展示が決まるので、
1.一番上にスクロールする場合->見出しが表示されます
2.スクロールは一番上ではなく、スクロールが上昇しています.
3.スクロールは一番上ではなく、スクロールは下に向かっています->タイトルが見えません.
以下のように開発しました.
function scrollFunction() {
    ...
    if(document.getElementById("header") != null){
      let currScrollLoc = document.documentElement.scrollTop;
      if ( currScrollLoc <= 20 ) {
        document.getElementById("header")!.style.position = "relative";
      }
      else if(currScrollLoc > scrollLoc && scrollLoc > 0){
        document.getElementById("header")!.style.position = "relative"; 
      }
      else {
        document.getElementById("header")!.style.position = "fixed"; 
      }

      setScrollLoc(currScrollLoc);
    }
  }

とにかく今日も先端開発者として一段階成長しました!
ソートjava実装
[Swift]Unicode Scalarと文字列count時間複雑度関係