Position par rapport à la fenêtre

J'ai un compte et je travaille sur modifier le code html. Ma question est la suivante: comment puis-je faire de mon côté bar être dans une certaine position, mais ensuite j'ai faites défiler vers le bas sur la page, il reste où il est par rapport à mon navigateur? Pour un exemple de ce dont je parle, cliquez sur "poser une question" et de regarder "questions similaires", puis faites défiler jusqu'. Je préférerais, pour qu'il soit en CSS. J'ai déjà essayé tout ce que je peux penser.

OriginalL'auteur judh1234 | 2013-07-11

25

définir les éléments css position attribut fixed et de l'utilisateur top/left et margin pour le placer où vous voulez qu'il soit. Comme:
```
#sideBar {
    position: fixed;
    display: block;
    top: 50%;
    left: 10px;
    margin: -100px 0 0 0;
    height: 200px;
    width: 50px;
}
```
Le code ci-dessus serait verticalement centre d'un 200px haut de la div et de la place qu'il 10px à partir de la gauche.

Mise à JOUR

Cet exemple va vous montrer comment réaliser ce que vous êtes après!
Démonstration avec jquery

Mise à jour (1)

La suite de jquery code est probablement le moyen le plus rapide d'obtenir ce que vous voulez avec un minimum de modifications à d'autres html/css. Il suffit de coller le code suivant dans un document prêt de la fonction et de modifier les quelques bribes de css comme indiqué ci-dessous.
```
$(window).scroll(function(){
    if($(window).scrollTop() >= 200){
        $('anchor3').css({
            "margin-top": "80px"
        })
        $('icon').css({
            "margin-top": "10px"
        })
        $('oldurl').css({
            "margin-top": "296px"
        })
    }
    else{
        $('anchor3').css({
            "margin-top": 300 - $(window).scrollTop()
        })
        $('icon').css({
            "margin-top": 230 - $(window).scrollTop()
        })
        $('oldurl').css({
            "margin-top": 516 - $(window).scrollTop()
        })
    }    
})
```
Vous avez besoin de modifier le CSS pour a3text de faire margin-top:60px, retirez le position et margin-left attributs, puis ajouter display: block

Idéalement, vous avez icon, anchor3, et oldurl à l'intérieur d'un conteneur div de sorte que vous pouvez simplement utiliser jquery sur le contenant plutôt que les trois éléments individuellement!

Mais cela devrait vous obtenir ce que vous êtes après (testé sur le tumblr du site avec FF Pavé).

Mise à JOUR (2)

Lancer firefox et allez à la page: http://thatoneguyoveryonder.tumblr.com/ puis ouvrez bloc-notes (MAJ + F4) copier/coller le code suivant et appuyez sur CTRL+L. Il devrait alors dire quelque chose (dans le bloc-notes) comme /* [object Object] */ Si cela se produit, faites défiler la page web et regarder la magie se produire - si c'est ce que vous êtes après, je vais vous expliquer en œuvre pour vous 🙂
```
$('#sidebar').css({
    position:'fixed',
    top:410,
    left:700 + 60 + (($(window).width()-940) / 2),
    "z-index":900
});

$(window).scroll(function(){
    if($(window).scrollTop() >= 370){
        $('#sidebar').css({
            top: '30px'
        })
    }
    else{
        $('#sidebar').css({
            top: 410 - $(window).scrollTop()
        })
    }
})
```
Qui l'a causé d'être fixé dans le milieu de la page.
Oui, vous pouvez le déplacer en changeant la top et margin attributs. Vous avez besoin d'utiliser javascript pour obtenir démarrer dans le milieu de la page, puis déplacer vers le haut..
J'ai mis à jour ma réponse avec un lien vers un JS Fiddle qui (je crois) montre ce que vous êtes après.
snipt.org/AGff7 Ok, donc depuis que j'ai sur aucune idée de ce que je fais, voici le code, je travaille avec. Dans le cas où vous n'êtes pas familier avec la mise en page, le CSS personnalisé est à la fin de <style>
Et oui, c'est ce qui im loking pour.

OriginalL'auteur Steven
3

Vous pouvez utiliser
```
position:fixed
```
Ici est un jsfiddle pour la même http://jsfiddle.net/aBaNM/ , même si vous faites défiler le corps, rouge div doit être placé là.

Cliquez sur poser une question et faire défiler vers le bas pour voir ce que je veux dire. J'ai déjà essayé fixe.

OriginalL'auteur sublime
2

Je suis d'accord, position:fixe avec top:0px et à gauche:0px devrait le faire. Soyez prudent en utilisant correction du positionnement pour la navigation bien que, Si l'écran est plus petit que le menu, vous ne serez jamais en mesure de voir le trop-plein.

Je veux qu'il puisse commencer dans le milieu de ma page, puis fixé au haut de la page lorsque je scroll
Je ne peux pas penser à une css à la seule approche de cela, mais waypoints js ( imakewebthings.com/waypoints ) ou skrollr ( github.com/Prinzhorn/skrollr ) fonctionne bien pour cela. Vous devriez juste interrupteur à position fixe lorsque la partie supérieure de la fenêtre d'affichage atteint le haut de l'élément, et il devrait ressembler à ça colle vers le haut.

OriginalL'auteur TorranceScott

Vous devez vous connecter pour publier un commentaire.