Мы создаем сайты

Поможем вам найти общий язык с целевыми аудиториями. Любой наш проект начинается с задачи и идей, направленных на ее решение. Мы любим и умеем делать красиво то, что будет работать.

Прячем плавающий блок в конце страницы

10.02.2015

Пример кода будет полезен тем кто разрабатывает интернет магазин с плавающей строкой состояния корзины

Если на вашем сайте есть плавающая строка состояния корзины, как например на рисунке:



И при достижении нижней границы сайта она закрывает важную для пользователя информацию, можно воспользоваться следующим примером:


$(function(){
	$(window).scroll(function(){
		var fixedLineMenu = $(".fixedBusket");
		
                height = getDocumentHeight();
		if (window.pageYOffset >= height - $(window).height()){
			$(fixedLineMenu).slideUp(100);
			$(fixedLineMenu).addClass("close");
		};
		if ($(fixedLineMenu).hasClass("close") && window.pageYOffset <= height - $(window).height()-25){
			$(fixedLineMenu).slideDown(100); 
			$(fixedLineMenu).removeClass("close");
	  	}  
	 });
	 
	 var ua = navigator.userAgent.toLowerCase();
	 var isOpera = (ua.indexOf('opera') > -1);
	 var isIE = (!isOpera & ua.indexOf('msie') > -1);
	 
	 function getDocumentHeight(){
	 	return Math.max(document.compatMode != 'CSS1Compat' ? document.body.scrollHeight : document.documentElement.scrollHeight, getViewportHeight());
	 }
	 
	 function getViewportHeight() {
	  	return ((document.compatMode || isIE) & !isOpera) ? (document.compatMode == 'CSS1Compat') ? document.documentElement.clientHeight : document.body.clientHeight : (document.parentWindow || document.defaultView).innerHeight;
	 }
});	

Необходимо только установить класс вашего блока с корзиной для переменной fixedLineMenu.