.scroll() ne fonctionne pas comme il se doit

Question

Donc j'essaie de faire apparaître mon en-tête lorsque la page est défilée vers le bas et j'ai pensé que je pouvais le faire avec une simple instruction if. Cependant, la façon dont je l'ai fait, il ne «surveille» pas l'action de défilement. Ce que je veux dire, c'est qu'il définit automatiquement la hauteur de l'en-tête à 0 et rien d'autre, il ne fait rien quand la page est défilée.

Comment puis-je réécrire ceci pour définir la hauteur de l'en-tête à 0 lorsque la position de défilement supérieure est 0 et pour définir la hauteur à 80px lorsque défilée jusqu'à un certain degré?

$(document).ready(function() { 

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

Answer 1

défiler:

\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(... attacheront un écouteur d'événement à l'événement de défilement ou déclencher l'événement de défilement, en fonction des paramètres passés. Il n'est pas du tout utilisé pour obtenir la position défilement actuelle de l'élément (dans le scénario donné, il serait toujours retourner l'objet jQuery window, qui est toujours truthy.)

Ce que je crois que vous cherchez à faire est le suivant:

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

scrollTop() renvoie la valeur, en pixels, que l'élément (première) a été défilement. Ce qui signifie que si elle est égale à 0, l'élément est défilée vers le haut (ou .. unscrolled)

Answer 3

Juste un peu d'animation dans le cas où vous il été utile:

$(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>