Прокрутить изображение рядом с высотой элемента

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>