Barre de menu flottante utilisant HTML/CSS?

Question

se demandait si quelqu'un connaissait un moyen de créer une barre de menu flottante qui colle à un point sur une page jusqu'à ce que la fenêtre du navigateur s'éloigne suffisamment de la page et la décolle, puis la barre de menu commence à défiler avec elle. L'effet que je veux est exactement le même que ce menu javascript http://www.jtricks.com/javascript/navigation/floating.html. Cependant, je veux vraiment le faire avec CSS. Je suis conscient que je peux faire le div Absolument positionné et il va descendre la page, j'ai essayé de faire un div DIV placé (parent div) et puis un autre div à l'intérieur qui était positionné en absolu, mais je ne pouvais pas le faire fonctionner. Est-ce que quelqu'un sait comment faire ce travail avec CSS ou doit-il être JS?

Merci d'avance.

Jon.

Answer 1

Je crois en utilisant javascript est la seule solution pour obtenir l'effet que vous avez décrit. Voici un rapide demo d'une bannière qui commence dans une position absolue et passe à fixe lorsque l'utilisateur fait défiler.

<div style="height:1000px;width:500px;"> 

    <div id="floatbar" style="background:gray; 
           width:200px; 
           height:40px; 
           position:absolute; 
           left:0;top:200px;"> 
    </div> 
</div> 

$(window).scroll(function(){ 
    if ($(window).scrollTop() >= 200) 
    { 
     $("#floatbar").css({position:'fixed',left:'0',top:'0'}); 
    } 
    else 
    { 
     $("#floatbar").css({position:'absolute',left:'0',top:'200px'}); 
    } 
}); 

Answer 2

Je crois qu'il doit être JS. Je peux imaginer que cela peut être assez simple avec jQuery et je ne peux vraiment pas trouver de moyen d'y parvenir uniquement avec CSS. Je vais essayer d'y penser, mais je doute que je trouverai une solution.

Answer 3

Eh bien, vous ne pouvez pas le faire avec div positionné absolu à l'intérieur d'un parent. La position fixe est fondamentalement un div positionné absolu, positionné par rapport à la fenêtre. Je dirais que vous avez vraiment besoin de javascript ici.

Answer 4

bien si vous n'avez pas besoin de l'animation, il suffit d'utiliser que
position: fixed;
dans le css.

Si vous voulez l'animer, vous devez utiliser javascript. par exemple dans jquery:

$(window).scroll(function(){ 
    $('#menu').css({ 
     right: 0, 
     top: 0 
    }) 
}) 

Answer 5

Cela devrait être assez facile avec une barre latérale fixe et une partie du contenu flottant. Essayez quelque chose comme ça ...

#container { 
    width: 960px; 
    margin: 0 auto; 
    overflow: hidden; 
    position: relative; 
} 

#sidenav { 
    width: 300px; 
    position: fixed; /*--Fix the sidenav to stay in one spot--*/ 
    float: left; /*--Keeps sidenav into place when Fixed positioning fails--*/ 
} 

#content { 
    float: right; /*--Keeps content to the right side--*/ 
    width: 620px; 
    padding: 0 20px 20px; 
}