.scroll（）はうまく動作しません

Question

ページがスクロールしたときにヘッダーを表示させようとしていて、単純なif文でそれを行うことができると思いました。しかし、私がやったやり方では、スクロール・アクションを「監視」しません。つまり、ヘッダーの高さを0に自動的に設定し、ページがスクロールダウンされても何もしません。

上のスクロール位置が0のときにヘッダーの高さを0に設定し、ある程度スクロールしたときに高さを80pxに設定するにはどうすればよいですか？

$(document).ready(function() { 

     if ($(window).scroll(0)) { 
      $('#header').css('height', '0'); 
     } 
     else{ 
      $('#header').css('height', '82px');  
     } 
}); 

Answer 1

はそれをスクロール：

\t $(document).ready(function() { 
 
\t \t $('header').hide(); 
 
\t \t $(window).scroll(function(){ 
 
\t \t \t if ($(window).scrollTop()<56){ 
 
\t \t \t \t $('header').hide(); 
 
\t \t \t }else{ 
 
\t \t \t \t $('header').show(); 
 
\t \t \t } 
 
\t \t }); 
 
\t });

\t header{ 
 
\t \t background:#222; 
 
\t \t height:56px; 
 
\t \t position:fixed; 
 
\t \t top:0; 
 
\t \t left:0; 
 
\t \t width:100%; 
 
\t } 
 
\t body{ 
 
\t \t height:3000px 
 
\t }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<header></header>

Answer 2

$(window).scroll(...は、スクロールイベントにイベントリスナーを添付したり、スクロールイベントをトリガし、渡されたパラメータに依存します。それは全くの要素の現在のスクロール位置を取得するために使用されない（特定のシナリオでは、それは常に常に truthyあるwindow jQueryオブジェクトを返します。）

私はあなたがする探していると信じて何以下れる：

$(document).ready(function() { 
    if ($(window).scrollTop() == 0) { 
     $('#header').css('height', '0'); 
    } 
    else{ 
     $('#header').css('height', '82px');  
    } 
}); 

scrollTop()（最初の）要素がスクロールされたことを、ピクセル単位で値を返します。それが0の場合は要素がトップ（または.. unscrolled）にスクロールされ、意味

Answer 3

この回答が役に立た場合はほんの少しのアニメーション：

$(document).ready(function() { 
 
    $(window).scroll(function() { 
 
    if ($(this).scrollTop() < 82) { 
 
     $("#header").css({ 
 
     "height": 0, 
 
     "border-bottom": "none" 
 
     }); 
 
    } else { 
 
     $("#header").css({ 
 
     "height": "82px", 
 
     "border-bottom": "1px solid #333" 
 
     }); 
 
    } 
 
    }); 
 
});

body { 
 
    margin: 0; 
 
    font-family: Helvetica, sans-serif; 
 
} 
 

 
#header { 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
    height: 0; 
 
    border-bottom: none; 
 
    background: rgba(0, 0, 0, 0.99); 
 
    transition: 0.5s all ease; 
 
    position: fixed; 
 
    top: 0; 
 
    width: 100%; 
 
    color: #fff; 
 
} 
 

 
#content { 
 
    line-height: 1.2; 
 
    font-size: 5em; 
 
}

<div id="header"> 
 
    <h3>I'm a header</h3> 
 
</div> 
 
<div id="content"> 
 
    <h3>Scroll Down</h3> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi leo purus, tempor id lobortis eget, pretium id lectus. Nam sed lorem quis velit efficitur gravida vel et enim. Ut laoreet sit amet enim ut tincidunt. Nunc vitae consectetur quam, ac varius 
 
    est. Ut ac sagittis nisi. Etiam luctus ullamcorper eros. Nam molestie consectetur risus, ac accumsan velit cursus efficitur. Phasellus porta neque ut arcu rutrum facilisis. Proin non imperdiet ante. Vestibulum elit augue, cursus et nulla id, volutpat 
 
    tincidunt ex. Nullam vitae nibh odio. Curabitur convallis sapien sit amet hendrerit vulputate. Phasellus sagittis suscipit augue nec congue. Pellentesque condimentum, eros vel auctor dapibus, velit enim sagittis nibh, sit amet efficitur erat sapien 
 
    ut turpis. Cras bibendum, ex ac elementum facilisis, neque libero lobortis nulla, id molestie lectus ex at felis. Praesent ut elementum dui, et vestibulum ipsum. Quisque in mi scelerisque, pharetra sem in, pellentesque ipsum. Nam ultrices, diam ac consectetur 
 
    viverra, nisl neque varius ante, vehicula semper ipsum velit at tellus. Sed velit massa, luctus id elit ut, volutpat rutrum erat. Nulla eu ipsum mauris. Etiam dictum viverra dui vel tempor. 
 
</div> 
 

 

 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>