Kontinuierliche Aktualisierung von H5-Tag-Text basierend auf neuen div Daten attr beim Scrollen in Sicht

Question

Ich möchte kontinuierlich H5-Tag-Text basierend auf aktuellen div Daten attr aktualisieren, wenn in Sicht gescrollt. CSS wird dort eingerichtet, wo die .bar-Klasse 100% Höhe einnimmt und jeweils nur eine sichtbar ist. Ich bin in der Lage, den ersten Bildtitel an das h5-Tag zu übergeben, aber es wird nicht aktualisiert, wenn ein neues .bar div in Sicht gescrollt wird.

HTML

<div id="foo"> 
    <div class="bar" > 
     <img class="image" id="i_003" data-title="title_3" src="path/here_3.jpg"> 
    </div> 

    <div class="bar" > 
     <img class="image" id="i_002" data-title="title_2" src="path/here_2.jpg"> 
    </div> 

    <div class="bar" > 
     <img class="image" id="i_001" data-title="title_1" src="path/here_1.jpg"> 
    </div> 
</div> 

<div id="img_info"> 
    <h5 id="title">title here</h5> 
</div> 

jQuery

$('#foo').scroll(function() { 
    var imgTitle = $('.image').attr('data-title'); 

    $("#title").text(imgTitle); 

    console.log("imgTitle: " + imgTitle); 
} 

Vielen Dank für Ihre Hilfe! in einer Variablen, wie beispielsweise ein Array

Answer 1

JSFiddle

die Position jedes .bar in dessen Container Holen. Analysieren Sie die scrollTop-Position des Containers beim Scrollen und vergleichen Sie dessen Wert mit den oberen Werten der Variablen. Wenn der scrollTop-Wert zwischen einer der .bar-Optionen liegt, wenden Sie den Wert für image-title an.

(Wie Sie nicht CSS habe biete ich ein schnelles gemacht, ich hoffe, es passt Ihrem Fall)

var $foo = $('#foo'), 
 
    $title = $('#title'), 
 
    $bar = $('div.bar'), 
 
    $img = $bar.find('img.image'); 
 

 
img_top = [$img.eq(0).offset().top, $img.eq(1).offset().top, $img.eq(2).offset().top]; 
 

 
$foo.on('scroll', function(e) { 
 

 
    var scrolltop = $foo.scrollTop(); 
 

 
    if (scrolltop > img_top[2]) { 
 
    $title.text($img.eq(2).data('title')); 
 
    } else if (scrolltop > img_top[1]) { 
 
    $title.text($img.eq(1).data('title')); 
 
    } else if (scrolltop > img_top[0]) { 
 
    $title.text($img.eq(0).data('title')); 
 
    } else if (scrolltop < img_top[0]) { 
 
    $title.text('this could be the default?'); 
 
    } 
 

 
});

.bar { 
 
    margin-bottom: 100px; 
 
    height: 100vh; 
 
    border: 1px solid black; 
 
} 
 

 
#img_info { 
 
    position: fixed; 
 
    top: 0; 
 
    left: 0; 
 
} 
 

 
#foo { 
 
    overflow: auto; 
 
    height: 100vh; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="foo"> 
 
    <div class="bar"> 
 
    <img class="image" id="i_003" data-title="title_3" src="path/here_3.jpg"> 
 
    </div> 
 

 
    <div class="bar"> 
 
    <img class="image" id="i_002" data-title="title_2" src="path/here_2.jpg"> 
 
    </div> 
 

 
    <div class="bar"> 
 
    <img class="image" id="i_001" data-title="title_1" src="path/here_1.jpg"> 
 
    </div> 
 
</div> 
 

 
<div id="img_info"> 
 
    <h5 id="title">title here</h5> 
 
</div>