2

我有一个sticked元素，它top从当前的-offset 中获得-alignment scroll。问题是，如果布局中的空间是空闲的，则布局不会“重新触发” 。所以在粘贴元素的地方留下了一个幽灵-gap......

http://fiddle.jshell.net/pPc4V/

标记非常简单：

<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>
<a href="#" class="sticked"></a>
<a href="#"></a>
...

以及js：

var $win = $(this);
var sticked = document.querySelector('a.sticked');

$win.on('scroll', function () {
    var scrollTop = $win.scrollTop();
    sticked.style.top = scrollTop + 'px';

    // $win.resize();
});

...到目前为止，css 看起来不错：

a {
    display: inline-block;
    width: 90px;
    height: 90px;
    background: deepskyblue;
}

.sticked {
    position: relative;
    top: 0;
    left: 0;
    background: tomato;
}

我试图resize在滚动时触发 -event（如您在上面看到的未注释），但没有成功！任何想法，如何重新触发布局，以便用下一个浮动元素填充自由间隙？

更新

为了澄清我的意思，我制作了一个简单的图像时间线：

步骤1 步骤1

第2步 第2步

第 3 步 第 3 步

4

1 回答 1

1

问题是您正在将位置固定在一个内联显示的元素上。这将导致该空间出现。我已经用正确的对齐方式重做了你的 jsFiddle。

为了解决这个问题，我仅在文档的 scrollTop 位置大于目标元素的 scrollTop 位置时才添加“stuck”类。

jsFiddle：http ://fiddle.jshell.net/pPc4V/44/

HMTL：

<div id="grid"> 
     <a href="#"></a>
     <a href="#"></a>
     etc...
</div>

CSS：

#grid {
    height:1000px;
    overflow:hidden;
    float:left
}
#grid > a {
    display: inline-block;
    width: 90px;
    height: 90px;
    background: deepskyblue;
}
.stuck {
    position: fixed;
    background: navy !important;

}

JS：

    $(window).on('scroll', function () {

        var $doc = $(document),
            parentElement = $('#grid'),
            childToGetStuck = parentElement.find('a:nth-child(5)');

        if ($doc.scrollTop() > childToGetStuck.scrollTop()) {
            childToGetStuck.addClass('stuck');
            //console.log($('.stuck').scrollTop())
        } else {
            childToGetStuck.removeClass('stuck');
        }

    });
于 2013-07-08T02:30:42.817 回答