web-dev-qa-db-fra.com

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

Je veux que l'en-tête div (comme une bannière) ne soit corrigé que lorsque l'en-tête tente de sortir de l'écran lorsque l'utilisateur fait défiler l'écran vers le bas. Est-il possible de se passer de JS? Par exemple, dans la chronologie de Facebook, si nous faisons défiler une bannière, une bannière apparaît dès que l'en-tête de la page disparaît de l'écran. Ma question est, est-il possible de faire avec seulement CSS?

Au cas où cela ne serait pas assez clair, je veux savoir si un style "position: fixed" peut être appliqué de manière conditionnelle, comme lorsque 80px de la page est défilé.

csscss3
12
Roy

Oui. Vous pouvez le faire avec seulement CSS. Cela se fait en ayant un en-tête de défilement normal, placé au-dessus d'un en-tête fixe, qui apparaît uniquement après que l'en-tête normal a défilé au-dessus de celui-ci. C'est un peu comment http://techcrunch.com le fait.

Update [31/10/2013] - Techcrunch a récemment changé d'interface utilisateur pour que vous ne puissiez plus le voir ici!

Regardez 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>

CSS pertinentes

.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;
}
43
techfoobar

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

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

avertissement: au moment de la rédaction, il n’est pas supporté par IE11, opera mini, et le navigateur de stock d'Android: https://caniuse.com/#feat=css-sticky

3
L0laapk3

Ce n'est pas possible d'utiliser css. Vous pouvez faire en utilisant JavaScript ou jQuery. Parce qu'il faut des conditions.

1
naresh kumar
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 pour faire un en-tête fixe, cela fonctionne très bien dans googlechrome pas dans Firefox .....

0
anya