Position Relative to the window

问题

I have a Tumblr account and I'm working on editing the html of it. My question is this: how do I make my side bar be in a certain position but then I scroll down on the page, it stays where it is relative to my browser? For an example of what I'm talking about, click "ask a question" and look at "similar questions" then scroll. I would prefer for it to be in CSS. I have already tried everything I can think of.

回答1:

set the elements css position attribute to fixed and user top/left and margin to place it where you want it to be. Like so:

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

The above code would vertically center a 200px high div and place it 10px from the left hand border.

UPDATE

This example will show you how to achieve what you're after! Demo with jquery

Update (1)

The following jquery code is probably the fastest way to achieve what you want with minimal changes to other html/css. Just stick the following code in a document ready function and change the few bits of css as stated below.

$(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()
        })
    }    
})

You need to change the CSS for a3text to make margin-top:60px, remove the position and margin-left attributes, then add display: block

Ideally, you would just have icon, anchor3, and oldurl inside one container div so that you could just use jquery on the container rather than the three items individually!

But this ought to get you what you're after (tested on the live tumblr site with FF Scratchpad).

UPDATE (2)

Launch firefox and go to the page: http://thatoneguyoveryonder.tumblr.com/ then open scratchpad (SHIFT + F4) copy/paste the following code and press CTRL+L. It should then say something (in scratchpad) like /* [object Object] */ If that happens scroll down the webpage and watch the magic happen - if this is what you're after I'll explain implementing it for you :)

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

回答2:

You can use

position:fixed

Here is a jsfiddle for the same http://jsfiddle.net/aBaNM/ , even if you scroll the body, red div should be positioned there.

回答3:

I agree, position:fixed with top:0px and left:0px should do it. Be careful using fixed positioning for navigation though, If the user's screen is smaller than the menu, you'll never be able to see the overflow.

来源：https://stackoverflow.com/questions/17604311/position-relative-to-the-window

标签

html

css

tumblr