Скрипт плавающего блока сдвигает футер вниз до бесконечности

[Solus_Rex]

Благодарю всех, кто откликнулся. Уже удалось найти решение на форуме javascript.ru, огромная благодарность за это форумчанину Рони.
Собственно весь рабочий код:

<?php if(1 != @$_COOKIE['no_fixed_block']) : ?>

<script type="text/javascript">// <![CDATA[
$(function() {
    if($.cookie("no_fixed_block") != 1) {
        var offset = $("#fixed").offset();
        var topPadding = 10,
        bottomPadding = 260; // доработка - высота над которой остановится блок (иначе будет сдвигать вниз до бесконечности).
        $(window).scroll(function() {
            if ($(window).scrollTop() > offset.top) {
            if ($(document).height() - bottomPadding > $(window).scrollTop() + $("#fixed").height()) // доработка - строчка кода, которая отвечает за остановку блока.

                $("#fixed").stop().animate({marginTop: $(window).scrollTop() - offset.top + topPadding}); // если .animate заменить на .css, то блок будет двигаться без анимации (задержки).
            }
            else {$("#fixed").stop().animate({marginTop: 1});};}); // если .animate заменить на .css, то блок будет двигаться без анимации (задержки).
    }
});
// ]]></script>

<script type="text/javascript">// <![CDATA[
function close_fixed_block() {
$.cookie("no_fixed_block", 1, { expires : 1 });
$('#fixed').hide();
}
// ]]></script>

<div id="fixed">
<div id="close"><a href="#" onclick="close_fixed_block(); return false;">Закрыть блок</a></div>

.....Содержимое блока......

</div>
<?php endif; ?>

Как оказалось в скрипт нужно было добавить bottomPadding = 260; (260 - высота над которой остановится блок) и if ($(document).height() - bottomPadding > $(window).scrollTop() + $("#fixed").height()). В стилях ничего менять не пришлось, только сам скрипт.
Также по ходу удалось выяснить, как можно отключать анимацию (задержку) блока, чтобы он просто прилипал. Нужно в скрипте .animate заменить на .css.
Буду рад, если это решение кому-то пригодится!

Спасибо, что выложили код, а не поделитесь ещё стилями и html, а то чего-то у меня не выходит её запустить... ни в файле ни на codepen.
Оно с position: relative не плавает нифига.

 

[Gudym]

Solus_Rex, а у Вас jQuery на сайте подключена? Без jQuery скрипт работать не будет.

На данный момент стили блока у меня такие:

#fixed {
background: none repeat scroll 0 0 #f1f1f1;
border: 1px solid #d8d8d8;
padding: 12px 5px 25px;
position: relative;
}

И кнопка закрытия блока:

#fixed #close {
border: 1px solid #d8d8d8;
font-style: italic;
font-weight: bold;
padding: 2px;
position: absolute;
right: 53px;
top: 618px;
}

 

[Gudym]

Интересно, а вот если мне нужно вывести 2-ва плавающих блока (в левой и правой колонке сайта), как заставить работать второй скрипт, а то работает только первый блок? Кто-нибудь знает, как это делается? Пока поиск по гуглу не дал результатов. Нашел, что нужно переименовывать функции, но как это сделать пока не понимаю.
Заранее благодарю тех, кто откликнется!

 

[Absolute]

Интересно, а вот если мне нужно вывести 2-ва плавающих блока (в левой и правой колонке сайта), как заставить работать второй скрипт, а то работает только первый блок? Кто-нибудь знает, как это делается? Пока поиск по гуглу не дал результатов. Нашел, что нужно переименовывать функции, но как это сделать пока не понимаю.
Заранее благодарю тех, кто откликнется!

Просто измените id на class.
В плавающих блоках было id="fixed" стало class="fixed".
В стилях и скрипте было #fixed стало .fixed
Это самый простой способ, если не критично то, что блоки будут двигаться синхронно.

 

[Solus_Rex]

Solus_Rex, а у Вас jQuery на сайте подключена? Без jQuery скрипт работать не будет.

На данный момент стили блока у меня такие:

#fixed {
background: none repeat scroll 0 0 #f1f1f1;
border: 1px solid #d8d8d8;
padding: 12px 5px 25px;
position: relative;
}

И кнопка закрытия блока:

#fixed #close {
border: 1px solid #d8d8d8;
font-style: italic;
font-weight: bold;
padding: 2px;
position: absolute;
right: 53px;
top: 618px;
}

JQuery подключен. Но чего-то всё-равно не пашет даже с вашими стилями... может надо ещё чего подключать. Хз...

 

[Gudym]

Просто измените id на class.
В плавающих блоках было id="fixed" стало class="fixed".
В стилях и скрипте было #fixed стало .fixed
Это самый простой способ, если не критично то, что блоки будут двигаться синхронно.

Absolute, икренне благодарю, действительно работает теперь оба блока!
Еще хотел бы дополнить, что в коде для второго блока нужно еще переименовать function close_fixed_block, например, я просто в конец добавил 2, получилось close_fixed_block2, иначе возникают проблемы с закрытием блоков.

Solus_Rex, у меня с JQuery подключается 2-ва скрипта (между тегами <head></head>

1. <script src="Для просмотра ссылки Войди или Зарегистрируйся"></script>
2. <script type="text/javascript" src="/templates/шаблон_сайта/js/jquery.cookie.js"></script>

2-й скрипт jquery.cookie.js я предварительно скачивал и заливал на сайт в папку шаблона js.

Больше ничего не подключалось.

 

[Solus_Rex]

Absolute, икренне благодарю, действительно работает теперь оба блока!
Еще хотел бы дополнить, что в коде для второго блока нужно еще переименовать function close_fixed_block, например, я просто в конец добавил 2, получилось close_fixed_block2, иначе возникают проблемы с закрытием блоков.

Solus_Rex, у меня с JQuery подключается 2-ва скрипта (между тегами <head></head

1. <script src="Для просмотра ссылки Войди или Зарегистрируйся"></script>
2. <script type="text/javascript" src="/templates/шаблон_сайта/js/jquery.cookie.js"></script>

2-й скрипт jquery.cookie.js я предварительно скачивал и заливал на сайт в папку шаблона js.

Больше ничего не подключалось.

Ага... вот второй файл не подключал. Спасибо. Попробую.

 

[slavik11]

2-й скрипт jquery.cookie.js

А где вы скачивали jquery.cookie.js ?

 

[Gudym]

А где вы скачивали jquery.cookie.js ?

Честно говоря не помню уже. Но если Вам нужно, то прикрепляю файл.