Maison > interface Web > tutoriel CSS > le corps du texte

Comment créer un en-tête fixe lors du défilement à l'aide de CSS et JavaScript ?

Linda Hamilton
Libérer: 2024-11-01 04:34:28
original
601 Les gens l'ont consulté

How to Create a Fixed Header on Scroll Using CSS and JavaScript?

Création d'un en-tête fixe lors du défilement à l'aide de CSS et JavaScript

Dans ce scénario, nous visons à créer un en-tête qui devient fixe et reste dans lieu lors du défilement au-delà d'un certain point.

Approche CSS et HTML

Utiliser uniquement CSS et HTML n'est pas suffisant pour obtenir cette fonctionnalité. CSS seul ne fournit pas de solution pour attacher un élément à une position de défilement spécifique.

Intégration JavaScript

Pour corriger un en-tête lors du défilement, JavaScript est requis pour la gestion des événements . Les étapes suivantes décrivent la solution :

  1. Définir la classe de position fixe :

    <code class="css">.fixed {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
    }</code>
    Copier après la connexion
  2. Attribuer la classe sur le 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>
    Copier après la connexion

    Ici, lorsque la position de défilement dépasse 100 pixels, la classe « fixe » est ajoutée à l'élément « .sticky », le fixant en place.

Exemple :

Le code HTML suivant définit un en-tête fixe :

<code class="html"><div class="sticky">Header</div></code>
Copier après la connexion

Démo :

[Fiddle Demo](https://jsfiddle.net/gxRC9/501/)

Exemple étendu :

Si le point de déclenchement doit se produire lorsque l'élément collant atteint le haut de l'écran, nous pouvons utiliser offset().top:

<code class="javascript">var stickyOffset = $('.sticky').offset().top;

$(window).scroll(function() {
    var sticky = $('.sticky'),
        scroll = $(window).scrollTop();

    if (scroll >= stickyOffset) {
        sticky.addClass('fixed');
    } else {
        sticky.removeClass('fixed');
    }
});</code>
Copier après la connexion

Extended Demo:

[Extended Fiddle Demo]( https://jsfiddle.net/gxRC9/502/)

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!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!