0

だから私はこの機能を持っています、それはかなり長くて複雑です。

これで、ウィンドウの幅が変更された場合に機能するようになりましたが、最初にスクロール イベントを発生させる必要があります。

ウィンドウのサイズ変更を機能させるにはどうすればよいですか?

       $(document).bind("scroll.myScroll", function () {

    var scrollTop = $(document).scrollTop();
        masthead = $(".mast-head").outerHeight();
        notef = $(".note-f").outerHeight();
        frontcontainheight = $(".center").outerHeight();
        //derivative variable
            abpos = (frontcontainheight / 2.1);

        sidebarwidth = $(".sidebarholder").width();
        dataheight = $(".data-top").outerHeight(true);

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

        elem = $(".center");
        paddingTopBottom = elem.innerHeight() - elem.height();


        console.log (controlwidth);

            if ($(window).width() > 1200) {
                if (scrollTop > notef + dataheight + masthead - 50 + paddingTopBottom) {
                    $('.side-contain').css({
                        position: "fixed",
                        left: sidebarwidth + innerwidth,
                        top: "50px",
                        width: sidecon - "24"

                    });

                }
                if (scrollTop < notef + dataheight + masthead - 50 + paddingTopBottom) {
                    $('.side-contain').css({
                    position: "relative",
                    left: "",
                    top: "",
                    width: ""
                    });

                }
                if (scrollTop > abpos + masthead - 50 + paddingTopBottom) {
                    $('.side-contain').css({
                    position: "absolute",
                    left: innerwidth,
                    top: abpos - notef, // if the scroll is more than half the height of front-contain then lock to that position, ie. the amount scroll of front-contain - 63px.

                    width: sidecon - "24"

                    });

                }


            } else if ($(window).width() < 1200) {
                  $('.side-contain').css({
                    position: "relative",
                    left: "",
                    top: "",
                    width: ""
                    });

            }


});
4

2 に答える 2

0

何かのようなもの：

 $(window).on("resize", function () {
      $.trigger('scroll.myScroll');
  }).trigger("resize");
于 2013-11-11T04:54:58.340 に答える
0

可能であれば、サイズ変更イベントではなく、レスポンシブ グリッドを使用する必要があります。@media クエリと選択的なスタイルが最適です。 http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries

ここで何をしようとしているのか正確にはわかりませんが、スクロール位置などを確認するたびに、UI スレッドに位置の再評価を強制しています。これは高価です。何かを特定の高さでスクロールする必要がある場合は、UI スレッドをロックしないように、少なくともスクロール深度チェックをタイムアウトに設定してください。現在、サイズ変更時にピクセルが変更されるたびに、あらゆる種類の高さなどをチェックしています。そこに少しの遅延 (少なくとも 15 ミリ秒) を入れて、「この要素はどこにあるのか、その要素はどこにあるのか?!?!?!」とつぶやく間、UI スレッドを呼吸させます。

さらに、.css を複数回ヒットしています。これらの変更をオブジェクトに入れてみませんか? .css({ "background-color": "#ffe", "border-left": "5px solid #ccc" }). http://api.jquery.com/css/#css-properties

それとは別に、「サイズ変更」イベントがそれを行う必要があります...上記を参照してください

于 2013-11-11T05:06:07.787 に答える