Question

所以我有这个功能，它很长很复杂。

现在，如果窗口宽度发生变化，我可以正常工作，但滚动事件需要先触发。

如何让它在窗口大小调整上工作？

       $(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: ""
                    });

            }


});

Answer 1

类似的东西：

 $(window).on("resize", function () {
      $.trigger('scroll.myScroll');
  }).trigger("resize");

Answer 2

如果可能，您可能应该使用响应式网格而不是resize事件。 @media查询和选择性样式是要走的路。 http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries

我不知道你在这里想要做什么，但每次检查滚动位置等都会迫使ui线程重新评估定位。这很贵。如果你需要在某个高度滚动某些东西，那么至少要确保你将滚动深度检查设置为超时，这样你就不会锁定UI线程。现在，对于调整大小的每个像素更改，您正在检查各种高度和诸如此类的东西。在那里放一点延迟（至少15ms）让UI线程呼吸，同时你用“这个元素在哪里，哪个元素在哪里？”来打击它？！？！？！

此外，你多次击中.css。为什么不将这些更改放入对象中？ .css（{“background-color”：“＃if”，“border-left”：“5px solid #ccc”}）。 http://api.jquery.com/css/#css-properties

除此之外，“调整大小”事件应该为你做...见上文

窗口大小如何在jquery中工作？

2 个答案: