在滾動到一定程度後修正右列頂部

Question

我想修正「#rightPanelscrl」的位置，當我看到它的最後部分時。我正在使用下面的代碼，它在FF中正確運行，並且根本沒有在Chrome中工作..任何人都可以請我..！

var sidebarScrollTop = 0; 

$(window).load(function() { 
    sidebarScrollTop = $("#rightPanelscrl").offset(); 
    if ($("#rightPanelscrl").height() > 500) { 
     alert($("#rightPanelscrl").height()); 
     $(window).scroll(function() { 

      var docScrollTop = $('body,html').scrollTop(); 
      // alert(docScrollTop); 
      if (docScrollTop > 500) { 
       $("#rightPanelscrl").css({ position: 'fixed', top: '-500px' }); 
      } 
      else { 
       $("#rightPanelscrl").css({ position: 'static' }); 
      } 
     }); 
    } 
    else if ($("#rightPanelscrl").height() < 500) { 
     $("#rightPanelscrl").css({ position: 'fixed', top: '35px' }); 
    } 

}); 

$(window).resize(function() { 
    sidebarScrollTop = $("#rightPanelscrl").offset().top; 
}); 

$(document).resize(function() { 
    sidebarScrollTop = $("#rightPanelscrl").offset().top; 
}); 

Answer 1

我更喜歡在滾動的某個位置添加一個CSS類，而不是使用jQuery來修改定位。它使代碼更簡單！ Check this out。

從本質上講，你有你的#rightPanelscrl

<ul id="rightPanelscrl"> 
    <li><a href="#">one</a></li> 
    <li><a href="#">two</a></li> 
    <li><a href="#">three</a></li> 
    <li><a href="#">four</a></li> 
    <li><a href="#">five</a></li> 
</ul>​ 

你的CSS：

body {height: 2000px;}  
#rightPanelscrl { 
    position:absolute; 
    top:140px; 
    z-index:4; 
    width:100%; 
}  
#rightPanelscrl.fixed { 
    position:fixed; 
    top:0px; 
} 
​ 

和你的jQuery：

$(document).ready(function() { 
    var theLoc = $('#rightPanelscrl').position().top; 
    $(window).scroll(function() { 
     if(theLoc >= $(window).scrollTop()) { 
      if($('#rightPanelscrl').hasClass('fixed')) { 
       $('#rightPanelscrl').removeClass('fixed'); 
      } 
     } else { 
      if(!$('#rightPanelscrl').hasClass('fixed')) { 
       $('#rightPanelscrl').addClass('fixed'); 
      } 
     } 
    }); 
});