固定位置div，向上滾動時，絕對位置，向下滾動時：google now搜索欄類型行為

Question

我試圖創建一個非常類似於google現在的搜索欄控件的div行為。

最初加載頁面時，您會在特定位置找到一個div，當您開始向下滾動時，該div將保持在其相對/絕對位置（與滾動一起滑動，直到消失）。 一旦開始向上滾動（或向上翻頁），div將從頂部（以及內容）滑入，直到到達其固定位置並停留在該位置。

現在，我已經提出了一個非常粗糙/丑陋的示例，說明了Im試圖實現的目標以及它的工作方式，但是Im確信總體上可以找到一種更好的方法。

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按鈕，將div返回到其固定位置。 謝謝您的幫助

更新2 ：感謝David Karam，這是一個無需切換位置的示例
http://jsfiddle.net/rmx50du5/2/

Answer 1

實現的最大缺點是您在固定位置和絕對位置之間切換。 這意味着您無法使用CSS動畫，它在您的示例中非常有用。

這是一個具有相對位置的修改版本，允許使用過渡（我使用不透明度，但是您可能想在頂部過渡，這將需要幾條額外的線來抵消滾動）

http://jsfiddle.net/o16bebtu/

這是通過將位置設為相對位置，然后利用考慮滾動位置的getBoundingClientRect來實現所需功能的一種更整潔的方法。

var nodeScrollTop= ((Math.ceil(rect.top))|0);
var nodeTop= (!!(_node.style.top)) ? parseInt(_node.style.top) : 0;
var newNodeTop= nodeTop - nodeScrollTop;

從MDN， https：//developer.mozilla.org/zh-CN/docs/Web/API/Element.getBoundingClientRect

在計算邊界矩形時，應考慮到視口區域（或任何其他可滾動元素）已完成的滾動量。 這意味着top和left屬性會在滾動位置更改后立即更改其值（因此，它們的值是相對於視口而不是絕對的）。 如果這不是所需的行為，則只需將當前滾動位置添加到top和left屬性中（通過window.scrollX和window.scrollY）即可獲得獨立於當前滾動位置的常數值。