使标题行为像谷歌浏览器移动应用程序地址栏 [英] Making header act like google chrome mobile app address bar

问题描述

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

I have a header that I have fixed to the top of the window. I have it appear when the user scrolls up and disappear when the user scrolls down. Right now it just uses .show() and .hide(). I am trying to get it to act like the address bar on the google chrome mobile app i.e. when the user scrolls up the nav bar is stationary until the top of the window reaches the top of the nav div.

如果您有任何不明白的地方请询问

If there is anything you do not understand please ask

这是我到目前为止的jquery

here is the jquery that I have so far

    $(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;
}
});

推荐答案

原型使用jQuery - 版本2

我再次解决了这个问题并使动作更顺畅。

Prototype Using jQuery - Version 2

I worked on this problem again and made the action a lot smoother.

jQuery代码如下：

The jQuery code looks like:

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/

如何运作

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

There are four key ideas here that make this work.

（1）围绕<$的代码c $ c> currentTop< init.previousTop 旨在确定您是向上还是向下滚动
。这是通过比较当前 .scrollTop
的位置与上一个滚动事件的位置来完成的。

(1) The code around currentTop < init.previousTop is designed to determine if you are scrolling up or down. This is done by comparing the current .scrollTop position from that of the previous scroll event.

（2）如果向上滚动，则将标题置于窗口顶部以便可见。

(2) If you scroll up, you position the header to the top of the window so it is visible.

（3）当您向下滚动时，您将离开顶部由于标题是绝对定位的
，它只需滚动屏幕顶部和内容。

(3) When you scroll down, you leave the top offset as is and since the header is absolutely positioned, it simply scroll off the top of the screen along with the content.

（4）有一个最大滚动位置附近的有趣案例。如果没有
足够的滚动位置将标题移出屏幕，请将顶部偏移设置为0到
将其移开。

(4) There is an interesting case near the maximum scroll position. In case there is not enough scroll position left to move the header off the screen, set the top offset to 0 to move it out of the way.

这篇关于使标题行为像谷歌浏览器移动应用程序地址栏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！