定位固定 div，向上滚动时定位绝对，向下滚动时：谷歌现在搜索栏类型行为

Question

我正在尝试创建一个与谷歌现在的搜索栏控件非常相似的 div 行为。

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

现在我想出了一个非常粗略/丑陋的例子来说明我试图实现的目标并且它有点工作，但我确信总体上有更好的方法。

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/en-US/docs/Web/API/Element.getBoundingClientRect

视口区域（或 任何其他可滚动元素）在计算 边界矩形。这意味着 top 和 left 属性发生了变化 一旦滚动位置发生变化，它们的值（所以它们的 值是相对于视口而不是绝对的）。如果这不是 所需的行为只需将当前滚动位置添加到 top 和 left 属性（通过 window.scrollX 和 window.scrollY）来获取 与当前滚动位置无关的常量值。