[Resolvido] Ao invés de fixar no top, fixar no bottom

[Maykel-ctba 233]

Fala galera!

 

Me deparei com a seguinte situação.

 

Preciso sempre manter uma div flutuante grudada no rodapé do navegador (não da página).

Busquei vários scripts, e nenhum me serviu. Ou não funcionavam, ou funcionavam e davam algum pepino no meu caso.

 

Até que encontrei este script (Site do desenvolvedor):

 

/*
* stickyfloat - jQuery plugin for verticaly floating anything in a constrained area
* 
* Example: jQuery('#menu').stickyfloat({duration: 400});
* parameters:
* 		duration 	(200)	 - the duration of the animation
*		startOffset (number) - the amount of scroll offset after the animations kicks in
*		offsetY		(number) - the offset from the top when the object is animated
*		lockBottom	(true)	 - set to false if you don't want your floating box to stop at parent's bottom
*		delay		(0)		 - delay in milliseconds  until the animnations starts
	easing		(linear) - easing function (jQuery has by default only 'swing' & 'linear')
* $Version: 11.28.2011 r3
* $Version: 08.10.2011 r2
* $Version: 05.16.2009 r1
* Copyright (c) 2009 Yair Even-Or
* vsync.design@gmail.com
*/
(function($){
$.fn.stickyfloat = function(options, lockBottom){
	var $obj 				= this,
		doc					= $(document),
		parentPaddingTop 	= parseInt($obj.parent().css('padding-top')),
		startOffset 		= $obj.parent().offset().top,
		opts, bottomPos, pastStartOffset, objFartherThanTopPos, objBiggerThanWindow, newpos, checkTimer, lastDocPos = doc.scrollTop();

	$.extend( $.fn.stickyfloat.opts, options, { startOffset:startOffset, offsetY:parentPaddingTop} );
	opts = $.fn.stickyfloat.opts;
	$obj.css({ position: 'absolute' });

	function checkLockBottom(){
		if(opts.lockBottom){
			bottomPos = $obj.parent().height() - $obj.outerHeight() + parentPaddingTop; //get the maximum scrollTop value
			if( bottomPos < 0 )
				bottomPos = 0;
		}
	};

	function checkScroll(){
		checkLockBottom();
		if( opts.duration > 40 ){
			clearTimeout(checkTimer);
			checkTimer = setTimeout(function(){
				if( Math.abs(doc.scrollTop() - lastDocPos) > 0 ){
					lastDocPos = doc.scrollTop();
					initFloat();
				}
			},40);
		}
		else initFloat();
	}

	function initFloat(){
		$obj.stop(); // stop all calculations on scroll event

		pastStartOffset			= doc.scrollTop() > opts.startOffset;	// check if the window was scrolled down more than the start offset declared.
		objFartherThanTopPos	= $obj.offset().top > startOffset;	// check if the object is at it's top position (starting point)
		objBiggerThanWindow 	= $obj.outerHeight() < $(window).height();	// if the window size is smaller than the Obj size, do not animate.

		// if window scrolled down more than startOffset OR obj position is greater than
		// the top position possible (+ offsetY) AND window size must be bigger than Obj size
		if( (pastStartOffset || objFartherThanTopPos) && objBiggerThanWindow ){ 
			newpos = (doc.scrollTop() -startOffset + opts.offsetY );

			if ( newpos > bottomPos )
				newpos = bottomPos;
			if ( doc.scrollTop() < opts.startOffset ) // if window scrolled < starting offset, then reset Obj position (opts.offsetY);
				newpos = parentPaddingTop;

			$obj.delay(opts.delay).animate({ top: newpos }, opts.duration , opts.easing );
		}
	}

	$(window).bind('scroll.sticky',checkScroll);
};

$.fn.stickyfloat.opts = { duration:200, lockBottom:true , delay:0, easing:'linear' };
})(jQuery);

 

Só que ele sempre fixa no topo do navegador. gostaria de alterar para que fixasse no rodapé. Fiz diversas alterações, mas sempre dava algum problema no script e parava de funcionar.

 

Alguem pode me ajudar?

 

Abraços!

[William Bruno 1501]

mais fácil você não usar js, e fazer tudo com css. Usando position: fixed;

existe até uma técnica puramente com css, para fazer o fixed no ie6.

[Maykel-ctba 233]

o problema de usar o CSS é que ao dar scroll na página, o floater não acompanha. isso só valeria se a página tivesse uma altura fixa, sem rolagem.

[William Bruno 1501]

se você usar o fixed, o floater vai acompanhar a rolagem sim. Se manterá 'fixo' independente da rolagem.

 

Basta utilizar corretamente.

[Maykel-ctba 233]

bom, eu tinha tentado e não deu certo. Mas enfim, achei um script que teóricamente resolveu minha necessidade, jixedbar! :) apenas adaptei e apaguei os excessos do script que eram desnecessários! Obrigado!