Анимация блока и прилипание его к нижней части окна

Общие вопросы по системе юкоз, вопросы по ucoz, вопросы без определенной темы

Анимация блока и прилипание его к нижней части окна

» » Сообщение:

Приветствую! И снова нужна помощь! :)

Имеется скрипт:

script Код: Выделить всё Развернуть
function setCookie(name, value, days) {
     if (days) {
     var date = new Date();
     date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
     var expires = "; expires=" + date.toGMTString();
     }
     else var expires = "";
     document.cookie = name + "=" + value + expires + "; path=/";
}
function getCookie(name) {
     var nameEQ = name + "=";
     var ca = document.cookie.split(';');
     for (var i = 0; i < ca.length; i++) {
     var c = ca[i];
     while (c.charAt(0) == ' ') c = c.substring(1, c.length);
     if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
     }
     return null;
}
function eraseCookie(name) {
     setCookie(name, "", -1);
};

$(document).ready(function() {
$(window).scroll(function() {
$('#block').animate({top:$(window).scrollTop()+"px" },{queue: false});     
});
$('#close_block').click(function() {
$('#block').animate({ top:"-=40px",opacity:0 }, "slow");
setCookie('blockhiden', 1, 30);
});
if (getCookie('blockhiden')) {
if (getCookie('blockhiden') == 1) {
$('#block').animate({ top:"-=40px",opacity:0 }, "slow");
}
}
});

Который анимирует перемещение блока прилепленного к верхней части экрана (top), и запоминает в куках закрытие.

Пример:

html Код: Выделить всё Развернуть
<div id="block"><div id="close_block">закрыть</div>проверка</div>

Нужно чтобы блок был внизу с той-же анимацией, но если задать стили css для id="block":

css Код: Выделить всё Развернуть
position: absolute;
    bottom: 0;
    width: 300px;
    left: calc(50% - 150px);

то начинается котовасия ...

Нашел способ, при котором если заменить строчку кода

script Код: Выделить всё Развернуть
.animate({top:$(window).scrollTop()

на

script Код: Выделить всё Развернуть
let  scrollBottom = function(){ return $(window).scrollTop() + $(window).height(); };

или

script Код: Выделить всё Развернуть
var scrollBottom = $(window).scrollTop() + $(window).height();

то анимация должна быть правильной, но не получается связать это с основным скриптом ...

Помоги, пожалуйста!

блок, анимация, скрипт, bottom, top

Re: Анимация блока и прилипание его к нижней части окна

Fearfire » » Сообщение:

Fearfire писал(а) › 25 дек 2017, 18:55:не получается связать это с основным скриптом

Разместил блок внизу окна, без анимации.

Рабочий скрипт:

CSS:

Блоки в нижней части сайта:

Результат:

result-podarok.png
result-podarok.png

или посмотреть на сайте: SergeyKov.ru

Файл подарка:





Похожие темыКомментарии ПросмотрыПоследнее сообщение
102077Re: Проверка в JS видимости блока с...
Сообщение от: Fearfire
5877Re: Плавное появление блока с меню ...
Сообщение от: Admin
031Две женщины (памяти А. Блока)
Сообщение от: Гость
0424Поиск слова в строке и вывод части ...
Сообщение от: Admin