2

現在の-offsetから -alignmentを取得するsticked要素があります。問題は、レイアウトからのスペースが空いている場合、レイアウトが「再トリガー」されないことです。そのため、貼り付けられた要素があった場所にゴーストギャップが残ります...topscroll

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;
}

スクロール時に -event をトリガーしようとしましたresize(上記のコメントを外したように) が、成功しませんでした! フリーギャップが次のフローティング要素で埋められるようにレイアウトを再トリガーする方法はありますか?

アップデート

私が何を意味するのかを明確にするために、私は単純な画像タイムライムを作成しました:

ステップ1 ステップ1

ステップ2 ステップ2

ステップ 3 ステップ 3

4

1 に答える 1

1

問題は、インラインで表示される要素に固定された位置を設定していることです。それによって、そのスペースが発生します。私はあなたの jsFiddle を適切な配置で作り直しました。

それを修正するために、ドキュメントの scrollTop の位置がターゲット要素の scrollTop の位置より大きい場合にのみ、クラス「stuck」を追加しました。

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

HTML:

<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 に答える