在元素高度旁邊滾動圖像

Question

我正在嘗試實現top屬性增加，以關於它當前所在的元素。該元素只需滾動到元素旁邊，並在元素高度傳遞時停止。

我想要達到的效果：圖片需要粘貼在jQuery右邊的元素旁邊，並停在元素的末尾。

var objectSelect = $(".article"); 
 
var objectPosition = objectSelect.offset().top; 
 

 
//if (scroll > objectPosition) { 
 
// objectSelect.find('article').addClass("fixable").find('figure').addClass("fixable"); 
 
//} else { 
 
// objectSelect.find('article').removeClass("fixable").find('figure').removeClass("fixable"); 
 
//}

body{ 
 
    
 
    height:1000px; 
 
    
 
    } 
 

 
.article { 
 
    width: 100%; 
 
    display: block; 
 
} 
 
.wrapper { 
 
    position: relative; 
 
} 
 
figure { 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0; 
 
    width: 50%; 
 
    padding: 0; 
 
    margin: 0; 
 
    overflow: hidden; 
 
} 
 
.other-content { 
 
    background-color: black; 
 
    float: right; 
 
    overflow: hidden; 
 
    display: block; 
 
    width: 50%; 
 
    height: 800px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="article"> 
 
    <div class="wrapper"> 
 
    <figure> 
 
     <img src="https://placeholdit.imgix.net/~text?txtsize=53&txt=566%C3%97780&w=566&h=500" /> 
 
    </figure> 
 
    <div class="other-content"> 
 

 
    </div> 
 
    </div> 
 
</div>

Answer 1

可以使固定figure元素，直到它的底部達到.other-content底部，然後使它絕對定位bottom: 0，然後刪除當你滾動備份絕對定位過去figure元素的頂部。

var $figure = $('figure'), 
 
    $other = $('.other-content'), 
 
    other_bottom = $other.offset().top + $other.outerHeight(); 
 

 
$(window).on('scroll', function() { 
 
    var scroll = $(window).scrollTop(), 
 
    figure_top = $figure.offset().top, 
 
    figure_bottom = $figure.offset().top + $figure.outerHeight(); 
 
    if (!$figure.hasClass('abs') && figure_bottom >= other_bottom) { 
 
    $figure.addClass('abs'); 
 
    } 
 
    if ($figure.hasClass('abs') && scroll < figure_top) { 
 
    $figure.removeClass('abs'); 
 
    } 
 
});

body { 
 
    height: 500vh; 
 
    margin: 0; 
 
} 
 

 
.article { 
 
    width: 100%; 
 
    display: block; 
 
} 
 

 
.wrapper { 
 
    position: relative; 
 
    overflow: auto; 
 
} 
 

 
figure { 
 
    position: fixed; 
 
    left: 0; 
 
    top: 0; 
 
    width: 50%; 
 
    padding: 0; 
 
    margin: 0; 
 
    overflow: hidden; 
 
} 
 

 
.abs { 
 
    position: absolute; 
 
    bottom: 0; 
 
    top: auto; 
 
} 
 

 
.other-content { 
 
    background-color: black; 
 
    float: right; 
 
    overflow: hidden; 
 
    display: block; 
 
    width: 50%; 
 
    height: 800px; 
 
} 
 

 
img { 
 
    display: block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="article"> 
 
    <div class="wrapper"> 
 
    <figure> 
 
     <img src="https://placeholdit.imgix.net/~text?txtsize=53&txt=566%C3%97780&w=566&h=500" /> 
 
    </figure> 
 
    <div class="other-content"> 
 
    </div> 
 
    </div> 
 
</div>