位置固定div，当向上滚动和位置绝对，当向下滚动：google现在搜索栏类型行为

我想创建一个div的行为非常类似于google现在的搜索栏控件。

Im trying to create a div behavior very similar to google now's search bar control.

当页面加载时，你得到一个位于特定位置的div，当您开始向下滚动div将保持在其相对/绝对位置（与滚动一起滑动，直到它消失）。一旦你开始向上滚动（或向上翻页），div将从顶部（与内容一起）滑入，直到它到达固定位置并停留在那里。

When the page loads initially, you get a div located in a specific position, as you start scrolling down the div will remain in its relative/absolute position(slide along with the scroll until it disappears). Once you start scrolling up (or page up) the div would slide in from the top(along with the content) until it reaches its fixed position and stay there.

现在我想出了一个非常粗糙/丑陋的例子，我想实现和它的作品，但我肯定有一个更好的方法一般来说。

Now Ive come up with a very crude/ugly example of what Im trying to achieve and it sort of works, but Im sure there's a far better approach in general to this.

http://jsfiddle.net/9654gd6c/ 3 /

var lastScrollTop = 0,
    scrH = 40,
    marginTop = 40,
    ch = {};
$(window).scroll(function (event) {
    var st = $(this).scrollTop();

    var elements = $('#scroller');

    if (st > lastScrollTop) {
        elements.css({
            'position': 'absolute'
        });
        ch.dir = 'down';

    } else {

        if (ch.dir === 'down') ch.at = lastScrollTop;
        if (ch.at - st - marginTop > scrH) {
            elements.css({
                'position': 'absolute',
                    'top': st + marginTop
            });
        } else {
            elements.css({
                'position': 'absolute',
                    'top': ch.at - scrH
            });
        }
        ch.dir = 'up';

    }
    lastScrollTop = st;
});

哦，并且删除样式按钮应该作为立即显示div按钮，固定的地方。非常感谢您的帮助

oh and the remove style button should act as immediate show div button, that brings back the div to its fixed place. Thanks for your help in advance

更新2 ：感谢David Karam这里的一个例子，不切换位置

http://jsfiddle.net/rmx50du5/2/

Update 2: Thanks to David Karam here's an example without switching the position
http://jsfiddle.net/rmx50du5/2/