在div滾動停止處固定側邊欄

Question

我試圖確保div「過濾器」在滾動時變得固定，然後在歸結爲「outside_footer_wrapper」時停止。使用下面的腳本，但不能讓它工作？

jsfiddle

$(function() { 
     var top = $('#filter').offset().top - parseFloat($('#filter').css('marginTop').replace(/auto/, 0)); 
     var footTop = $('#outside_footer_wrapper').offset().top - parseFloat($('#outside_footer_wrapper').css('marginTop').replace(/auto/, 0)); 

     var maxY = footTop - $('#filter').outerHeight(); 

     $(window).scroll(function(evt) { 
      var y = $(this).scrollTop(); 
      if (y > top) { 
       if (y < maxY) { 
        $('#filter').addClass('fixed').removeAttr('style'); 
       } else { 
        $('#filter').removeClass('fixed').css({ 
         position: 'absolute', 
         top: (maxY - top) + 'px' 
        }); 
       } 
      } else { 
       $('#filter').removeClass('fixed'); 
      } 
     }); 
    }); 

Answer 1

如果你想停止position:fixed你達到你可以做這樣的事情僞造與top頁腳後：

$(function() { 
    var top = $('#filter').offset().top, 
     footTop = $('#outside_footer_wrapper').offset().top, 
     maxY = footTop - $('#filter').outerHeight(); 
    $(window).scroll(function(evt) { 
     var y = $(this).scrollTop(); 
     if (y > top) { 
      $('#filter').addClass('fixed').removeAttr('style'); 
      if (y > maxY-20){ 
      var min = y - maxY + 20; 
      $('#filter').css('top','-'+min+'px'); 
      } 
     } else { 
      $('#filter').removeClass('fixed'); 
     } 
    }); 
}); 

也可參加護理與CSS的類fixed你需要與#filter平等特異性我做了這個變化：

#sidebar #filter.fixed /*Add #sidebar*/ 

入住這Demo Fiddle

Answer 2

，如果你知道在哪個像素數過濾器已被固定，並在其像素數頁腳開始，你可以試試這個功能：

scrollTop

Answer 3

是這樣的嗎？

jsfiddle

// get box div position 
var box = document.getElementById('box').offsetTop; 

window.onscroll = function(){ 

    // get current scroll position 
    var scroll_top = document.body.scrollTop || document.documentElement.scrollTop; 

    document.getElementById('scbox').innerText = scroll_top + ' ' + box; 

    // if current scroll position >= box div position then box position fixed 
    if(scroll_top >= box) 
     document.getElementById('box').style.position = 'fixed'; 
    else 
     document.getElementById('box').style.position = 'relative'; 


} 

Answer 4

試試這個：

#sidebar { 
position: fixed; 
} 

jsfiddle here