Question

我有一个页面，在内容区域中生成动态行数。每行有两列：侧块和内容区域。这个想法是在页面向下滚动时让侧块粘住，直到出现下一个块并将块推到上面并变成粘性。 html结构如下：

<div class="container">
    <div class="row">
        <div class="col-md-4 sticky">
            <h2>Example</h2>
            <p class="page-side-block">...</p>
            <a href="#" class="action-button">...</a>
        </div>
        <div class="col-md-8 col-md-offset-4">
            <p>...</p>
        </div>
    </div>
    ...
    <div class="row">
        <div class="col-md-4 sticky">
            <h2>Example</h2>
            <p class="page-side-block">...</p>
            <a href="#" class="action-button">...</a>
        </div>
        <div class="col-md-8 col-md-offset-4">
            <p>...</p>
        </div>
    </div>
</div>

我设法让第一个块坚持下去，但我真的不知道如何修复上述功能。任何有关此事的帮助将不胜感激。

我将在下面添加javascript（使用mootools）。我知道这不会使用上面提供的html，因为我已经编辑过它来显示语义而不是实际的标记。

window.onscroll = function() {
    var stickyBlock = $('sticky-block');
    if (window.getScroll().y > 235) {
        stickyBlock.setStyles({
            position: 'fixed',
            top: '100px',
            width: "350px"
        });
    } else if (window.getScroll().y < 235) {
       stickyBlock.setStyles({
            position: 'absolute',
            top: 0,
            width: null
       });
    }
}

我知道在新的w3c规范中已经为position: sticky;属性做了定义。这将使javascript完全不必要，但到目前为止，浏览器对它的支持非常糟糕，如here所示。

如果有人能帮助我，那将是非常棒的;）

Answer 1

这里有点深夜，但给你一个建议。

如果捕获所有位置并听取滚动，则可以迭代初始位置并将其与滚动进行比较，并在需要时修复元素。

在我的示例中，我使用.pin() you can find in MooTools More，只是为了不重新发明轮子。

示例：http://jsfiddle.net/2AZ28/

MooTools的：

var stickyBlock = $$('.sticky').map(function(st){
    return {
        el: st,
        pos: st.getPosition().y,
        height: st.getHeight()
    };
});
window.addEvent('scroll', function(){
    var currentScroll = window.getScroll().y;
    stickyBlock.each(function (st, i) {
        if (st.pos <= currentScroll){
            st.el.pin();
            if (stickyBlock[i + 1] && (stickyBlock[i + 1].pos - st.height <= currentScroll)) st.el.setStyle('top', stickyBlock[i + 1].pos - st.height - currentScroll);
        } else {
            st.el.unpin();
        }
    });
})

也许可以更优化，但希望这有助于你的问题。

动态页面中的多个粘性边块

1 个答案:

示例：http://jsfiddle.net/2AZ28/