1

これはかなり抽象的な概念のように思えるかもしれませんが、できる限り説明しようと思います。

Div は、ウィンドウのスクロールに応じて、固定から絶対への相対位置から移動します。この機能とは別の機能ですが、それはコンテキストのためだけです。

これで、サイトがレスポンシブになり、固定位置の div を含め、ウィンドウのサイズが変更されたときにコンテンツがリフローするようになりました。しかし、ここでこの機能を試した後、私は間違ったアプローチをとっていることに気付きました.

    $(document).ready(function () {

    var sidebarwidth = $(".sidebarholder").width();
        controlwidth = $(".loop-contain").outerWidth();
        innerwidth = $(".front-contain").outerWidth();
        //get side-contain width dynamically    
        //derivative variable   
            sidecon = (controlwidth - innerwidth);



    $(window).on('resize', function(){
         $('.side-contain').css({
            position: "fixed",
            left: sidebarwidth + innerwidth,
            top: "50px",
            width: sidecon - "24"

        });
        console.log (sidecon);
    });
});

ページの読み込み時に変数を計算するだけなので、コンテンツはリフローしないと思います。

ページのサイズが変更されたときに、固定位置のdivをサイズと位置の両方でリフローさせる方法はありますか? 私はこれについてウェブを深く掘り下げてきましたが、何も思いつきません。そして奇妙なことに、変数が変化しているという事実にもかかわらず、ページのサイズが何度も変更されても、console.log は初期幅としてサイドコン幅を示します。ページのサイズを変更していて、controlwdith と innerwidth が変更されている場合、.side-contain の位置を変更すべきではありませんか?

4

1 に答える 1

1

resizeイベント内のすべての次元計算を移動:

$(document).ready(function () {

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

    var sidebarwidth = $(".sidebarholder").width();
        controlwidth = $(".loop-contain").outerWidth();
        innerwidth = $(".front-contain").outerWidth();
        //get side-contain width dynamically    
        //derivative variable   
        sidecon = (controlwidth - innerwidth);


     $('.side-contain').css({
        position: "fixed",
        left: sidebarwidth + innerwidth,
        top: "50px",
        width: sidecon - "24"

    });
    console.log (sidecon);
});

});

于 2013-11-12T08:47:14.193 に答える