Как узнать, находится ли элемент HTML за другим элементом HTML?

Question

У меня есть этот HTML:

HTML:

<div class="stave-container">
  <section id="Captcha"></section>
  <div id="horiz_container_outer">
     <img class="img1" />
       ...
     <img class="imgn"/>
  </div>
</div>

++++++++++++++++++++++++++++++++++++++++
+         +                            +
+#Captcha +  img | img | img | img     +
+         +  div#horiz_container_outer +
++++++++++++++++++++++++++++++++++++++++

Раздел # Captcha исправлен!

Div # horiz_container_outer прокручивается и содержит элемент img!

Как я могу определить, когда элемент img находится за Div #Captcha в то время как скроллинг

Answer 1

Мое решение:

Я положил его в jquery: .scroll функция

    $("#horiz_container_outer > img").each(function(){
      if( $("#Captcha").offset().left > $(this).offset().left )
        {
          console.log($(this).attr("class"));
        }
    })

Answer 2

Чтобы скопировать все элементы из одного div в другой, вы можете сделать что-то вроде этого:

HTML

<div id="fixedDiv"></div>
<div id="stuff"><span>some stuff</span><br /><hr /></div>

JS

document.getElementById("fixedDiv").innerHTML = document.getElementById("stuff").innerHTML;

Answer 3

Если вы пытаетесь создать часть экрана, которая не прокручивается (как это звучит, но я не совсем уверен в вашем вопросе), совместимый со стандартами способ сделать это:

.non-scroll-div {
  position:fixed;
}

Однако следует учитывать совместимость: http://caniuse.com/#feat=css-fixed