En-tête fixe en CSS pour le défilement conditionnel?

Je veux faire un en-tête div (comme une bannière) fixe uniquement lorsque l'en-tête est de tenter de sortir de l'écran lorsque l'utilisateur fait défiler vers le bas. Est-il possible de le faire sans l'aide de JS? Pour un exemple de Facebook timeline, si l'on fait défiler une bannière flotte au-dessus dès que la page de l'en-tête est hors de l'écran. Ma question est, est-il possible de le faire uniquement avec du CSS?

Dans le cas où il n'est pas assez claire, je veux savoir si un style "position: fixed" peut être appliqué de façon conditionnelle comme quand 80px de la page défile.

source d'informationauteur Roy | 2013-01-27

  1. 42

    Oui. Vous pouvez le faire en CSS. Ceci est réalisé en ayant un défilement normal d'en-tête, placé au-dessus d'un fixe, qui s'affiche seulement après que la normale défiler vers le haut au-dessus d'elle. C'est le genre de comment http://techcrunch.com est de le faire.

    Mise à jour [10/31/2013] - Techcrunch changé leur INTERFACE que récemment, donc vous ne pouvez pas voir plus là!

    Vérifier cette démo: http://jsfiddle.net/WDnyb/2/

    HTML

    <div class="header">Header</div>
<div class="outer">
    <span class="banner">LOGO</span>
    <div class="header">Header</div>
</div>
<div class="content">Content</div>

    Pertinentes CSS

    .header {
    width: 100%;
    position: fixed;
    top: 0;
    bottom: auto;
}
.outer {
    position: relative;
    height: 100px;
}
.outer .header {
    position: absolute;
    bottom: 0;
    z-index: 2;
    top: auto;
}
.content {
    height: 1500px;
    margin-top: 100px;
}
  2. 0

    Il n'est pas possible à l'aide de css. Vous pouvez le faire à l'aide de JavaScript ou jQuery. Parce qu'il faut certaines conditions.

  3. 0
    Html----included my content within

   <header1>
       ..............
  </header1> 

 JS

  <script>
  $(document).ready(function() {
   var $header1 = $("header1"),
    $clone = $header1.before($header1.clone().addClass("clone"));

     $(window).on("scroll", function() {
    var fromTop = $("body").scrollTop();
    $('body').toggleClass("down", (fromTop > 200));
 });
 });
</script>

    j'ai utilisé le script ci-dessus de faire un en-tête fixe,sa fonctionne très bien dans googlechrome pas dans firefox.....

  4. 0

    Cela peut maintenant être fait correctement et sans javascript avec position: sticky.

    Reportez-vous à https://css-tricks.com/position-sticky-2/ pour des exemples.

    attention: Au moment de l'écriture, il n'est pas pris en charge sur IE11, opera mini, android et navigateur par défaut: https://caniuse.com/#feat=css-sticky