1

scroll-filter.js

$(function(){

    if ($('.sidebar-catalog-filter').length) {
        var win = $(window),
            winHeight = win.height(),
            sb = $('.sidebar-catalog-filter'),
            sbHeight,
            hpHeight,
            currScroll,
            scrollTop,
            startScroll = 0;


        function init() {
            sbHeight = sb.height();
            scrollTop = win.scrollTop();
            hpHeight = sbHeight - winHeight;
        }

        function scroll() {

            init();
            currScroll = win.scrollTop();

            // Если блок больше высоты окна
            if (sbHeight + 192 > winHeight){

                if (currScroll > startScroll) {
                    down();
                }
                else {
                    up();
                }

                startScroll = currScroll;
            }
        }

        function down() {
            sb.css({position: 'absolute', 'top': '0'});

            if (scrollTop - 169 > hpHeight) {
                sb.css({top: -hpHeight, position: 'fixed' });
            }
        }

        function up() {
            if (scrollTop <= sb.offset().top) {
                sb.css({
                    position: 'fixed',
                    top: 'auto'
                });
            }
            else {
                sb.css({
                    top: sb.offset().top - 129,
                    position: 'absolute'
                });
            }
        }


        sb.on('click', 'li.filter-item', function(){
            init();
            if (sbHeight < winHeight) {
                sb.css({top: 'auto', position: 'fixed'});
            } else {
                if ($(this).prev().hasClass('filter-item-brands')) {
                    if (sbHeight + 192 > winHeight) {

                        sb.css({
                            position: 'fixed',
                            top: - hpHeight
                        });

                    }
                }
            }
        });


        win.on('scroll', scroll);

    }

});

$(function() {
    if (($sidebar = $('#mainSidebar')).length < 1) return;

    var $sidebar;
    var startOffset = $sidebar.offset();
    var startPosition = $sidebar.position();

    var $menu = $('#mainMenu');

    var $window = $(window); 
    var winH = $window.height();

    var scroll = 0;
    var lastScroll = 0;
    var state = 'reset';

    function updateState() {
        var menuH = $menu.outerHeight();

        var offset = $sidebar.offset();
        var height = $sidebar.outerHeight();

        switch (state) {
            case 'reset':
                if (scroll > lastScroll && scroll + winH >= startOffset.top + height) {
                    if (height > winH) {
                        fixedBottom();
                    } else {
                        fixedTop();
                    }
                }
                break;

            case 'absolute':
                if (height > winH) {
                    if (scroll < lastScroll && scroll <= offset.top - menuH) {
                        fixedTop();
                    } else if (scroll > lastScroll && scroll + winH >= offset.top + height) {
                        fixedBottom();
                    }
                }
                break;

            case 'fixed-top':
                if (scroll < lastScroll) {
                    if (scroll < startOffset.top - menuH) {
                        reset();
                    }
                } else if (scroll > lastScroll && height > winH) {
                    absolute();
                }
                break;

            case 'fixed-bottom':
                if (scroll < lastScroll) {
                    absolute();
                }
                break;
        }

        lastScroll = scroll;

        function reset() {
            $sidebar.css({
                position: '',
                top: '',
                bottom: '',
                left: ''
            });

            //console.log(state + ' => reset');
            state = 'reset';
        }

        function absolute() {
            $sidebar.css({
                position: 'absolute',
                top: offset.top - startOffset.top,
                bottom: '',
                left: startPosition.left
            });

            //console.log(state + ' => absolute');
            state = 'absolute';
        }

        console.log(menuH);

        function fixedTop() {
            $sidebar.css({
                position: 'fixed',
                top: menuH,
                bottom: '',
                left: startOffset.left
            });

            //console.log(state + ' => fixed-top');
            state = 'fixed-top';
        }

        function fixedBottom() {
            $sidebar.css({
                position: 'fixed',
                top: '',
                bottom: 0,
                left: startOffset.left
            });

            //console.log(state + ' => fixed-bottom');
            state = 'fixed-bottom';
        }
    }

    $window.on('resize', function() {
        winH = $window.height();
    });

    $window.on('scroll', function() {
        scroll = $window.scrollTop();

        updateState();
    });
});