Ремонт компьютера
Сборка, чистка, апгрейт ремонт любой техники.
Замена частей, установка ПО, установка Windows, антивируса.
Удаленная помощь без вызова на дом.
Создание сайта
Создание сайта с нуля, модулей, скриптов для сайта.
Движки Joomla, Wordpress, Opencart, Prestashop и тд.
SEO продвижение, ремонт, оптимизация сайта.

Нужно прикрепить footer вниз если страница маленькая

Бывает что на некоторых страницах мало данных, и тогда футер чуть ли не в цетре экрана. Нужно прикрепить footer вниз если страница маленькая. Особенно на самописных, например laravel. Идея простая, если страница уходит за край экрана и есть прокрутка, то мы ничего не делаем все хорошо, если же меньше то футер крепим к низу.

HTML



<div id="foot">
		

<div class="footerText col-md-10 col-xs-12 text-left">
			Все права защищены <?= date('o')?>г. 
Разработано на <a style="color:#333" href="http://chizi.by">Chizi.by.</a></div>


 	
		

<div class="text-center col-md-2 col-xs-12 text-right" ><a href="#" class="credit_link btn" onclick="return up()">Вверх</a></div>


</div>

JS

function windowSize(){
var wh=$(window).height();
var dh2=$('body').height();
    if (wh > dh2){
		$('.text-center').css('display','none');
		$('#foot').css('position','fixed').css('bottom','0');
		}else
		$('.text-center').css('display','inline-block');
		$('#foot').css('position','inherit');
}

$(window).on('load resize',windowSize);

var t;
function up() {
  var top = Math.max(document.body.scrollTop,document.documentElement.scrollTop);
  if(top > 0) {
    window.scrollBy(0,-50);
    t = setTimeout('up()',20);
  } else clearTimeout(t);
  return false;
}

Как видим из кода ставим на 2 событиях загрузки страницы и изменения размера экрана проверку.

text-center — у меня это кнопка прокрутки вверху (можно убрать).
#foot — мой футер
Может кому пригодиться.

Название статьи при не правильной раскладке клавиатуры: Ye;yj ghbrhtgbnm footer dybp tckb cnhfybwf vfktymrfz
Если вдруг появилось желание поблагодарить автора,просто нажмите на рекламу чуть ниже, этого будет достаточно :)

Добавить комментарий

Ваш e-mail не будет опубликован.

Вставьте верное число *