在部分完成後錨定圖像向上移動

Question

我有一個腳本，可以讓圖像在屏幕左側的副本上滾動時留在屏幕上。我需要代碼的幫助，使圖像在左側副本結束後停止「錨定」，以便它不覆蓋頁面上其餘內容。

這裏的鏈接代碼&頁：

http://jsfiddle.net/TheeAndre/yQKEH/5/

$(function() { 
    var blogphotos = $('#blogphotos').offset().top; 
    $(window).scroll(function() { 
     if ($(window).scrollTop() > blogphotos) { 
      $('#blogphotos').addClass("sticky"); 
     } else { 
      $('#blogphotos').removeClass("sticky"); 
     } 
    }); 
}); 

Answer 1

添加CSS：

.two_third { 
    position: initial; 
} 
.sticky.stop { 
    position: absolute; 
} 

添加ID到表（告訴JS何時停止滾動）：

<div class="one_full"> 
    <table width="800" border="0" cellspacing="0" cellpadding="0" id="stopScroll"> 

更改滾動功能：當你向後滾動向上和向下

$(window).scroll(function() { 
    var winScroll = $(window).scrollTop(); 
    var stopScroll = $('#stopScroll').offset().top - $('#blogphotos').height(); 
    $('#blogphotos').removeClass("sticky stop"); 

    if (winScroll > blogphotos) { 
     $('#blogphotos').addClass("sticky"); 
    } 
    else { 
     $('#blogphotos').removeClass("sticky"); 
    } 

    if (winScroll > stopScroll) { 
     $('#blogphotos').addClass("stop").css('top', stopScroll); 
    } 
    else { 
     $('#blogphotos').removeClass("stop").css('top', 0); 
    } 
}); 

http://jsfiddle.net/samliew/yQKEH/11