Position Relative to the window

Question

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.

Steven · Accepted Answer · 2013-07-12T19:39:28.270

35

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

edited Jul 12 '13 at 19:39

answered Jul 11 '13 at 22:13

Steven

5,830
2
11
26

That caused it to be fixed in the middle of the page. – judh1234 Jul 11 '13 at 22:34
Yeah, you can move it around by changing the `top` and `margin` attributes. You need to use javascript to get it start in the middle of the page and then move to the top.. – Steven Jul 11 '13 at 22:43
I've updated my answer with a link to a JS Fiddle which (I believe) demonstrates what you're after. – Steven Jul 11 '13 at 23:00
http://snipt.org/AGff7 Ok so since i have about no idea what I'm doing, here is the code im working with. In case you are not familiar with the layout, the custom CSS is at the end of – judh1234 Jul 12 '13 at 00:30
And yes that was what im loking for. – judh1234 Jul 12 '13 at 00:33
Okay, so is this [link](http://baelor.tumblr.com) the actual page? If so, you then want to have the mini-profile type thing on the left scroll and then stay on the page? – Steven Jul 12 '13 at 15:35
I've added another update to my answer with the jquery to make this work for you! Just place the code in a _document ready function_ and you're away (not forgetting the quick changes to the *a3text* css – Steven Jul 12 '13 at 16:28
did i mention that i dont know what im doing? – judh1234 Jul 12 '13 at 18:49
I think you may have mentioned that! No problem though, I'll try and keep things as step-by-step as possible. Check out my update above and things should be working the way you want them to :) – Steven Jul 12 '13 at 19:40
I took the background off and when i scroll, the background changes to white at the top and black in the middle. I also changed top '30px' to 57. Other than that, its perfect! – judh1234 Jul 12 '13 at 20:09
No problem. I take from that that you managed to get it working the way you wanted to? – Steven Jul 12 '13 at 20:17
I'm not sure I understand the colouring problem... The reason it goes black/white is because the `.fixed` class has a `background` css attribute. If you don't want it to be black and white remove the `background` from `.fixed` – Steven Jul 12 '13 at 21:06
I took out everything that i put in dealing with the background and it still messes up. – judh1234 Jul 12 '13 at 22:56
I got it to work! What i did is i put it in at first but then i just moved it to where the rest of the stuff for the sidebar was and the color fixed! – judh1234 Jul 13 '13 at 07:31

score 4 · Answer 2 · answered Jul 11 '13 at 22:10

4

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.

answered Jul 11 '13 at 22:10

sublime

3,675
9
46
83

2

Click ask a question and scroll down to see what i mean. Ive already tried fixed. – judh1234 Jul 11 '13 at 22:18

score 2 · Answer 3 · answered Jul 11 '13 at 22:17

2

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.

answered Jul 11 '13 at 22:17

TorranceScott

1,317
13
16

I want it to start in the middle of my page then fixed to the top of the page when I scroll – judh1234 Jul 11 '13 at 22:31
I can't think of a css only approach to this but waypoints js ( http://imakewebthings.com/waypoints/ ) or skrollr ( https://github.com/Prinzhorn/skrollr ) works well for this. You'd just switch to position fixed when the top of the viewport reaches the top of the element and it should look like it sticks to the top. – TorranceScott Apr 07 '15 at 18:39

Position Relative to the window

3 Answers3

Linked