4

I need to fix a div/image 16 pixels from top of the window... The content needs to scroll, but the div/image can't scroll... My main problem is that it can't be fixed with the position attribute because i need it to scroll horizontally. and with position:fixed it locks both vertically and horizontally...
I've already tried overflow (overflow-y: hidden doesn't work) and can't get any results...
Is there any way to say that the div/image should lock it's vertically movement on that place? any ideas?

André Mata
  • 383
  • 1
  • 5
  • 15
  • What did you produced so far ? Add your HTML/CSS code in the question. – Anwar Jul 10 '15 at 11:41
  • @Zeratops For this case my code won't help... I just need to know if is possible to lock a div vertically and don't lock it horizontally. And if so, how ca i do it... I have a div (the one that i need to lock) inside another div (site wrap) with position: relative... – André Mata Jul 10 '15 at 11:56
  • 1
    Not with `position:fixed` as it's fixed in relation to the *viewport* not any other DOM elements. I suspect that a Javascript solution is required, – Paulie_D Jul 10 '15 at 12:34

2 Answers2

2

If you are trying to fix the div vertically, but allow the image to scroll horizontally as @Paulie_D suggests, you can try this fiddle:

http://jsfiddle.net/bnu4rhop/

This depends on a position: fixed with an accompanying javascript function that adjusts the left css value.

$(window).scroll(function (e) {
    $('#my_div').css({left: -$(window).scrollLeft()})
});
Danny Sullivan
  • 3,626
  • 3
  • 30
  • 39
1

Just position:absolute your div and when the user is scrolling adjust the top value with javascript : 

 $(window).scrollTop() + 16;

If you want to center horizontally your div :

left: 50%;
margin-left: -(You div width / 2);
DanX
  • 234
  • 2
  • 7
  • Sorry, but i don't have many experience with javascript... can you please tell how do i connect the script with the div (my div name is #baar) thank you very much – André Mata Jul 10 '15 at 14:27