調整保證金調整滯後頂部位置固定側邊欄滾動到底部

Question

我想修復左側邊欄上的響應視圖。

我使用Margin top（依靠滾動位置）進行側邊欄的包裝！ 這是工作！但在一些瀏覽器，它是緩慢的運動（例如：MacBook Pro的視網膜15" 2014 Chrome版本42）

jsfiddle

jQuery(function($){ 
    var target = $('#fixed_sidebar .fixed'); 
    var sidebarPosition = $(target).offset().top; 

    function calculatesidebar(){ 
     var heightWindow = $(window).height(); 
     var scrollPosition = $(document).scrollTop(); 
     var sidebarHeight = target.outerHeight(); 
     var positionOftarget = (sidebarPosition + sidebarHeight) - heightWindow; 
     var targetMargin = parseInt(target.css('marginTop')); 


     if (scrollPosition >= positionOftarget){ 
      var margin = scrollPosition - positionOftarget; 
      target.css('marginTop', margin+'px'); 

     }else{ 
      target.css('marginTop', '0'); 
     } 

    } 

    $(window).scroll(function(){ 
     calculatesidebar(); 
    }); 
    $(window).resize(function() { 
     calculatesidebar(); 
    }); 

}); 

Answer 1

我在快樂其他方式

jsfiddle

jQuery(function ($) { 


    function fixed_sidebar_bottom(wrapper, target) { 
     var left = $(wrapper).offset().left, 
      right = $(wrapper).offset().right, 
      top = $(wrapper).offset().top, 
      width = $(wrapper).width(), 
      target = $(target), 
      targetHeight = target.outerHeight(), 
      scrollPosition = $(document).scrollTop(), 
      windowHeight = $(window).height(), 
      windowWidth = $(window).width(), 
      hotSpot = (top + targetHeight) - windowHeight; 


      if (scrollPosition >= hotSpot) { 

       if (!target.attr('style')) { 
        target.css({'left': left, 'right': right, 'position': 'fixed', 'bottom': '0', 'width': width}); 
       } else { 
        target.css({'left': left, 'right': right, 'width': width}); 
       } 
      } else { 
       target.removeAttr("style"); 
      } 
     } 





    $(window).scroll(function() { 
     fixed_sidebar_bottom('#fixed_sidebarLeft','#fixed_sidebarLeft_target');  
    }); 

    $(window).resize(function() { 
     fixed_sidebar_bottom('#fixed_sidebarLeft','#fixed_sidebarLeft_target'); 
    }); 
}); 

解決