滚动条返回firefox

我创建了一个粘性侧边栏功能，可以在Chrome和Safari浏览器中完美工作，但不能在Firefox中使用。从我可以告诉它不应该正确返回时，应该是。滚动条返回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 - 然而，这似乎工作好了，还有别的东西干扰页面上。我不期望任何人解决它，但可能会有一些建议。我现在无法链接到实时页面。

来源

2016-01-25 evu

很难说没有一个可以显示HTML的plunkr或jsbin例子。但是'position：fixed'有什么问题？ –

当不击中页面的顶部/底部时，它必须粘住。否则，它应该是相对顶部，绝对定位底部。 – evu

似乎Firefox并没有正确地进行计算。将+ 20px添加到底部填充计算似乎可以修复它。

来源

2016-01-25 12:58:51 evu

滚动条返回firefox

回答

相关问题