Javascript Girl
  1. Javascript Girl
  3. En-tête corrigé en mode défilement
Intereting Posts
Quand les objets JavaScript sont-ils détruits? Intellisense de JSDoc ne fonctionne pas pour les types importés dans VSCode Iframe vs innerHTML pour un dialogue modal – qui est mieux? Youtube api possède le titre actuel de la vidéo Vérification nulle de JavaScript Comment ajouter des popup sur les marqueurs des waypoints, y compris le démarrage et la fin en utilisant la machine de routage? Obtenir l'URL actuelle de Flash à partir de JavaScript en utilisant ExternalInterface et IE Définissez par programmation la source de données pour Crystal Report sur Crystal Server via Crystal Web Services Pourquoi le Compilateur de clôture de Google laisse-t-il quelques espaces ou quêtes de ligne inutiles? Passer le tableau de PHP en fonction de Javascript externe en tant que tableau Comment créez-vous un marqueur avec une icône personnalisée pour google maps API v3? Angular.js – la fonction de contrôleur pour filtrer les caractères non valides de l'entrée ne supprime pas de caractères jusqu'à ce qu'un caractère valide soit entré Comment déclarer constantes de chaîne en JavaScript? Application de chat utilisant le framework d'application Web jquerymobile Comment gérer 'undefined' dans javascript

En-tête corrigé en mode défilement

J'ai l'en-tête d'une table au milieu d'une page, mais comme la page est énorme, je souhaite réparer l'en-tête vers le haut du navigateur pendant que je me déplace vers le bas pour la page …

Donc, ma question est la suivante: comment puis-je définir l'en-tête pour être normal, jusqu'à ce que l'utilisateur se déplace vers le bas et que la bordure supérieure de l'en-tête touche la bordure du navigateur, où il doit rester réparé sur cette position, peu importe combien l'utilisateur se déplace?

Permettez-moi d'expliquer comment cela pourrait être fait.

Pas

  1. Trouvez l'en-tête de votre table et enregistrez sa position
  2. Ajoutez un auditeur à l'événement de scroll la fenêtre.
  3. Vérifiez que la fenêtre se déplace contre la position de l'en-tête de votre table
    1. Si la position <fenêtre défile – ajoutez une classe pour corriger l'en-tête de la table
    2. Sinon, réinitialisez le css pour vous comporter comme un en-tête normal.

J'ai posté un violon que vous pouvez trouver ici .

Exemple de code

HTML 

 <div class='lots_of_stuff_in_here'> ... </div> <table> <thead id='my_fixable_table_header'> <tr> <th>My awsesome header number 1</th> <th>My awsesome header number 2</th> </tr> </thead> <tbody> <tr> <td>Content</td> <td>Content</td> </tr> // much more content </tbody> </table>

Javascript 

 // Just so you get the idea behind the code var myHeader = $('#my_fixable_table_header'); myHeader.data( 'position', myHeader.position() ); $(window).scroll(function(){ var hPos = myHeader.data('position'), scroll = getScroll(); if ( hPos.top < scroll.top ){ myHeader.addClass('fixed'); } else { myHeader.removeClass('fixed'); } }); function getScroll () { var b = document.body; var e = document.documentElement; return { left: parseFloat( window.pageXOffset || b.scrollLeft || e.scrollLeft ), top: parseFloat( window.pageYOffset || b.scrollTop || e.scrollTop ) }; }

Vous recherchez une «boîte collante» orientée horizontalement qui vous suit dans la page pendant que vous vous déplacez.

Voici un guide qui explique comment créer cet effet pour une barre latérale: http://css-tricks.com/scrollfollow-sidebar/

J'ai modifié le code pour fonctionner avec un exemple générique qui s'étend sur la largeur de la page:

HTML: 

 <div class="wrapper"> <div class="head">HEAD</div> <div class="header">Table Header</div> <div class="content">Content</div> <div class="footer">Footer</div> </div>​

CSS: 

 .wrapper { border:1px solid red; } .head{ height: 100px; background: gray; } .header { background:red; height:100px; left:0; right:0; top:0px; margin-top:100px; position:absolute; } .content { background:green; height:1000px; } .footer { background:blue; height:100px; }

JQuery: 

 $(function() { var $sidebar = $(".header"), $window = $(window), offset = $sidebar.offset(), topPadding = 0; $window.scroll(function() { if ($window.scrollTop() > offset.top) { $sidebar.stop().animate({ top: $window.scrollTop() - offset.top + topPadding }); } else { $sidebar.stop().animate({ top: 0 }); } }); });​

Cela animera le bloc d'en-tête en vue lorsque vous faites défiler au-delà de l'origine.

JsFiddle ici

Vous pouvez essayer d'inclure les éléments inférieurs sous l'en-tête dans un div puis ajouter la classe à ce débordement de jeu div à automatique

J'espère que vous ressemblez à cette démo Header Fix

HTML 

 <div class="wrapper"> <div class="header">Header Fix</div> <div class="content">Content</div> <div class="footer">Footer</div> </div>

CSS 

 .wrapper { border:1px solid red; } .header { background:red; height:100px; position:fixed; left:0; right:0; top:0; } .content { background:green; height:1000px; } .footer { background:blue; height:100px; }

Pour garder la position réparée sur n'importe quel élément de bloc, vous devez utiliser la propriété absolue ou fixe dans l'attribut d'affichage du style, mais n'oubliez pas de donner assez d'espace et de rupture aux éléments supérieurs sinon il passera sous la section d'en-tête. 

 $(window).scroll(function() { if ($(this).scrollTop() > 100){ $('header').addClass("sticky"); } else{ $('header').removeClass("sticky"); } });

Css: 

 header.sticky { font-size: 24px; line-height: 48px; height: 48px; background: #efc47D; text-align: left; padding-left: 20px; }