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 回答