返回滚动火狐

Question

我创建了一个粘性侧边栏功能，该功能在 chrome 和 safari 中完美运行，但在 Firefox 中不适用。据我所知，它没有正常返回。

考虑有问题的代码的 sn-p：

            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 似乎可以解决它。