Javascript 有没有什么方法可以让我隐藏一个搜索栏，直到用户向上滚动…类似于iPhone上的messages应用程序？

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

我将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;
});

var lastScrollTop=0；
$（窗口）。滚动（函数（）{
var st=$（this.scrollTop（）；
if（st235）$（'searchInput'）.removeClass（'slideIn'）.addClass（'stickySearch'）；
else$（'searchInput'）.removeClass（'stickySearch'）.addClass（'slideIn'）；
}
else$（'searchInput'）.removeClass（'stickySearch'）.removeClass（'slideIn'）；
lastScrollTop=st；
});

由于某种原因，它不起作用。。。

---

有什么想法吗？

你的逻辑有点混乱。在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;
});

.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;
}

---

提供小提琴：

回答您的问题：是的，它是。因此，如果你想要一个不同的答案，在确保你已经阅读（并且正在跟随）并且意识到Stackoverflow在这里帮助你找出为什么你已经尝试的东西不起作用之后，问正确的问题是很重要的。这并不是为了帮助你从头开始，这是你的责任（谷歌搜索、SO搜索等），然后当你认为你有一些应该有用但没有用的东西时，那就是问你关于stackoverflow.CSS的问题的时候了。我有：

.stickySearch{width:56%！important；position:fixed！important；left:0；right:0；}

.removeClass（'stickySearch'）.addClass（'slideIn'）；}else$（'searchInput'）.removeClass（'stickySearch'）.removeClass（'slideIn'）；lastScrollTop=st；}）创意如果你在问题中提到你的研究成果，创建一个jsfiddle.net并正确描述你的问题，而不是写一个关于你想要完成什么的高层次概念。请不要通过评论添加任何代码或其他细节-编辑你的帖子：你的问题应该包含所有细节，即使这些细节中有一些是在事实发生之后出现的。这似乎与根本没有代码没有什么不同。我不知道这有没有什么不同，但这是一个手机应用程序，而不是一个网站。我需要将组件“searchInput”隐藏在标题下，除非用户向上滚动。如果它是html5应用程序，应该不会有什么区别。你看了fiddle没有，注意到了相应的css吗？我看了fiddle并将css添加到了我的应用程序中，但这并没有带来什么不同。让页面只滚动一点会更容易吗？