web-dev-qa-db-fra.com

En-tête collant après un certain défilement?

ok voici un exemple de ce que je suis en train de demander, la barre de navigation de usatoday .

J'utilise l'affixe bootstrap. voici mon code

<div class="header">
  <div class="header-1">
    <h1>this is some logo</h1>
  </div>
  <div class="header-2">
    <h3>this is some heading</h3>
  </div>
</div>
<div class="content" style="height:2500px;">
</div>
<div class="footer">
    this is a footer
</div>

JavaScript

$('.header-2').affix({
});

comment puis-je faire que le div header-2 soit fixé en haut (quand il y a du défilement et que le div header-2 arrive juste en haut) à partir du site que j'ai mentionné plus tôt?

J'aimerais bien voir les header-1 et header-2, mais certains défilements devraient masquer header-1 et coller le plus haut header-2.

merci

javascriptjqueryhtmltwitter-bootstrapaffix
7
x0x

Voir ceci Jsfiddle

vous pouvez vérifier la position du curseur et ajouter une classe en conséquence

$(window).scroll(function () {
    if( $(window).scrollTop() > $('#header-2').offset().top && !($('#header-2').hasClass('posi'))){
      $('#header-2').addClass('posi');
    } else if ($(window).scrollTop() == 0){
      $('#header-2').removeClass('posi');
    }
});
13
John

utilisez jquery regardez cet exemple http://jsfiddle.net/5n5MA/2/

var fixmeTop = $('.fixme').offset().top; // Get initial position
$(window).scroll(function() {            // Assign scroll event listener
var currentScroll = $(window).scrollTop(); // Get current position
if (currentScroll >= fixmeTop) { // Make it fixed if you've scrolled to it
    $('.fixme').css({
        position: 'fixed',
        top: '0',
        left: '0'
    });
} else {                       // Make it static if you scroll above
    $('.fixme').css({
        position: 'static'
    });
}

});

5
Shailendra Sharma

Réponse bootstrap utilisant Bootstrap.affix()

$('.header-2').affix({
        offset: {
                 top: function () {
                      return (this.top = $(".header-2").offset().top);
                }
        }
});

Cela nécessite également CSS pour le positionnement fixe (voir le Docs ).

Le plugin affixe bascule entre trois classes, chacune représentant un état particulier : .Affix, .affix-top et .affix-bottom. Vous devez Fournir vous-même les styles de ces classes (indépendamment de ce plugin ) Pour gérer les positions réelles.

.header-2.affix {
   top: 0;
}

Exemple de travail sur Bootply: http://www.bootply.com/S03RlcT0z0

3
Pete TNT
<style>
  .header {
    top: 0%;
    left: 0%;
    width: 100%;
    position:fixed;
}
</style>

Je suis désolé de ne pas regarder votre problème avec soin.

Cela peut vous aider Problème avec en-tête fixe et affixe Bootstrap/Scrollspy - Ne pas sauter au bon endroit

1
TooJuniorToCode