position fixed vertically with horizontal animation

Question

I want to achieve an effect similar to this: Position element fixed vertically, absolute horizontally

This can be seen working here: http://jsfiddle.net/thugsb/M2m58/

However, as in that fiddle, I want the parent to be able to be animated horizontally, and the fixed div to move horizontally with it (it's fixed so that when you scroll down the page it stays at a set height in the browser window). This works fine in FF (4/mac), but it fails to move in webkit.

For some reason, if you animate the .positioner instead, the .fixed doesn't move until you inspect the element. Then it jumps into place. It's almost as if it's forgetting to update the display.

Any ideas? Thanks!

An example of my solution working can be seen here: http://www.slc.edu/undergraduate/humanities/index.html — thugsb, Jan 19 '12 at 16:38

score 0 · Answer 1 · answered Sep 17 '17 at 07:22

0

.sliding-nav-bar {
    min-height: 100%;
}

this allows horizontal part of the 'default transition' to keep working, but disables the vertical part of the animation.

answered Sep 17 '17 at 07:22

Ingrid

161
1
2
8

score 0 · Answer 2 · answered Apr 18 '11 at 16:59

0

change the div.fixed position to:

position: absolute;

see fiddle: http://jsfiddle.net/maniator/M2m58/1/

answered Apr 18 '11 at 16:59

Naftali

144,921
39
244
303

Nope. That means it no longer scrolls down the page when you scroll (which is the desired effect). – thugsb Apr 18 '11 at 18:46

score 0 · Answer 3 · answered Apr 18 '11 at 17:02

0

I assume you want both the blue box and the red box to move left.

Try animating them both:

$('.inflow').delay(1000).animate({'right':'200px'});
$('.fixed').delay(1000).animate({'right':'200px'});

answered Apr 18 '11 at 17:02

Diodeus - James MacFarlane

112,730
33
157
176

Nope. That will make the fixed element 200px from the right of the screen. – thugsb Apr 18 '11 at 18:45

score 0 · Accepted Answer · answered May 09 '11 at 22:03

Apparently it's a webkit bug, in that it doesn't update fixed elements if they are not directly changed (even though they should). I added a callback function to the .animate({'width':'40px'}, function() {$('#drawerHandle').fadeOut(1, function() {$('#drawerHandle').show();});}); and that did the trick.

score 0 · Answer 5 · answered Jan 19 '12 at 10:38

An alternative approach:

Setting position absolute while the animation is playing, and setting it back when complete. Setting the top property to make sure the element stays in place while animating.

var offset = $('#drawerHandle').offset();

$('#drawerHandle').css({position: "absolute", top, offset.top).animate({'width':'40px'}, function () {
    $(this).css({position: "fixed", top: 0});        
});

A word of warning if you have other code (e.g. portamento) altering the element's position property too:

You might want to instead set position: absolute via a css class, so as to not overwrite what that library had set as position. (In portamento's case it is not always position: fixed).

I don't think this would work if the user scrolled as the animation was playing - it would instead jump into position once it becomes fixed again. Good idea though, and it would work if I wasn't so picky. :) — thugsb, Jan 19 '12 at 16:37
Your javascript code is not valid, you messed with the brackets. — Christoph, Oct 26 '12 at 19:54

position fixed vertically with horizontal animation

5 Answers5