【工作技巧篇】移动端顶部搜索功能实现

最近公司产品需要在微信内部做一个minisite，其中有一个列表页需要有顶部的搜索功能，类似京东那种，有搜索框和筛选条件。产品需要的一个操作是，当用户下滑列表时，需要顶部的搜索只保留条件筛选，搜索框等需要隐藏；当往上滑动或者滑动到列表底部（无新数据加载）时，需要将顶部的搜索功能再显示完全。

上面是现实背景，下面直接列出基本的实现代码以供大家参考：

`

var oldScrollTop = 0,
    filterFixed = 1,
    fscrollTimer = null,
    filterTop = 0;
  
function doScroll() {
    return function() {
        var st = $(window).scrollTop();
        filterFixedDeal(st);
    }
}

function resetSearchHeadwh() {
    /*重置顶部搜索功能的样式*/
    $('#searchHead').height($('#searchHeadFixer').height());
    filterTop = $('#proFilterWrap').position().top;
}

/*判断滑动的方向*/
function filterFixedDeal(st) {
    if (st > oldScrollTop) {
        isScrollBottom(st);
        if ((filterFixed === 1 || filterFixed === 2) && st > filterTop + 40) {
            filterFixed = 0;
            setFixedAnim();
        }
    } else if (st < oldScrollTop) {
        if (filterFixed === 0 || filterFixed === 2) {
            if (st <= filterTop - 44) {
                filterFixed = 1;
                setFixedAnim();
            } else if (filterFixed === 0) {
                filterFixed = 2;
                setFixedAnim();
            }
        }
    }
    oldScrollTop = st;
}

/*顶部搜索框等的显隐切换，含基本动画*/
function setFixedAnim() {
    fscrollTimer && window.clearTimeout(fscrollTimer);
    fscrollTimer = window.setTimeout(function() {
        var shf = $('#searchHeadFixer'),
            temp = 0;
        if (filterFixed == 0) {
            shf.addClass('search_head_fixer');
            temp = -4;
        } else if (filterFixed == 1) {
            shf.removeClass('search_head_fixer');
            resetSearchHeadwh();
        }
        shf.css({
            '-webkit-transform': 'translate3d(0,' + temp + 'rem,0)',
            'transition': 'transform 0.5s ease'
        });
    }, 100);
}

/*绑定页面滚动事件*/
$(window).on("scroll", doScroll());

`