Maison > Article > interface Web > Comment créer un en-tête collant avec CSS et JavaScript sans jQuery ?
Lors de la création d'un en-tête qui reste visible malgré le défilement, il est possible d'implémenter ce comportement en utilisant uniquement CSS et HTML sans avoir besoin de jQuery.
Introduisez une classe d'en-tête collante :
<code class="css">.sticky-header { width: 700px; height: 50px; background: orange; position: fixed; }</code>
Dans votre HTML, ajoutez un div avec la classe "sticky" :
<code class="html"><div class="sticky"></div></code>
Pour un contrôle précis de la fixation de l'en-tête, JavaScript est nécessaire pour les événements de défilement :
<code class="javascript">$(window).scroll(function() { var sticky = $('.sticky'), scroll = $(window).scrollTop(); if (scroll >= 100) { sticky.addClass('fixed'); } else { sticky.removeClass('fixed'); } });</code>
Pour déterminer le point de fixation en fonction de la position de l'élément collant sur l'écran, utilisez offset().top :
<code class="javascript">var stickyOffset = $('.sticky').offset().top; $(window).scroll(function() { var scroll = $(window).scrollTop(); if (scroll >= stickyOffset) { sticky.addClass('fixed'); } else { sticky.removeClass('fixed'); } });</code>
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!