UMIhelp

Разработка сайта на UMI.CMS => JS и AJAX => Тема начата: Axiomateria от 18 Мая 2015, 15:27:27

Название: Фиксированное верхнее поле меняющее в себе состав элементов при прокрутке
Отправлено: Axiomateria от 18 Мая 2015, 15:27:27
Здравствуйте!
Подскажите пожалуйста, вдруг, кто знает, где можно скачать набор скриптов для такого фиксированного меню, как на сайте http://www.avtoall.ru
?
Интересует именно такой вариант как видно на примере сайта avtoall.ru где в прокручиваемой странице с некоторого момента происходит изменение в верхней планке меню, то есть, на пример, вместо ссылок меню появляется строка поиска.
 
Название: Re: Фиксированное верхнее поле меняющее в себе состав элементов при прокрутке
Отправлено: admin от 29 Мая 2015, 13:01:23
Если у вас bootsrap, то в него уже встроены такие фишки.
Название: Re: Фиксированное верхнее поле меняющее в себе состав элементов при прокрутке
Отправлено: atach от 31 Мая 2015, 10:08:46
Если вкратце я делаю так:

// top_floating - id моего дива который и является всплывающим меню
// update_floating - функция которые высчитывает это все когда показывать.
$(document).ready(function() {
      $('#top_floating').hide();
      $(window).scroll(update_floating);
});

// link_pic04 - id элемента на страницы, при достижении скролла, выпадает или исчезает выпадающее меню
function update_floating() {
  var $header = $('#link_pic04');
  if ($(window).scrollTop() > $header.offset().top + $header.innerHeight() - 47) {
    $('#top_floating').slideDown();
  } else {
    $('#top_floating').slideUp();
  }
}
ну и соответствующие стили ещё у меню - position: fixed;
Так что вперед, пробуй ;)
Название: Re: Фиксированное верхнее поле меняющее в себе состав элементов при прокрутке
Отправлено: Axiomateria от 14 Августа 2015, 14:20:07
Решение удалось применить такое:
JS такой:
$(document).ready(function () {
    var $menu = $("#menu");
    $(window).scroll(function () {
        if ($(this).scrollTop() > 70 && $menu.hasClass("default")) {
            $menu.fadeOut('fast', function () {
                $(this).removeClass("default")
                        .addClass("fixed")
                        .fadeIn('fast');
            });
        } else if ($(this).scrollTop() <= 70 && $menu.hasClass("fixed")) {
            $menu.fadeOut('fast', function () {
                $(this).removeClass("fixed")
                        .addClass("default");
            });
        }
    });
});
CSS такой:
#menu.default {
    display: none;
}
#menu.fixed {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
}
XSLT той части меню, которая преобразовывается после прокрутки страницы после 70px вниз такой:
                
                <div id="menu" class="default header-yarus wrap">
                    <xsl:apply-templates select="document('udata://menu/draw/navisectorscroll')" mode="central_menu"/>
                    <form action="/search/search_do/" method="get" role="form">
                        <input type="text" placeholder="Ваш запрос" value="&search-default-text;" name="search_string" onblur="javascript: if(this.value == '') this.value = '&search-default-text;';" onfocus="javascript: if(this.value == '&search-default-text;') this.value = '';"  x-webkit-speech="" speech="" class="scrolling" />
                        <button class="btn btn-primary btn-scroll" title="Найти" type="submit">
                            <xsl:text>&search;</xsl:text>
                        </button>
                    </form>
                    <xsl:apply-templates select="document('udata://emarket/cart')" mode="basket_scroll" />
                </div>

примечание: у меня кроме меню ещё краткая информация о содержимом корзины и поисковая строка выводится.