Fixer la barre de menu en haut de la page une fois que la tête a été défile passé

Tout d'abord je m'excuse si c'est trop ouverte une question.

Je suis conscient de faire de l'en-tête d'une page web statique qui est toujours visible en haut de la fenêtre d'affichage et le contenu passe en-dessous d'elle comme vous le faites défiler vers le bas. Ceci peut être réalisé uniquement avec du css.

Je me demandais comment vous pourriez obtenir en laissant l'en-tête de défilement de la page, mais laisser une barre de menu horizontale statique en haut. http://www.forexfactory.com est un parfait exemple de cela.

Je vois qu'il appelle une fonction JavaScript onHeaderComplete.execute() qui, je suppose s'applique supplémentaire de style css pour la barre de navigation lorsque l'en-tête sort, mais je ne suis pas sûr de la façon dont il fonctionne. Toute explication de base apprécié que mon JavaScript compétences sont relativement limitées.

InformationsquelleAutor harryg | 2013-01-24
  1. 13

    J'ai simplement répondu à la même question. COCHEZ CETTE QUESTION

    $(function(){
        //Check the initial Poistion of the Sticky Header
        var stickyHeaderTop = $('#stickyheader').offset().top;

        $(window).scroll(function(){
                if( $(window).scrollTop() > stickyHeaderTop ) {
                        $('#stickyheader').css({position: 'fixed', top: '0px'});
                        $('#stickyalias').css('display', 'block');
                } else {
                        $('#stickyheader').css({position: 'static', top: '0px'});
                        $('#stickyalias').css('display', 'none');
                }
        });
  });

    DÉMO

    • Merci, puis-je vous demander quel est le but de la #stickyalias div? Ça va fonctionner sans?
    • Vous pouvez le retirer. jsfiddle.net/uFq2k/3
    InformationsquelleAutor Sowmya
  2. 6

    Vous pouvez écrire comme ceci:

    $(window).scroll(function() {
    if ($(this).scrollTop() > 50) {
         $('div').addClass('fix');
    } else {
         $('div').removeClass('fix');
    }
});

    CSS

    .fix{
    position:fixed;
    top:0;
    left:0;
    right:0;
    margin:0;
}

    Cochez cette http://jsfiddle.net/a42qB/

    InformationsquelleAutor sandeep
  3. 2

    Vous pouvez aussi le faire avec de la pure CSS par la création de votre menu à deux reprises. Ce n'est pas l'idéal, mais il vous donne la possibilité d'avoir un design différent pour le menu une fois qu'il est sur le dessus et vous n'aurez rien d'autre que du CSS, pas de jquery:

    <div id="hiddenmenu">
 THIS IS MY HIDDEN MENU
</div>
<div id="header">
 Here is my header with a lot of text and my main menu
</div>
<div id="body">
 MY BODY
</div>

    Et ensuite avoir le code CSS suivant:

    #hiddenmenu {
position: fixed;
top: 0;
z-index:1;
 }
#header {
top: 0;
position:absolute;
z-index:2;
 }
#body {
padding-top: 80px;
position:absolute;
z-index: auto;
 }

    Ici est un violon pour vous de voir: https://jsfiddle.net/brghtk4z/1/

    InformationsquelleAutor iMac Ange