Форум Сайтостроение Веб-строительство

JQuery скрипт

B
На сайте с 31.01.2012
Offline
125
bondarenkosss
778

Привет,

есть скрипт 

			

$.fn.stickyfloat = function(options, lockBottom) {

	var $obj 				= this;

	var parentPaddingTop 	= parseInt($obj.parent().css('padding-top'));

	var startOffset 		= $obj.parent().offset().top;

	var opts 				= $.extend({ startOffset: startOffset, offsetY: parentPaddingTop, duration: 200, lockBottom:true }, options);

				

	$obj.css({ position: 'absolute' });

				

	if(opts.lockBottom){

		var bottomPos = $obj.parent().height() - $obj.height() + parentPaddingTop;

		if( bottomPos < 0 )

		bottomPos = 0;

		}

				

	$(window).scroll(function () { 

		$obj.stop(); 



		var pastStartOffset			= $(document).scrollTop() > opts.startOffset;	

		var objFartherThanTopPos	= $obj.offset().top > startOffset;	

		var objBiggerThanWindow 	= $obj.outerHeight() < $(window).height();	



		if( (pastStartOffset || objFartherThanTopPos) && objBiggerThanWindow ){ 

			var newpos = ($(document).scrollTop() -startOffset + opts.offsetY );

			if ( newpos > bottomPos )

				newpos = bottomPos;

			if ( $(document).scrollTop() < opts.startOffset ) 

				newpos = parentPaddingTop;

			

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

		}

	});

};

Он держит баннер (любой div) всегда в первом экране. Очень полезная штука, но не нравится анимация.

Что тут нужно изменить, чтобы баннер плавал вообще без анимации и подергиваний при скролинге?

Если вопрос в паре строчек кода - поправьте, пожалуйста!

Спасибо!

R
На сайте с 27.03.2008
Offline
85
Rigor
#1

Если я правильно вас понял, что вам нужно всегда держать див статично и видимо. Тогда достаточно ему задать стиль в css "position:fixed"

B
На сайте с 31.01.2012
Offline
125
bondarenkosss
#2

Rigor, fixed немного не то.

http://ruseller.com/lessons/les999/code.html

Вот работающий пример. Здесь бы убрать анимацию при прокрутке...

Z0
На сайте с 03.09.2009
Offline
830
ziliboba0213
#3

Возможно анимация тут:

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

Я в jquery не особо силен, попробуйте так может быть:

$obj.css({ top: newpos });

Правда не совсем уверен что так :) там еще duration... Но поковырял бы в этом направлении :)

var opts = $.extend({ startOffset: startOffset, offsetY: parentPaddingTop, duration: 200, lockBottom:true }, options);

Может просто поставить duration: 0

Может ли JS "побить" ffmpeg video delay Помесячная оплата за ПО
vlad00777
На сайте с 24.12.2009
Offline
119
vlad00777
#4

bondarenkosss, я так и не понял, почему не через css как спрашивали выше?

Верстка. Качественно! Адаптивная, резиновая, с параллаксом и прочими плюшками. В ЛС.
R
На сайте с 27.03.2008
Offline
85
Rigor
#5

bondarenkosss, уверены что не то? Вот пример этого св-ва http://davidwalsh.name/demo/css-fixed-position.php - как раз без анимации (желтый блок справа)

Z0
На сайте с 03.09.2009
Offline
830
ziliboba0213
#6
Rigor:
bondarenkosss, уверены что не то? Вот пример этого св-ва http://davidwalsh.name/demo/css-fixed-position.php - как раз без анимации (желтый блок справа)

vlad00777 В примере, приведенном ТС 2 меню в разных дивах, как вы сделаете так на css я не очень понимаю...🍿

R
На сайте с 27.03.2008
Offline
85
Rigor
#7

ziliboba0213, на то он и пример(и пример скрипта, а не проблемы ТС) ;) В вопросе ТС говорил про баннер в ед. числе.

Brand from Amber
На сайте с 18.08.2007
Offline
293
Brand from Amber
#8

Чтобы блок плавал "вообще без анимации и подергиваний при скроллинге" ему необходимо задавать упомянутый ранее CSS стиль "position:fixed".

Но для того чтобы он "плавал" в пределах определённого контейнера, нужно определять положение скроллера, сравнивать его с координатами этого контейнера и включать и отключать этот стиль для блока в зависимости от обстоятельств.

Скрипт не самый простой и зависит от вёрстки сайта. Курите поиск.

Лучший способ понять что-то самому - объяснить это другому.
Привязка блока в position: Как сделать плавающий DIV Оптимизация CSS
B
На сайте с 31.01.2012
Offline
125
bondarenkosss
#9

Видимо старый стал...

Еле еле нагуглил достойное решение...

http://leafo.net/sticky-kit/#examples

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий