Question

我创建了一个粘性边栏功能，可以在Chrome和Safari中完美运行，但在Firefox中则无法运行。从我可以告诉它应该没有正确返回。

考虑一下有问题的代码片段：

            if (scrolling_down && bottom_offset <= bottom_padding) {
                $item.css({
                    position: 'absolute',
                    top: 'auto',
                    bottom: bottom_padding
                });

                console.log(1);

                return false;

                console.log(2);
            }

            console.log(3);

Chrome中的控制台会记录3，直到它到达页面底部，然后记录1以进行剩余的滚动。

然而，在Firefox中，控制台会记录3，直到它到达底部，然后在3和1之间交替显示。

我很确定它应该忽略3（因为return false）一旦它触及谷底，就像Chrome一样。

完整的Javascript：

    // Sticky Sidebars
    stickyAsides: function() {
        var $item = $('.js-sticky'),
            $parent = $item.parent(),

            last_scroll = 0,
            scrolling_down = false;

        function setStyles() {
            $item.css({
                width: $item.outerWidth()
            });
        }

        function stick() {
            var parent_rect = $parent.get(0).getBoundingClientRect(),
                parent_top = parent_rect.top,
                parent_bottom = parent_rect.bottom,

                item_rect = $item.get(0).getBoundingClientRect(),
                item_top = item_rect.top,
                item_bottom = item_rect.bottom,

                bottom_offset = parent_bottom - item_bottom,
                bottom_padding = parseInt($parent.css('padding-bottom'));

            scrolling_down = (last_scroll < w.scroll) ? true : false;

            setStyles();

            if (scrolling_down && bottom_offset <= bottom_padding) {
                $item.css({
                    position: 'absolute',
                    top: 'auto',
                    bottom: bottom_padding
                });

                console.log(1);

                return false;

                console.log(2);
            }

            console.log(3);

            if (item_top <= -10 || parent_top <= 0) {
                $item.css({
                    position: 'fixed',
                    top: '0',
                    bottom: 'auto'
                });
            }

            if (!scrolling_down && parent_top > 0) {
                $item.css({
                    position: 'relative',
                    top: '0',
                    bottom: 'auto'
                });
            }

            last_scroll = w.scroll;

        }

        $(window).on('scroll', function(){
            w.scroll = $doc.scrollTop();

            if (Modernizr.mq('(min-width: 1024px)') && Modernizr.flexbox) {
                stick();
            }
        });
    }, // End stickyAsides()

编辑：Codepen示例：http://codepen.io/jhealey5/pen/JGLjPN - 但是这似乎工作正常，因此页面上还有其他干扰。我不希望任何人解决它，但可能会有一些建议。我此时无法链接到实时网页。

Answer 1

似乎Firefox没有正确进行计算。在底部填充计算中添加+ 20px似乎可以解决它。

滚动firefox返回

1 个答案: