使标题像谷歌浏览器移动应用地址栏一样

Question

我有一个已固定在窗口顶部的标题。我让它在用户向上滚动时出现并在用户向下滚动时消失。现在它只使用.show() 和.hide()。我试图让它像谷歌浏览器移动应用程序上的地址栏一样，即当用户向上滚动导航栏时，导航栏是静止的，直到窗口顶部到达导航 div 的顶部。

如果有什么不懂的请追问

这是我目前拥有的 jquery

    $(window).scroll(
{
    previousTop: 0
}, 
function () {
var currentTop = $(window).scrollTop();

if (currentTop < 80) {
    $('#top').css ({position: 'absolute'});
} else {
    $('#top').css ({position: 'fixed'});
    if (currentTop < this.previousTop) {
        $("#top").show();
    } else {
        $("#top").hide();
    }
    this.previousTop = currentTop;
}
});

Answer 1

使用 jQuery 制作原型 - 第 2 版

我再次解决了这个问题，使操作更加顺畅。

jQuery 代码如下所示：

init = {
    previousTop: 0,
    headerHeight: 52
}

$(window).scroll(init,function () {
    var currentTop = $(window).scrollTop();
    var scrollMax =  $(document).height() - $(window).outerHeight(true);
    var bodyHeight = $(window).outerHeight(true);
    var scrollType = "";

    if (currentTop < init.previousTop) {
        $(".offset b").text(currentTop);
        $(".offset em").text("Up");
       scrollUp = true;        
    } else {
        $(".offset b").text(currentTop);
        $(".offset em").text("Down");
       scrollUp = false;        
    }

    if (scrollUp == true) {
        $(".header").css({"color": "blue"});
        $(".header").css({"top": currentTop});
    } else {
        $(".header").css({"color": "yellow"});
        if (scrollMax - currentTop < init.headerHeight) {
            $(".header").css({"top": 0});
        }
    }

    /* Optional - to display values of various attributes */    
    $(".previousTop b").text(init.previousTop);
    $(".headerHeight b").text(init.headerHeight);
    $(".bodyHeight b").text(bodyHeight);
    $(".scrollMax b").text(scrollMax);

    init.previousTop = currentTop;
});

演示小提琴位于：http://jsfiddle.net/audetwebdesign/gmkum/

这是如何工作的

这里有四个关键的想法可以使这项工作发挥作用。

(1) currentTop < init.previousTop 周围的代码旨在确定是否 您正在向上或向下滚动。这是通过比较当前的.scrollTop 来完成的 与上一个滚动事件的位置。

(2) 如果您向上滚动，则将标题放置在窗口的顶部以便可见。

(3) 向下滚动时，顶部偏移保持不变，因为标题是 绝对定位，它只是随着内容滚动离开屏幕顶部。

(4) 在最大滚动位置附近有一个有趣的案例。万一没有 向左移动足够的滚动位置以将标题移出屏幕，将顶部偏移设置为 0 把它移开。