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