83 votes

Comment garder l'en-tête statique, toujours au top pendant le défilement?

Comment puis-je garder mes header de défiler avec le reste de la page? J'ai pensé au sujet en utilisant frame-sets et iframes, je me demandais si il est plus facile et plus commode pour l'utilisateur, ce qui serait la meilleure pratique pour le faire?

90voto

Yi Jiang Points 28098

Utiliser position: fixed sur le div qui contient l'en-tête, avec quelque chose comme

#header {
  position: fixed;
}

#content {
  margin-top: 100px;
}

Dans cet exemple, lorsque #content commence 100px ci-dessous #header, mais que l'utilisateur fait défiler, #header reste en place. Bien sûr, il va sans dire que vous assurez - #header a un arrière-plan de sorte que son contenu sera réellement visible lorsque les deux divs se chevauchent. Jetez un oeil à l' position bien ici: http://reference.sitepoint.com/css/position

9voto

Suresh Pattu Points 1302

Voici la DÉMO

Html EST:

<div id="header" class="fixed" style="display: block; top: 0px; ">
        <div class="inner">
        <!-- .inner -->
        </div>
        <div class="shadow" style="display:block;"><span></span></div>
</div>

<div style="height:600px;"><a href="http://imgur.com/k9hz3"><img src="http://i.imgur.com/k9hz3.jpg" title="Hosted by imgur.com" alt="" /></a></div> 
<div style="height:600px;"><a href="http://imgur.com/TXuFQ"><img src="http://i.imgur.com/TXuFQ.jpg" title="Hosted by imgur.com" alt="" /></a></div> ​

Css est:

 #header {height: 48px;width: 100%;z-index: 1000;}

.fixed {background: url(http://static.tumblr.com/njty47g/Omoleufdi/topbar_bg.png) left top repeat-x;
position: fixed;left: 0;
-webkit-box-shadow: 0 7px 8px rgba(0, 0, 0, 0.12);
-moz-box-shadow: 0 7px 8px rgba(0, 0, 0, 0.12);
box-shadow: 0 7px 8px rgba(0, 0, 0, 0.12);}

.inner {width: 940px;margin: 0 auto;height: 48px;}


.shadow{width: 100%;height: 5px;position: absolute;left: 0;bottom: -5px;z-index: 500;display: none;}
​

6voto

richpalsingh Points 1

Si vous pouvez utiliser bootstrap3, alors vous pouvez utiliser css "navbar-fixed-top" aussi, vous devez ajouter ci-dessous les css pour pousser le contenu de votre page vers le bas

body{

   margin-top:100px;
}

4voto

JapanPro Points 6278

voici l'un avec css + jquery (javascript) solution.

voici le lien de démonstration Demo

//html

<div id="uberbar">
    <a href="#top">Top of Page</a>
    <a href="#bottom">Bottom of Page</a>

</div>

//css 

#uberbar    { 
    border-bottom:1px solid #eb7429; 
    background:#fc9453; 
    padding:10px 20px; 
    position:fixed; 
    top:0; 
    left:0; 
    z-index:2000; 
    width:100%;
}

//jquery

$(document).ready(function() {
    (function() {
        //settings
        var fadeSpeed = 200, fadeTo = 0.5, topDistance = 30;
        var topbarME = function() { $('#uberbar').fadeTo(fadeSpeed,1); }, topbarML = function() { $('#uberbar').fadeTo(fadeSpeed,fadeTo); };
        var inside = false;
        //do
        $(window).scroll(function() {
            position = $(window).scrollTop();
            if(position > topDistance && !inside) {
                //add events
                topbarML();
                $('#uberbar').bind('mouseenter',topbarME);
                $('#uberbar').bind('mouseleave',topbarML);
                inside = true;
            }
            else if (position < topDistance){
                topbarME();
                $('#uberbar').unbind('mouseenter',topbarME);
                $('#uberbar').unbind('mouseleave',topbarML);
                inside = false;
            }
        });
    })();
});

0voto

eagor Points 751

Je trouve cette jQuery plugin donne d'excellents résultats

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X