web-dev-qa-db-fra.com

Sticky Header après le défilement

J'ai vu cet en-tête collant sur ce site: http://dunked.com/ (n'est plus actif, affiche le site archivé )

Lorsque vous faites défiler l'écran vers le bas, l'en-tête collant descend du haut.

J'ai regardé le code, mais ça a l'air vraiment compliqué. Je comprends seulement ceci: l’en-tête normal a été cloné avec JS et lorsque vous faites défiler la page, il s’anime en haut.

javascriptjqueryheadersticky
26
sascha

Voici un violon JS http://jsfiddle.net/ke9kW/1/

Comme le disent les autres, définissez l'en-tête sur fixed et lancez-le avec display: none

alors jQuery

$(window).scroll(function () {
  if ( $(this).scrollTop() > 200 && !$('header').hasClass('open') ) {
    $('header').addClass('open');
    $('header').slideDown();
   } else if ( $(this).scrollTop() <= 200 ) {
    $('header').removeClass('open');
    $('header').slideUp();
  }
});

où 200 est la hauteur en pixels à laquelle vous voudriez qu'il descende. L'ajout de la classe open nous permet d'exécuter un elseif au lieu d'un autre, de sorte que certains codes ne s'exécutent pas inutilement sur chaque scrollevent, économisez un peu de mémoire

10
joevallender

Voici toute une liste de jQuery plugins qui aideront à obtenir un effet similaire: http://jquery-plugins.net/tag/sticky-scroll

2
eagor

Je suggère d'utiliser collant js c'est la meilleure option que j'ai jamais vue. rien a faire juste annonce ce js sur toi 

 https://raw.githubusercontent.com/garand/sticky/master/jquery.sticky.js

et utilisez le code ci-dessous:

<script>
  $(document).ready(function(){
    $("#sticker").sticky({topSpacing:0});
  });
</script>

Son dépôt Git: https://github.com/garand/sticky

1
Shiv Singh

J'ai utilisé la fonction jQuery .scroll () pour suivre l'événement de la valeur de défilement de la barre d'outils à l'aide de scrollTop. J'ai ensuite utilisé une condition pour déterminer si elle était supérieure à la valeur de ce que je voulais remplacer. Dans l'exemple ci-dessous, il s'agissait de "Résultats". Si la valeur était true, l'étiquette de résultats ajoutait la classe 'fixedSimilarLabel' et les nouveaux styles étaient ensuite pris en compte.

    $('.toolbar').scroll(function (e) {
//console.info(e.currentTarget.scrollTop);
    if (e.currentTarget.scrollTop >= 130) {
        $('.results-label').addClass('fixedSimilarLabel');
    }
    else {      
        $('.results-label').removeClass('fixedSimilarLabel');
    }
});

http://codepen.io/franklynroth/pen/pjEzeK

1
Franklyn Roth

Ajouter un anti-rebond pour plus d'efficacité http://davidwalsh.name/javascript-debounce-function

0
mrdnk

une solution similaire utilisant jquery serait:

$(window).scroll(function () {
  $('.header').css('position','fixed');
});

Cela transforme l'en-tête en un élément à position fixe immédiatement lors du défilement

0
Matt Saunders

window bottom scroll to top scroll à l'aide de jquery.

 <script> 

 var lastScroll = 0;

 $(document).ready(function($) {

 $(window).scroll(function(){

 setTimeout(function() { 
    var scroll = $(window).scrollTop();
    if (scroll > lastScroll) {

        $("header").removeClass("menu-sticky");

    } 
    if (scroll == 0) {
    $("header").removeClass("menu-sticky");

    }
    else if (scroll < lastScroll - 5) {


        $("header").addClass("menu-sticky");

    }
    lastScroll = scroll;
    },0);
    });
   });
 </script>
0
Musaib Memdu

css:

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

JS:

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

Cela ne fonctionnait pas pour moi dans Firefox. 

Nous avons ajouté une condition selon que le code place le débordement au niveau HTML. Voir Animate scrollTop ne fonctionne pas dans firefox .

  var $header = $("#header #menu-wrap-left"),
  $clone = $header.before($header.clone().addClass("clone"));

  $(window).on("scroll", function() {
    var fromTop = Array(); 
    fromTop["body"] = $("body").scrollTop();
    fromTop["html"] = $("body,html").scrollTop();

if (fromTop["body"]) 
    $('body').toggleClass("down", (fromTop["body"] > 650));

if (fromTop["html"]) 
    $('body,html').toggleClass("down", (fromTop["html"] > 650));

  });
0
Megan