jquery - add class when div is underneath another -

jquery - add class when div is underneath another -

i trying add together class div when slides underneath div. see simple timeslider example. want add together class div bolden font below timeslider hover state replicating mac dock magnification hover effect. add together class 2 times on top , bottom of time under reddish slider.

http://codepen.io/pixelchef/pen/bpghm

<div class="times"> <div class="datepast hour"> - 9 </div> <div class="datepast hour"> - 10 </div> <div class="datepast hour"> - 11 </div> <div class="datepast hour"> - 12 </div> <div class="datepast hour"> - 1 pm </div>

if question right, want know how know when div hovers another. made little work-around witch might work you.

jsfiddle: link

i had big issue locating position: fixed container , getting position within scrollable div, since looks thought give reply @ to the lowest degree shows bold text in middle of container.

please note of import part happens in $("#background").scroll(), else looks.

html:

<div id="background" class="bg"> <div id="list"></div> <div id="boldarea"></div> </div>

jquery:

var list = []; (var = 0; < 24; i++) { list.push(i + "am"); } var elements = ""; list.foreach(function (entry, index) { elements += "<div class=\"text\">" + entry + "</div>"; }); $("#list").html(elements); //scroll event $("#background").scroll(function () { $("div .text").each(function (index, entry) { console.log($("#boldarea").offset().top); if ($(entry).position().top > (($("#boldarea").position().top/2) - 8) && $(entry).position().top < (($("#boldarea").position().top/2) + 8) ) { $(entry).css("font-weight", "bold"); } else { $(entry).css("font-weight", "normal"); }; }); });

instead of $(entry).css("font-weight", "bold"); write $(entry).addclass("myclass"); more dynamical styling.

css:

#boldarea { position:fixed; top: 50%; height: 12px; width: 35%; background-color: red; opacity: 0.5; } .bg { position:absolute; height: 50%; width: 50%; left: 25%; top:25%; background-color: lightgrey; overflow-y: scroll; } .text { position: relative; color: black; font-weight: normal; }

jquery css