тел.: 8 (4212)20-79-81

Fogstream блог


Фиксированный фильтр

Простенький код для фиксированного фильтра на JavaScript. Например фиксированное меню http://www.devbridge.com/projects/autocomplete/jquery/ - слева есть меню, которое при прокрутки страницы вниз всегда остается слева.

Не понравилось, то что если пунктов много в этом меню, то есть высота меню больше чем высота видимой области браузера, меню обрезается. Захотелось сделать простенькую менюшку чтобы можно было просмотреть все пункты меню, но меню всегда оставалось слева в видимой области. Пример, реализован на нашем сайте: http://secretnights.ru/category-pokryvala/. Когда мы прокручиваем страницу вниз, фильтр слева остается на месте, как только дошли до последнего пункта, фильтр сворачивается и перемещается за видимой областью.

Скрипт: 

<script type=“text/javascript”>

    filter

    var height = $(“.filter”).height();

    var offset = $(“.filter”).offset();

    var topPadding = 10;

    var topPosition = offset.top + topPadding + height;

    var filterHeight = offset.top + topPadding + height;

    $(“.filter-open”).click(function () {

        $(“.filter > ul”).fadeIn(‘fast’);

        $(this).attr('alt’, 'close’).hide();

        filterHeight = $(“.filter”).offset().top + topPadding + height;

    });

    $(window).scroll(function () {

        if ($(“.filter-open”).attr('alt’) != 'open’) {

            if ($(window).scrollTop() > filterHeight) {

                $(“.filter > ul”).fadeOut('fast’);

                $(“.filter-open”).show().attr('alt’, 'open’);

                $(“.filter”).stop().animate({marginTop:$(window).scrollTop() - offset.top + topPadding});

            }

            if ($(window).scrollTop() < $(“.filter”).offset().top) {

                $(“.filter”).stop().animate({marginTop:$(window).scrollTop() - offset.top + topPadding});

                filterHeight = $(“.filter”).offset().top + topPadding + height;

            }

            if ($(window).scrollTop() < topPosition) {

                $(“.filter”).stop().animate({marginTop:0});

            }

        } else {

            if ($(window).scrollTop() > filterHeight) {

                $(“.filter”).stop().animate({marginTop:$(window).scrollTop() - offset.top + topPadding});

            } else {

                if ($(window).scrollTop() < topPosition) {

                    $(“.filter”).stop().animate({marginTop:0});

                    $(“.filter > ul”).fadeIn('fast’);

                    $(“.filter-open”).attr('alt’, 'close’).hide();

                } else {

                    $(“.filter”).stop().animate({marginTop:$(window).scrollTop() - offset.top + topPadding});

                }

            }

        }

    });

</script>

А Вот и HTML

<div class=“filter”>

<div class=“filter-open”>Фильтр</div>

<ul>…</ul>// пример списка с параметрами фильтра, теги могут быть любые

</div>

На главную