2

我有一个已固定在窗口顶部的标题。我让它在用户向上滚动时出现并在用户向下滚动时消失。现在它只使用.show()and .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;
}
});
4

1 回答 1

4

使用 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 以将其移开。

于 2013-06-17T02:28:50.580 回答