5

I have some text at the bottom of my page saying Built By Me in it. I have this in a fixed position 35px away from the bottom and left of the window so it moves as you scroll. What i actually want is to fix it vertically, so it moves as you scroll up and down and is always 35px away from the bottom of the window, but have it positioned 35px away from the left edge of the page (not screen) so it does not move when you scroll horizontally.I checked out this solution Position element fixed vertically, absolute horizontally but it does not seem to work for me unfortunately. FYI i am currently using the following code to fix it top and bottom which works fine (but also moves when you scroll horizontally):

#sticky {
position: fixed;
bottom: 35px;
left: 35px;
width: 206px;
padding: 0;
font-size: 0.6875em;
}

*html #sticky {
position: absolute;
bottom: 0px;
}

<div id="sticky">
Built by Me
</div>

Thanks so much for any pointers you could give as i can't for the life of me work out how to fix it on only one axis?

Dave

Community
  • 1
  • 1
deshg
  • 1,233
  • 4
  • 27
  • 45
  • possible duplicate of [Position element fixed vertically, absolute horizontally](http://stackoverflow.com/questions/3303173/position-element-fixed-vertically-absolute-horizontally) – kotekzot Jan 10 '14 at 06:24

2 Answers2

19

Keep the fixed div.

And have the following javascript code which will take care of horizontal moving.

$(window).scroll(function(){
  $('.fixed_div').css('left',-$(window).scrollLeft());
});
Vimalkumar Kalimuthu
  • 611
  • 6
  • 10
  • 3
    One might want to trigger this on window resize too such as `$(window).on("resize scroll",function(){...}` – Adriano Feb 15 '16 at 13:50
4

I believe the only way to achieve this is to use position: fixed; and calculate the value of left on page load or resize by determining where the left edge of the "page" falls and then adding 35px to it. Let me know if you would like me to elaborate.

Scott Cranfill
  • 1,046
  • 5
  • 13
  • Thanks very much for that Scott, i was hoping there was another way but that's all good, I used the $(window).scroll(function () { to accomplish this. What is very strange though is it doesn't seem to work if i increment the left pos, however if i use the following code it works perfectly in all browsers, out of interest have you any idea why that might be as surely this is just leaving it as it was originally? Thanks so much for your help – deshg Jan 31 '11 at 04:34
  • That's a very good question. It must have something to do with scroll, but I must confess I'm not as versed in jQuery as I should be, so I can't say for sure. Glad I could help, though! – Scott Cranfill Jan 31 '11 at 14:41