Задать вопрос
ShadowOfCasper
@ShadowOfCasper
Middle User Interface Web Developer

Как устранить баг в пересчитывании offset sticky блока?

Есть у меня в проекте страница, на которой блок с контентом должен перемещаться с поведением, подобным сайдбару контактика (те - скроллишь вниз - блок скроллится до боттома и фиксируется, скроллишь вверх - блок скроллится до своего топа и фиксируется). Плагины я ставить е*л. Лучше в своём коде разобраться, чем в чьём-то чужом и весомым.
Вообщем то вот страница с багом.

UPD: страница сейчас только для fullHD версии и на ноутах стоит помасштабировать до -120%, sorry

Вот код модуля на странице с багом, отвечающий за sticky поведение:
var moduleName = 'projectBlock';
	var lastScrollTop = 0;
	$(window).scroll(function(){
		var fix = $('.' + moduleName + '__fix');
		var baseMargin = fix.css('marginTop');
		var baseMarginNum = parseInt(baseMargin);
		var st = $(this).scrollTop();
		var windowBottom = st + $(this).outerHeight();

		//document vars
		var docHeight = $('body').outerHeight();
		var footHeight = $('.footer').outerHeight();
		var maxBottom = docHeight - footHeight;
		var maxBottomWithOffset = maxBottom - 120;
		//fix vars
		var fixHeight = fix.outerHeight();
		var fixOffTop = fix.offset().top;
		fixBottom = fixHeight + fixOffTop + 40;
			if (st > lastScrollTop){
				
				if(windowBottom >= fixBottom && fixBottom < (maxBottom + 93)){
					fix.css('position', 'fixed');
					fix.css('bottom','40px');
					fix.css('top', 'auto');
					console.log(fixBottom, (maxBottom + 93), 'bug1');
				}
				if(fixBottom > (maxBottom + 93)){
					fix.css('position','absolute');
					fix.css('top', maxBottomWithOffset - fixHeight + 'px');
					fix.css('bottom','auto');
					console.log(fixBottom, (maxBottom + 93), 'bug2');
				}
			}else{
				fix.css('position','absolute');
				fix.css('bottom','auto');
				fix.css('top', lastFixOffTop - 93 + 'px');
				if(fix.offset().top >= (st + 93)){
					fix.css('top', $(window).scrollTop() + 'px');
				}
			}
		lastFixOffTop = fixOffTop;
		lastScrollTop = st;
	});

Я в принципе понял где баг - fixBottom пересчитывается от пересчёта fix.offset().top. Но как так происходит перерасчёт, что fixBottom соответствует то одному условию, то другому - я вообще не могу понять, также как и не могу понять как подобное поведение исправить....
  • Вопрос задан
  • 134 просмотра
Подписаться 2 Оценить Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы