Question

基本上，当页面加载时，我希望它已经滚动了一点点，以便页面顶部的搜索栏位于标题下。当用户向上滚动时，他们可以看到并使用它。

我像这样设置CSS：

.stickySearch{
    width:56% !important;
    position:fixed !important;
    left:0;
    right:0;
}

我使用的JS是：

var lastScrollTop = 0;
$(window).scroll(function(){
    var st = $(this).scrollTop();
    if(st<=lastScrollTop){
        //scroll up
        if($(this).scrollTop()>235) $('#searchInput').removeClass('slideIn').addClass('stickySearch');
        else $('#searchInput').removeClass('stickySearch').addClass('slideIn');
    }
    else $('#searchInput').removeClass('stickySearch').removeClass('slideIn');
    lastScrollTop = st;
});

由于某种原因，它不起作用...... 有什么想法吗？

Answer 1

你的逻辑有点乱。在if语句中添加括号可以让我快速查看问题。如果用户已超出屏幕顶部，我也会更改您测试的位置。

<强> JS

var lastScrollTop = 0;

$(window).scroll(function(){

    var st = $(this).scrollTop();

    if(st > 235) {        
        if(st<=lastScrollTop){
            //scroll up
            $('#searchInput').removeClass('slideOut');
        } else {
            //Scroll down
            $('#searchInput').addClass('slideOut');
        }

    } else {
        //At top of page
        $('#searchInput').removeClass('slideOut');
    }

    lastScrollTop = st;
});

<强> CSS

.stickySearch{
    width:56% !important;
    position:fixed !important;
    left:0;
    right:0;
    border:1px solid grey;
    overflow: hidden;
    height: 1.5em;
    line-height: 1.5em;
    transition: height 100ms linear;
}

.slideOut {
    height: 0em;
}

提供小提琴：http://jsfiddle.net/op6p9xb7/1/

在用户向上滚动之前，有什么方法可以隐藏搜索栏...类似于iPhone上的消息应用程序？

1 个答案: