Задать вопрос
@danilovevgen
веб разработчик

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

Я написал свой код для создания sticky блока при прокрутке страницы, потому что по некоторым причинам модули не работают так как мне надо, все работает на ура, только вот когда мы прокручиваем в самый низ сайта - блоки наезжают на подвал и не останавливаются, я пробовал некоторые вещи чтобы они поднимались вверх (в коде видно), когда мы прокрутили ниже, но при увеличении уменьшении масштабов сайта это значение отступов не работает и в итоге блок все-равно уходит за рамки подвала и дальше белый фон появляется даже.
Как мне решить эту проблему, что нужно дописать? Может я не правильно определяю прокрутили мы до подвала или нет?
$(window).load(function() {
// define leed block offset top at window loaded

var leedoffset = $('.leed_blocks').offset().top;

// check if blocks are in DOM //
if ($('.leed_blocks').length > 0) {
	
 		 if ($(window).scrollTop() >= leedoffset) {
 		 	$('.leed_blocks').addClass('absolute');
   		 $('.leed_blocks').css('top', $(window).scrollTop() + 40)
 		 } else {
   		 $('.leed_blocks').removeClass('absolute');
  		}
  		// define footer offset and check for disable overflow //
  		var bottomLeeds = $('.leed_blocks').position().top+$('.leed_blocks').outerHeight(true)
  		if (bottomLeeds >= $('.bottom').offset().top) {
  			$('.leed_blocks').css('top', parseInt($('.leed_blocks').css('top')) - parseInt($('footer').height()) );
  		}
} 

	// window scroll function 
	$(window).scroll(function() {

	// 	 leed sticky
 	if ($('.leed_blocks').length > 0) {
  		
 		 if ($(window).scrollTop() > leedoffset && $(window).scrollTop) {
 		 	$('.leed_blocks').addClass('absolute');
   		 $('.leed_blocks').css('top', $(window).scrollTop() + 40)
 		 } else {
   		 $('.leed_blocks').removeClass('absolute');
  		}
  		
  		var bottomLeeds = $('.leed_blocks').position().top+$('.leed_blocks').outerHeight(true)
  		if (bottomLeeds >= $('footer').offset().top) {
  			//$('.leed_blocks').css('top', parseInt($('.leed_blocks').css('top')) - parseInt($('footer').height()) );
  			$('.leed_blocks').css('margin-top','margin-top: -423px');
  		} else {
  			$('.leed_blocks').css('margin-top','margin-top: 0px');
  		}

  	} 

	})
	// resize window function
	$(window).resize(function() {

		var bottomLeeds = $('.leed_blocks').position().top+$('.leed_blocks').outerHeight(true)
  		if (bottomLeeds >= $('footer').offset().top) {
  			$('.leed_blocks').css('margin-top','-240px');
  		} else {
  			$('.leed_blocks').css('margin-top','0px');
  		}
	})
  • Вопрос задан
  • 182 просмотра
Подписаться 1 Оценить Комментировать
Пригласить эксперта
Ответы на вопрос 1
@bybelov
front-end разработчик
Ваш ответ на вопрос

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

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