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.

Vitrine

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

Aussie

That caused it to be fixed in the middle of the page. – Vitrine

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.. – Aussie

I've updated my answer with a link to a JS Fiddle which (I believe) demonstrates what you're after. – Aussie

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 <style> – Vitrine

And yes that was what im loking for. – Vitrine

Okay, so is this link 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? – Aussie

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 – Aussie

did i mention that i dont know what im doing? – Vitrine

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 :) – Aussie

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! – Vitrine

No problem. I take from that that you managed to get it working the way you wanted to? – Aussie

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 – Aussie

I took out everything that i put in dealing with the background and it still messes up. – Vitrine

I got it to work! What i did is i put it in <head> at first but then i just moved it to where the rest of the stuff for the sidebar was and the color fixed! – Vitrine

Answer 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.

Officious

Click ask a question and scroll down to see what i mean. Ive already tried fixed. – Vitrine

Answer 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.

Veron

I want it to start in the middle of my page then fixed to the top of the page when I scroll – Vitrine

I can't think of a css only approach to this but waypoints js ( imakewebthings.com/waypoints ) or skrollr ( 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. – Veron

Answer 4

Simple solution for modal layers (for without click), will ignore parent position: relative;

.layer-without-click-element {
  transform: translate(0%, 0%);
  position: fixed;
  display: block;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100vw;
}

takes top, left 0 of the window and covers full width and height browser window size, set z-index less than modal.

Certes