Исправить элемент при прокрутке через родительский DIV

Question

Я хочу исправить «значок, чтобы исправить» div с правой стороны, если он находится, например, в середине представления. Но он должен быть зафиксирован только до тех пор, пока вид не достигнет конца красной рамки.

В данный момент я использую Bootstrap и jQuery - Как бы вы это решили?

Answer 1

Я посмотрел фотографию, которую вы опубликовали, и создал эту демонстрацию на jsBin, которая выглядит аналогично. Не должно быть необходимости для всего плагина. JQuery и некоторые CSS должны позаботиться об этом.

http://jsbin.com/libatajure/edit?css,js,output

Мясо код здесь:

// Check if element totally above or totally below viewport 
if (top + height - followHeight < pos || top > pos + window_height) { 
    return; 
} 

var offset = parseInt($(window).scrollTop() - top); 

if (offset > 0) { 
$follow.css('transform', 'translateY('+ offset +'px)'); 
} 

Посмотрите, как синий элемент только свитки в то время как его родитель виден, и останавливается, когда родитель находится за пределами окна просмотра? Надеюсь, это поможет!

Answer 2

это то, что вы ищете? http://jsfiddle.net/leojavier/gbuLykdj/1/

<div class="div-a"></div> 

<div class="div-b"> 
    <div class="fixed-element"></div> 
</div> 

<div class="div-c"></div> 

JS

$(window).on('scroll', function(){ 
    if($(window).scrollTop() >= $('.div-a').height() && !$('.fixed-element').hasClass('fixed')) { 
     $('.fixed-element').addClass('fixed'); 
    } 
    else if($(window).scrollTop() < $('.div-a').height() && $('.fixed-element').hasClass('fixed')){ 
     $('.fixed-element').removeClass('fixed'); 
     $('.fixed-element').removeClass('abs'); 
    } 
}) 

CSS

html,body{ 
    width:100%; 
    height:100%; 
} 

.div-a{ 
    background:red; 
    width:100%; 
    height:100%; 
} 
.div-b{ 
    background:blue; 
    width:100%; 
    height:100%; 
    position:relative; 
} 
.div-c{ 
    background:purple; 
    width:100%; 
    height:100%; 
} 

.fixed-element{ 
    background:#FFF; 
    background:#CCC; 
    width:100px; 
    height:100px; 
    float:right; 
    margin-right:20px; 
    margin-top:20px; 
} 
.fixed { 
    position:fixed; 
    right:0; 
    top:0; 
} 
.abs { 
    position:absolute; 
    right:0; 
    bottom:0; 
} 

http://jsfiddle.net/leojavier/gbuLykdj/1/

Answer 3

Я считаю, что this является то, что вы ищете, есть исходный код на странице, тоже.