Comment réparer un en-tête de défilement

Je suis entrain de créer un en-tête qui une fois défile à une certaine quantité de pixels il fixe et qui reste en place.

Puis-je le faire en utilisant simplement le css et le html ou ai-je besoin de jquery trop?

J'ai créé une démonstration de sorte que vous pouvez comprendre. Toute aide serait super!

http://jsfiddle.net/gxRC9/4/

body{
    margin:0px;
    padding:0px;
}
.clear{
    clear:both;
}
.container{
    height:2000px;
}
.cover-photo-container{
width:700px;
height: 348px;
margin-bottom: 20px;
background-color:red;
}

.small-box{
    width:163px;
    height:100px;
    border:1px solid blue;
    float:left;
}

.sticky-header{
    width:700px;
    height:50px;
    background:orange;
    postion:fixed;
}

vous n'avez pas le faire sans l'aide de JS
Le problème avec cette approche et la suite des réponses est que vous vous retrouvez en s'appuyant sur le récipient étant rien de plus que le 2000px que vous spécifiez. Ce serait un échec dans la production, soit parce que vous devez garder le réglage. Ou vous poser les rédacteurs à ne jamais ajouter plus de contenu au-delà d'un certain nombre de mots. De toute façon cette approche n'est pas à l'échelle.
Quelque chose avec jquery et CSS peuvent vous aider à atteindre collant en-tête de défilement kvcodes.com/2017/03/jquery-simple-sticky-header-on-scroll

InformationsquelleAutor Paul Designer | 2013-10-03

105

Vous avez besoin de JS pour faire défiler les événements. La meilleure façon de faire cela est de définir une nouvelle classe CSS pour la position fixe qui sera affecté à la div lors du défilement va au-delà d'un certain point.

HTML
```
<div class="sticky"></div>
```
CSS
```
.fixed {
    position: fixed;
    top:0; left:0;
    width: 100%; }
```
jQuery
```
$(window).scroll(function(){
  var sticky = $('.sticky'),
      scroll = $(window).scrollTop();

  if (scroll >= 100) sticky.addClass('fixed');
  else sticky.removeClass('fixed');
});
```
Exemple de violon: http://jsfiddle.net/gxRC9/501/

EDIT: exemple

Si le point de déclenchement est inconnu mais devrait être à chaque fois que le collant élément atteint le haut de l'écran, offset().top peut être utilisé.
```
var stickyOffset = $('.sticky').offset().top;

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

  if (scroll >= stickyOffset) sticky.addClass('fixed');
  else sticky.removeClass('fixed');
});
```
Exemple de violon: http://jsfiddle.net/gxRC9/502/
- merci pour votre aide. pouvez-vous faire la boîte jaune fixe pas le rouge?
- Bien sûr, maintenant vous avez ce code, vous pouvez remplacer toutes les classes là. J'ai mis à jour ma réponse.
- Vous avez fait de bon truc je ne sais pas pourquoi quelqu'un downvoted.De toute façon +1 de moi.. cheers:)
- oui, même ma réponse était parfait aussi, mais encore deux votes négatifs.. hein si quelqu'un vote négatif, il/elle doit en expliquer la raison hein
- merci pour votre aide !
- Cool pas de soucis.
- Juste un peu d'ajuster, de modifier le 100 dans "if ($(window).scrollTop() >= 100) {" 180. Regarde abit plus propre 😉
- A été un peu lent dans ma réponse fait, mais juste pour prolonger cette réponse, si vous voulez seulement l'en-tête pour déplacer une fois que vous avez navigué jusqu'passé, il voici un violon
- Pouvez-vous préciser le nombre de pixels que vous voulez à l'utilisateur de faire défiler avant de l'en-tête se mette en place??? –
- Je crois que vous avez oublié une clôture </div> avant le collant en-tête. Veuillez vérifier votre code.
- Merci....Parfait...
- C'est une grande réponse, cependant, une fois que vous appliquez le fixe de la classe de la page devient beaucoup plus court et le contenu doit sauter, et si la page est d'une longueur où le défilement de la distance est inférieure à la hauteur de l'élément d'en-tête, il apparaîtra à sauter et ne pas les laisser vous voir au bas de la page. J'ai modifié cette réponse ci-dessous.
- Votre problème peut être facilement résolu avec un couple de lignes de CSS. En assurant le collant élément est toujours hors de la circulation du site (position: absolute) et pertinentes rembourrage dans le corps pour faire de la place pour elle.
- C'est une meilleure réponse que ma solution de contournement.
- et si nous ne savons pas le rembourrage, j'.e dans ce cas 100px ?
- vous pouvez utiliser "collante.toggleClass('fixe', faites défiler jusqu' >= stickyOffset);" au lieu de l'if-else
- grand. Pouvez-vous envisager de l'initialisation de la "colle" variable d'une fois avant (et en dehors) de la fonction de défilement.
InformationsquelleAutor Coop
14

J'ai modifié la Coop de réponse. Veuillez consulter l'exemple VIOLON
Voici mes modifications:
```
$(window).scroll(function(){
  if ($(window).scrollTop() >= 330) {
    $('.sticky-header').addClass('fixed');
   }
   else {
    $('.sticky-header').removeClass('fixed');
   }
});
```
- Meilleure réponse jusqu'à présent parce que ce réellement travaillé plus propre lorsque vous faites défiler le passé de l'élément.
- Cela peut-il être mis en œuvre comme fix-tête en haut, après le défilement de la page de destination div.
- oui, il peut @Shahil
InformationsquelleAutor Mobeen Abdullah
10

Je sais Coop a déjà répondu à cette question, mais voici une version qui a aussi des pistes où dans le document, le div est, plutôt que de compter sur une valeur statique:

http://jsfiddle.net/gxRC9/16/

Javascript
```
var offset = $( ".sticky-header" ).offset();
var sticky = document.getElementById("sticky-header")

$(window).scroll(function() {

    if ( $('body').scrollTop() > offset.top){
        $('.sticky-header').addClass('fixed');
    } else {
         $('.sticky-header').removeClass('fixed');
    } 

});
```
CSS
```
.fixed{
     position: fixed;
    top: 0px;
}
```
- Ouai décalage.top est bonne. C'est en fait la plus complète de la méthode, je wuld utiliser pour répondre dessins où div hauteurs sont susceptibles de changer.
- Yeap. Pas seulement réactive, elle pourrait être n'importe quoi, comme une image en hauteur, ou plus ou moins de texte dans un div au-dessus du collant élément.
- je pensais à la façon de Paul Designer va définir son statique faire défiler manuellement à chaque fois en fonction de la taille du document. Mais vous avez fait du bon travail @Riches
- Pouvez-vous préciser le nombre de pixels que vous voulez à l'utilisateur de faire défiler avant de l'en-tête se mette en place???
- Voulez-vous dire, combien de pixels passé le collant élément? Essayez ceci: jsfiddle.net/gxRC9/18
- oui, c'est ce que je veux dire :)?
- Cool, bien essayer ici: jsfiddle.net/gxRC9/18 il suffit de changer la valeur de additionalPixels
- J'ai juste essayé et lorsque vous modifiez la valeur du pixel, il ne semble pas y travailler??
InformationsquelleAutor Rich

Coop de réponse est excellent.

Cependant, il dépend de jQuery, voici une version qui n'a pas de dépendances:

HTML

<div id="sticky" class="sticky"></div>

CSS

.sticky {
  width: 100%
}

.fixed {
  position: fixed;
  top:0;
}

JS

(Cela utilise eyelidlessness réponse pour trouver des décalages dans Vanilla JS.)

function findOffset(element) {
  var top = 0, left = 0;

  do {
    top += element.offsetTop  || 0;
    left += element.offsetLeft || 0;
    element = element.offsetParent;
  } while(element);

  return {
    top: top,
    left: left
  };
}

window.onload = function () {
  var stickyHeader = document.getElementById('sticky');
  var headerOffset = findOffset(stickyHeader);

  window.onscroll = function() {
    //body.scrollTop is deprecated and no longer available on Firefox
    var bodyScrollTop = document.documentElement.scrollTop || document.body.scrollTop;

    if (bodyScrollTop > headerOffset.top) {
      stickyHeader.classList.add('fixed');
    } else {
      stickyHeader.classList.remove('fixed');
    }
  };
};

Exemple

https://jsbin.com/walabebita/edit?html,css,js,sortie

InformationsquelleAutor RubenSandwich

Coopératives réponse est bonne, la solution la plus simple, cependant, une fois que vous appliquez le fixe de la classe de la page devient beaucoup plus court et le contenu de "saut", et que si la page est d'une longueur où le défilement de la distance est inférieure à la hauteur de l'élément d'en-tête, il apparaîtra à sauter et ne pas les laisser vous voir au bas de la page.

La réponse que j'ai trouvé a été d'ajouter une entretoise div au-dessus de l'élément fixe (l'élément nav dans mon cas), et le mettre à la même hauteur que l'élément nav, et le configurer pour afficher aucun.

Lors de l'ajout de l' .fixes de classe à la valeur liquidative, de montrer le .nav-entretoise div, et lors du retrait, les cacher. Étant donné que la hauteur de la page change instantanément j'ai fixé la durée à 0.

HTML

<header>the element above the element that will become fixed</header>
<div class="nav-spacer"></div>
<nav></nav>

CSS

nav {
    position: relative;    
    height: 100px;
}
.nav-spacer{
    position: relative;
    height: 100px;
    display: none;
}
.fixed {
    position: fixed;
    top:0;
    left:0;
    width: 100%;
    /* I like to add a shadow on to the fixed element */
    -webkit-box-shadow: 0px 5px 10px 1px rgba(0,0,0,0.25);
    -moz-box-shadow: 0px 5px 10px 1px rgba(0,0,0,0.25);
    box-shadow: 0px 5px 10px 1px rgba(0,0,0,0.25);
}

JavaScript

var stickyOffset = $('nav').offset().top;

$(window).scroll(function(){
    if ($(window).scrollTop() >= stickyOffset){
        $('nav').addClass('fixed');
        //this makes the page length equal to what it was before fixing nav
        $('.nav-spacer').show(0); 
    }
    else {
        $('nav').removeClass('fixed');
        $('.nav-spacer').hide(0);
    }
});

InformationsquelleAutor Craig Jacobs

6

Juste bâtiment sur Riche de réponse, qui utilise le décalage.

J'ai modifié comme suit:
- Il n'était pas nécessaire pour le var $sticky Riches de l'exemple, il n'a rien fait
- J'ai déplacé le décalage de vérifier dans une fonction séparée, et l'a appelé
  sur le document prêt, ainsi que sur de défilement si la page se rafraîchit avec l'
  faites défiler jusqu'à mi-chemin en bas de la page, il redimensionne droite de suite sans avoir à attendre pour un défilement de déclenchement
```
jQuery(document).ready(function($){
    var offset = $( "#header" ).offset();
    checkOffset();

    $(window).scroll(function() {
        checkOffset();
    });

    function checkOffset() {
        if ( $(document).scrollTop() > offset.top){
            $('#header').addClass('fixed');
        } else {
            $('#header').removeClass('fixed');
        } 
    }

});
```
InformationsquelleAutor crdunst

Glorieux, en Pur HTML/CSS Solution

En 2019 avec CSS3, vous pouvez le faire sans Javascript. J'ai souvent faire collante en-têtes comme ceci:

CSS:

body {
  overflow-y: auto;
  margin: 0;
}

header {
  position: sticky; /* Allocates space for the element, but moves it with you when you scroll */
  top: 0; /* specifies the start position for the sticky behavior - 0 is pretty common */
  width: 100%;
  padding: 5px 0 5px 15px;
  color: white;
  background-color: #337AB7;
  margin: 0;
}

h1 {
  margin: 0;
}

div.big {
  width: 100%;
  min-height: 150vh;
  background-color: #1ABB9C;
  padding: 10px;
}

HTML:

<body>
<header><h1>Testquest</h1></header>
<div class="big">Just something big enough to scroll on</div>
</body>

position: -webkit-sticky; /* Safari */

InformationsquelleAutor ocket8888

Ou tout simplement ajouter un span de la balise avec la hauteur de l'en-tête fixe définie comme sa hauteur puis insérez-le à côté du collant en-tête:

$(function() {
  var $span_height = $('.fixed-header').height;
  var $span_tag = '<span style="display:block; height:' + $span_height + 'px"></span>';

  $('.fixed-header').after($span_tag);
});

InformationsquelleAutor Oni Victor

 $(document).ready(function(){

    var div=$('#header');
    var start=$(div).offset().top;

    $.event.add(window,'scroll',function(){
        var p=$(window).scrollTop();
        $(div).css('position',(p>start)?'fixed':'static');
        $(div).css('top',(p>start)?'0px':'');

    }); 
});

Il fonctionne parfaitement.

InformationsquelleAutor arjun

La solution choisie ne rentre pas bien dans ma page. C'est donc une version plus avancée qui fonctionne avec bootstrap.

Le javascript

var stickyOffset = $('.sticky-header').offset().top;

$(window).scroll(function () {
    var sticky = $('.sticky-header'),
        scroll = $(window).scrollTop(),
        header = $('.fixed-header-background');
    sticky.each(function() {
        var left = $(this).offset().left;
        $(this).data('left', left);//I store the left offset
    });

    if (scroll >= stickyOffset) {
        sticky.addClass('fixed');
        header.css('display', 'block');
        sticky.each(function() {
            $(this).css('left', $(this).data('left'));//I set the left offset
        });
    } else {
        sticky.removeClass('fixed');
        header.css('display', 'none');
        sticky.each(function () {
            $(this).css('left', '');//I remove the left offset
        });
    }
});

Le CSS

.fixed-header-background {
    display: none;
     position: fixed;
    top: 50px;
    width: 100%;
    height: 30px;
    background-color: #fff;
    z-index: 5;
    border-bottom-style: solid;
    border-bottom-color: #dedede;
    border-bottom-width: 2px;
}

.fixed{
     position: fixed;
    top: 52px;
    z-index: 6;
}

Et le HTML

    <div class="fixed-header-background"></div>
<table class="table table-hover table-condensed">
        <thead>
            <tr>
                <th></th>
                <th><span class="sticky-header">My header 1</span></th>
                <th><span class="sticky-header">My header 2</span></th>
            </tr>
        </thead>
        <tbody>
[....]

        </tbody>
    </table>

InformationsquelleAutor Daniel

0

Espérons que cette seule pièce, une autre solution sera aussi utile à quelqu'un d'autre qu'elle était pour moi.

Situation:

Dans une page HTML5, j'ai eu un menu qui a été un élément nav à l'intérieur d'un en-tête (ne pas L'en-tête mais un en-tête dans un autre élément).

Je voulais la navigation de bâton à la tête, une fois qu'un utilisateur fait défiler jusqu'à elle, mais avant cela, l'en-tête absolu placé (si je pouvais l'avoir superposition de quelque chose d'autre un peu).

Les solutions ci-dessus ne jamais déclenché un changement parce que .offsetTop n'allait pas changer car c'était un absolu positionné sur l'élément. En outre, l' .scrollTop propriété était tout simplement le top du top de la plupart des élément... c'est-à-dire 0 et serait toujours 0.

Tout les tests que j'ai effectués en utilisant ces deux (et même avec getBoundingClientRect résultats) ne serait pas me dire si le haut de la barre de navigation toujours défile vers le haut de la partie visible de la page (encore une fois, comme indiqué dans la console, ils sont simplement restés les mêmes numéros pendant le défilement s'est produite).

la Solution

La solution pour moi a été d'utiliser
```
window.visualViewport.pageTop
```
La valeur de la pageTop propriété reflète la taille de l'écran, donc de me permettre de suivre lorsqu'un élément est en référence aux limites de la zone visible.

Cela a permis à une simple fonction assignée à l'événement scroll de la fenêtre pour détecter lorsque le haut de la barre de navigation recoupé avec le haut de la zone visible et appliquer le style à faire coller vers le haut.

Sans doute inutile de dire, chaque fois que je fais affaire avec défilement je m'attends à utiliser cette solution par programmation répondent au mouvement des éléments de défilement.

Espère que cela aide quelqu'un d'autre.

InformationsquelleAutor MER

Vous devez vous connecter pour publier un commentaire.