web-dev-qa-db-fra.com

Position par rapport à la fenêtre

J'ai un compte Tumblr et je travaille à en éditer le html. Ma question est la suivante: comment puis-je faire en sorte que ma barre latérale soit dans une certaine position mais ensuite je fais défiler la page, elle reste là où elle est par rapport à mon navigateur? Pour un exemple de ce dont je parle, cliquez sur "poser une question" et regardez "des questions similaires" puis faites défiler. Je préférerais que ce soit en CSS. J'ai déjà essayé tout ce à quoi je peux penser.

htmlcsstumblr
12
judh1234

définissez l'attribut elements css position sur fixed et l'utilisateur top/left et margin pour le placer où vous le souhaitez. Ainsi:

#sideBar {
    position: fixed;
    display: block;
    top: 50%;
    left: 10px;
    margin: -100px 0 0 0;
    height: 200px;
    width: 50px;
}

Le code ci-dessus centrerait verticalement un 200px div haute et placez-le 10px à partir de la bordure gauche.

[~ # ~] mise à jour [~ # ~]

Cet exemple vous montrera comment réaliser ce que vous recherchez! Démo avec jquery

Mise à jour (1)

Le code jquery suivant est probablement le moyen le plus rapide de réaliser ce que vous voulez avec des changements minimes dans d'autres html/css. Il suffit de coller le code suivant dans une fonction document prêt et de modifier les quelques bits 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 devez changer le CSS pour a3text pour faire margin-top:60px, supprimez les position et margin-left attributs, puis ajoutez display: block

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

Mais cela devrait vous donner ce que vous recherchez (testé sur le site tumblr en direct avec FF Scratchpad).

MISE À JOUR (2)

Lancez Firefox et accédez à la page: http://thatoneguyoveryonder.tumblr.com/ puis ouvrez le bloc-notes (SHIFT + F4) copiez/collez 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 regardez la magie se produire - si c'est ce que vous recherchez, je vous expliquerai la mise en œuvre :)

$('#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()
        })
    }
})
26
Steven

Vous pouvez utiliser

position:fixed

Voici un jsfiddle pour le même http://jsfiddle.net/aBaNM/ , même si vous faites défiler le corps, un div rouge doit y être positionné.

4
sublime

Je suis d'accord, position: fixe avec haut: 0px et gauche: 0px devrait le faire. Soyez prudent si vous utilisez un positionnement fixe pour la navigation.Si l'écran de l'utilisateur est plus petit que le menu, vous ne pourrez jamais voir le débordement.

2
TorranceScott