在部分完成后锚定图像向上移动

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