Position fixe CSS à la position x

Question

J'ai une div positionnée en haut d'une page, juste en dessous d'une barre de titre. Au fur et à mesure que l'utilisateur descend et que la barre se lève, je voudrais qu'il monte seulement jusqu'au bord de la fenêtre du navigateur et reste là comme s'il était réparé.

Comment est-ce possible? Est-ce faisable avec CSS seulement ou ai-je besoin de jQuery? Je préférerais jQuery pour la compatibilité multi-navigateur.

Voici le code CSS simple et simple que je me sers jusqu'à présent:

#fbLikeDiv 
{ 
    position: fixed; 
    top: 95px; 
    left: 10px; 
} 

Vous pouvez également consulter sur le site: www.myskoob.com/postish/ - il est sur le Facebook gauche comme la boîte que je voudrais rester sur le bord supérieur de la fenêtre du navigateur lorsque l'utilisateur défile vers le bas, mais d'abord monte jusqu'à là.

Answer 1

Je pense que c'est ce que vous cherchez: http://jsfiddle.net/QuVkV/3/

Vous avez besoin d'utiliser certains jQuery. Dans l'exemple ci-dessus, suivez la div id = "bar"

structure ici html:

<div id='wrapper'> 
    <div id='upper'>This is upper content</div> 
    <div id='position-saver'> 
     <div id='bar'>This is your facebook like button</div> 
    </div> 
    <div id='lower'>This is some content lower than the menu bar</div> 
</div> 

Ceci est le css:

#wrapper { 
    width: 100%; 
    height: 2000px; 
} 

#upper { 
    width: 100%; 
    height: 100px; 
} 

#position-saver { 
    height: 50px; 
    width: 100%; 
} 

#bar {  
    position: static; 
    height : 50px; 
    width: 100%; 
} 

Et le javascript ici:

$(document).on('scroll', function(){ 
    if ($('#bar')[0].offsetTop < $(document).scrollTop()){ 
     $("#bar").css({position: "fixed", top:0});    
    } 
    if ($(document).scrollTop() < $("#position-saver")[0].offsetTop){ 
     $("#bar").css({position: "static", top: 0});   
    }    
});