CODEWITHSUNDEEP
htmlcsspositionfixed
André Mata
André Mata

Reputation: 383

Vertical position fixed

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?

Upvotes: 4

Views: 1031

Answers (2)

Danny Sullivan
Danny Sullivan

Reputation: 3844

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

Upvotes: 2

DanX
DanX

Reputation: 244

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);

Upvotes: 1

Related Questions