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

Gudym · 24 Апр 2015

Доброго всем дня!
Есть хороший скрипт плавающего блока с функцией отключения. Но в этом скрипте есть одна недоработка, которая сводит на нет его применимость на сайте. Плав.блок ездит в правой колонке сайта и если он добирается до футера (когда контентная часть меньше правой колонки), то начинает его отодвигать вниз до бесконечности (пока прокручиваешь станицу). Если контентная часть больше правой колонки, то блок до футера не добирается и тогда он не сдвигается.

Код:

<?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;
        $(window).scroll(function() {
            if ($(window).scrollTop() > offset.top) {
                $("#fixed").stop().animate({marginTop: $(window).scrollTop() - offset.top + topPadding});
            }
            else {$("#fixed").stop().animate({marginTop: 1});};});
    }
});
// ]]></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; ?>

Помогите доработать этот код, чтобы плав. блок просто останавливался при достижении футера сайта и не отодвигал его. С человеком, который писал мне этот скрипт, связь потеряна, поэтому надежда только на вас. Я в этом почти ничего не понимаю.
Заранее благодарю всех, кто откликнется!

Absolute · 24 Апр 2015

если блок плавающий, значит для id="fixed" должен быть стиль position: absolute ну или fixed, а если задан этот стиль, то позиция этого блока никак не должна влиять на другие блоки.

Solus_Rex · 24 Апр 2015

Gudym написал(а):
Доброго всем дня!
Есть хороший скрипт плавающего блока с функцией отключения. Но в этом скрипте есть одна недоработка, которая сводит на нет его применимость на сайте. Плав.блок ездит в правой колонке сайта и если он добирается до футера (когда контентная часть меньше правой колонки), то начинает его отодвигать вниз до бесконечности (пока прокручиваешь станицу). Если контентная часть больше правой колонки, то блок до футера не добирается и тогда он не сдвигается.

Код:

<?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; $(window).scroll(function() { if ($(window).scrollTop() > offset.top) { $("#fixed").stop().animate({marginTop: $(window).scrollTop() - offset.top + topPadding}); } else {$("#fixed").stop().animate({marginTop: 1});};}); } }); // ]]></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; ?>

Помогите доработать этот код, чтобы плав. блок просто останавливался при достижении футера сайта и не отодвигал его. С человеком, который писал мне этот скрипт, связь потеряна, поэтому надежда только на вас. Я в этом почти ничего не понимаю.
Заранее благодарю всех, кто откликнется!

Помните, хороший анекдот - "Чем этого лечить проще нового сделать..."
Вот тут:
Для просмотра ссылки Войди или Зарегистрируйся
Автор даёт примеры нескольких разных плавающих блоков. 2 из них я тестил. Работают.
Попробуйте.

Полез в закладки - ещё пара вариантов:
Для просмотра ссылки Войди или Зарегистрируйся
Для просмотра ссылки Войди или Зарегистрируйся
Вариант из magentawave, я тоже использовал, вроде.
Но у Натальи в первом варианте - интереснее, там разные.

Gudym · 24 Апр 2015

Absolute написал(а):
если блок плавающий, значит для id="fixed" должен быть стиль position: absolute ну или fixed, а если задан этот стиль, то позиция этого блока никак не должна влиять на другие блоки.

В стилях для #fixed стоит position: relative. Пробовал absolute, еще хуже выходит, блок наезжает на футер и весь подвал опять-таки едет вниз до бесконечности. А если прописать position: fixed, так блок вообще исчезает.
Спасибо, но здесь наверняка дело не в стилях, там сам скрипт править нужно.

Solus_Rex, благодарю Вас за наводку, но я уже читал это. Я все перечитал на эту тематику, что гугл выдал...Но дело в том, что те скрипты мне не подходят, так как ни в одном из них нету функции закрытия плав. блока, как реализовано в моем варианте. Если юзера напрягает, то он просто закрывает блок и он исчезает для него на сутки. Это для меня очень важно. А как переделать те скрипты, что Вы порекомендовали, чтобы реализовать там функцию закрытия блока я не понимаю. Поэтому буду ждать, может кто посоветует еще какое-нибудь решение.

Solus_Rex · 25 Апр 2015

Чего-то скрипт не работает. Я его попытался покрутить, но он выдаёт ошибки, Вы его точно нормально скопировали?

Gudym · 25 Апр 2015

Solus_Rex написал(а):
Чего-то скрипт не работает. Я его попытался покрутить, но он выдаёт ошибки, Вы его точно нормально скопировали?

Благодарю!
Вроде нормально все скопировал. На всякий случай еще раз сюда скопирую.

Код:

<?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;
        $(window).scroll(function() {
            if ($(window).scrollTop() > offset.top) {
                $("#fixed").stop().animate({marginTop: $(window).scrollTop() - offset.top + topPadding});
            }
            else {$("#fixed").stop().animate({marginTop: 1});};});
    }
});
// ]]></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; ?>

Absolute · 25 Апр 2015

Gudym написал(а):
В стилях для #fixed стоит position: relative. Пробовал absolute, еще хуже выходит, блок наезжает на футер и весь подвал опять-таки едет вниз до бесконечности. А если прописать position: fixed, так блок вообще исчезает.
Спасибо, но здесь наверняка дело не в стилях, там сам скрипт править нужно.

Похоже, что меняется просто высота страницы, а т.к. футер прилеплен к низу - едет вслед за увеличением высоты. Попробуйте так:

Код:

<?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;
        var limitHeight = $(document).height() - $('.footer').height(); // вставить вместо .footer свой класс футера
        // или фикс. высоту футера числом вместо $('.footer').height()
        $(window).scroll(function() {
           if ($(window).scrollTop() > offset.top){
              if (limitHeight > offset.top){
               $("#fixed").stop().animate({marginTop: $(window).scrollTop() - offset.top + topPadding});
               } else {
              $("#fixed").stop();
              }
            } else {
            $("#fixed").stop().animate({marginTop: 1});
            }
            });
    }
});
// ]]></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; ?>

Gudym · 25 Апр 2015

Absolute, благодарю за помощь! Пробовал, ничего не поменялось, все равно подвал сдвигается.

У меня получается "подвал" сайта, т.е. его нижняя часть, состоит из двух частей, двух классов. Первым идет #bottom, а за ним уже #pos_footer.
Значит выходит, что двигает оно #bottom...наверное. Я в $('.footer').height(); вместо .footer прописывал и #bottom и #pos_footer, но ничего не изменилось.
А числом, так это нужно было так прописать: var limitHeight = $(document).height() - 50; ...??? 50 - от фонаря поставил. Тоже не помогло. Скрипт работает с Вашей правкой, но все равно сдвигает низ.

Absolute · 25 Апр 2015

Gudym написал(а):
А числом, так это нужно было так прописать: var limitHeight = $(document).height() - 50; ...??? 50 - от фонаря поставил.

Да, всё верно прописали. Если есть возможность - выложите ссылку на сайт. Так будет проще.

Gudym · 26 Апр 2015

Благодарю всех, кто откликнулся. Уже удалось найти решение на форуме 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.
Буду рад, если это решение кому-то пригодится!

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

Gudym

Постоялец

Absolute

Крокодил ;)

Solus_Rex

Постоялец

Gudym

Постоялец

Solus_Rex

Постоялец

Gudym

Постоялец

Absolute

Крокодил ;)

Gudym

Постоялец

Absolute

Крокодил ;)

Gudym

Постоялец