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

Тема в разделе "JavaScript", создана пользователем Gudym, 24 апр 2015.

Модераторы: ZiX
  1. Gudym

    Gudym Постоялец

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

    Код:
    <?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; ?>
    Помогите доработать этот код, чтобы плав. блок просто останавливался при достижении футера сайта и не отодвигал его. С человеком, который писал мне этот скрипт, связь потеряна, поэтому надежда только на вас. Я в этом почти ничего не понимаю.
    Заранее благодарю всех, кто откликнется!
     
    exoff нравится это.
  2. Absolute

    Absolute Крокодил ;)

    Регистр.:
    9 авг 2009
    Сообщения:
    340
    Симпатии:
    162
    если блок плавающий, значит для id="fixed" должен быть стиль position: absolute ну или fixed, а если задан этот стиль, то позиция этого блока никак не должна влиять на другие блоки.
     
    exoff нравится это.
  3. Solus_Rex

    Solus_Rex

    Регистр.:
    15 янв 2012
    Сообщения:
    425
    Симпатии:
    179
    Помните, хороший анекдот - "Чем этого лечить проще нового сделать..."
    Вот тут:
    http://shpargalkablog.ru/2013/09/scroll-block.html
    Автор даёт примеры нескольких разных плавающих блоков. 2 из них я тестил. Работают.
    Попробуйте.

    Полез в закладки - ещё пара вариантов:
    http://www.magentawave.com/2013/02/simple-jquery-floating-block.html
    http://files.maxborisov.com/demos/demo_002/index.html
    Вариант из magentawave, я тоже использовал, вроде.
    Но у Натальи в первом варианте - интереснее, там разные.
     
    Последнее редактирование: 24 апр 2015
    exoff нравится это.
  4. Gudym

    Gudym Постоялец

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

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

    Solus_Rex

    Регистр.:
    15 янв 2012
    Сообщения:
    425
    Симпатии:
    179
    Чего-то скрипт не работает. Я его попытался покрутить, но он выдаёт ошибки, Вы его точно нормально скопировали?
     
    exoff нравится это.
  6. Gudym

    Gudym Постоялец

    Регистр.:
    19 мар 2013
    Сообщения:
    55
    Симпатии:
    23
    Благодарю!
    Вроде нормально все скопировал. На всякий случай еще раз сюда скопирую.

    Код:
    <?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; ?>
     
    exoff нравится это.
  7. Absolute

    Absolute Крокодил ;)

    Регистр.:
    9 авг 2009
    Сообщения:
    340
    Симпатии:
    162
    Похоже, что меняется просто высота страницы, а т.к. футер прилеплен к низу - едет вслед за увеличением высоты. Попробуйте так:
    Код:
    <?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; ?>
    
     
    Последнее редактирование: 25 апр 2015
  8. Gudym

    Gudym Постоялец

    Регистр.:
    19 мар 2013
    Сообщения:
    55
    Симпатии:
    23
    Absolute, благодарю за помощь! Пробовал, ничего не поменялось, все равно подвал сдвигается.

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

    Absolute Крокодил ;)

    Регистр.:
    9 авг 2009
    Сообщения:
    340
    Симпатии:
    162
    Да, всё верно прописали. Если есть возможность - выложите ссылку на сайт. Так будет проще.
     
  10. Gudym

    Gudym Постоялец

    Регистр.:
    19 мар 2013
    Сообщения:
    55
    Симпатии:
    23
    Благодарю всех, кто откликнулся. Уже удалось найти решение на форуме 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.
    Буду рад, если это решение кому-то пригодится!
     
    Absolute и Solus_Rex нравится это.