Question

我试图创建一个非常类似于google now的搜索栏控件的div行为。

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

现在我想出了一个非常粗糙/丑陋的例子，说明我想要实现的目标，但它确实有一个更好的方法。

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

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

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

1 个答案: