Use spacer element for floating toolbar instead of relaying on padding-top of next sibiling.

This commit is contained in:
Inez Korczynski 2011-11-29 01:13:50 +00:00
parent dc7e601ef0
commit fb9348dbb9

View file

@ -19,32 +19,29 @@ es.ToolbarView = function( $container, surfaceView ) {
this.$ = $container;
this.surfaceView = surfaceView;
this.$spacer = $('<div>');
this.$.after( this.$spacer );
/*
* This code is responsible for switching toolbar into floating mode when scrolling (with
* keyboard or mouse). It assumes that original padding-top of next sibiling element is 0
* (if that will be a problem in future we may introduce spacer element and set it height,
* since even remembering original padding-top is not a solution because it may be set in em
* instead of px).
* keyboard or mouse).
*/
$window.scroll( function() {
if ( _this.surfaceView.dimensions.scrollTop >= _this.surfaceView.dimensions.toolbarTop ) {
if ( ! _this.$.hasClass( 'float' ) ) {
var left = _this.$.offset().left,
right = $window.width() - _this.$.outerWidth() - left;
_this.$.css( 'right', right );
_this.$.css( 'left', left );
_this.$.addClass( 'float' );
_this.$.next().css( 'padding-top', _this.$.height() );
_this.$spacer.height( _this.$.height() );
}
} else {
if ( _this.$.hasClass( 'float' ) ) {
_this.$.css( 'right', 0 );
_this.$.css( 'left', 0 );
_this.$.removeClass( 'float' );
_this.$.next().css( 'padding-top', 0 );
_this.$spacer.height(0);
}
}
} );