1

Twitterのブートストラップ変更接辞オフセットが役立つ場合があります。おそらく彼は基本的に同じ問題を抱えていて、私の問題の解決策を投稿しましたが、残念ながら私はそれを機能させることができませんでした。

これがBootstrapAffixプラグインページです（このプラグインを使用するよりも別の/より良い方法を知っているなら、私はすべての耳です---このプラグインは必要ありません）：http ：//twitter.github.com/bootstrap/javascript.html#接辞

http://jsfiddle.net/rPsK8/1

これが私の問題を示すのに役立つフィドルです...しかし、何らかの理由でBootstrapAffixに何もさせることができませんでした。：|

$(function () {
  $('#contentbody-toolbar').addClass("affix-top").each(function (){
    var $self = $(this);
    if ($("#advanced-total-outer").is(":visible")) {
    var offsetFn = function () {
        var $p = $('#advanced-total-outer').outerHeight();
        var h = 175 + $p;
        return h;
    }
    $self.affix({offset: {top: offsetFn}});
 } else {
    var offsetFn = function () {
        var h = 175;
        return h;
    }
    $self.affix({offset: {top: offsetFn}});
}
  });
});

編集：私は上記のコードを次のように簡略化しました（同じことをする必要があります）：

$(function () {
  $('#contentbody-toolbar').addClass("affix-top").each(function (){
    var $self = $(this);
     var offsetFn = function () {
        var $p = $('.wrapper.clearfix.no-bord').outerHeight();
        var h = 175 + $p;
        return h;
    $self.affix({offset: {top: offsetFn}});
};
  });
});

とにかく、それが私のページの基本的な設定方法であり、下にスクロールしてナビゲーションバー（＃contentbody-toolbar）がウィンドウの上部にあると、それが修正されます。さて、問題は、ご覧のとおり、非表示にできないdivが非表示になっていることです。そのため、その要素が何らかの形で非表示になっていない場合は、オフセットを更新する必要があります。

ユーザーが希望する場合は、ヘッダーのサイズ（高さ）も変更できるため、ヘッダーもそのために更新する必要があります。上に投稿したコードは私には論理的であり、オフセットの変更を認識するという意味で「機能」しているように見えますが、それが理にかなっている場合、affixプラグインはDOMの変更を更新しないようです。175pxスクロールすると常に修正されます。

私はこれを何日も機能させようとしてきましたが、正直言ってイライラしています。私は本当にこれについてどうやって行くのか分かりません。質問をするときのStackoverflowのサイドバーは、私が望むように機能しているようですが、moveScrollerのスクリプトが見つかりません。

提供された助けに感謝します。

4

1 に答える 1

1

だから、私はそこに私が望んでいたようにstackoverflowの作品に気づいた/言及しました...まあ、私はJosh Leeのおかげでそれのコードを探して見つけました@それがスクロールされたら画面の上部にdivを貼り付けるにはどうすればよいですか？ ？

彼がリストしたほぼ同じコードを使用しました：

function moveScroller() {
    var move = function() {
        var st = $(window).scrollTop();
        var ot = $("#scroller-anchor").offset().top;
        var s = $("#scroller");
        if(st > ot) {
            s.css({
                position: "fixed",
                top: "0px",
                width: "61%"
            });
        } else {
            if(st <= ot) {
                s.css({
                    position: "relative",
                    top: "",
                    width: "auto"
                });
            }
        }
    };
    $(window).scroll(move);
    move();
}

<script type="text/javascript"> 
  $(function() {
    moveScroller();
  });
</script>
于 2013-03-02T19:20:17.550 に答える