jQuery что-то делать, если страница прокручивается до имени класса

Question

Я хочу, чтобы div отображался, если я перехожу к классу на странице меньше или равным.

Т.е. Я хочу, чтобы этот ящик отображался после прокрутки страницы до определенного класса. Прокручивая страницу вниз, я хочу, чтобы этот ящик все еще отображался, пока я не вернусь выше класса.

В настоящее время это не делает точного, упомянутого выше, скорее, он скрывается, когда я прокручиваю его вверх или вниз. Мне нужно, чтобы изменить код как-то:

$(document).ready(function() { 
    function isScrolledIntoView(elem) { 
     var docViewTop = $(window).scrollTop(); 
     var docViewBottom = docViewTop + $(window).height(); 

     var elemTop = $(elem).offset().top; 
     var elemBottom = elemTop + $(elem).height(); 

     return ((elemBottom >= docViewTop) && (elemTop <= docViewBottom)); 
    } 

    var myelement = $('.pricebox'); // the element to act on if viewable 
    $(window).scroll(function() { 
     if(isScrolledIntoView(myelement)) { 
      $('#prodbar').show(); 
     } else { 
      $('#prodbar').hide();// do something when element is not viewable 
     } 
    }); 
}); 

Answer 1

Попробуйте изменить эту строку:

return ((elemBottom >= docViewTop) && (elemTop <= docViewBottom)); 

к

return (elemTop <= docViewBottom); 

И это будет показывать и скрывать элемент, как вы хотели:

if(isScrolledIntoView(myelement)) { 
     $('#prodbar').slideDown("slow"); 
    } else { 
     $('#prodbar').slideUp("slow"); 
    } 

http://jsfiddle.net/KKeuR/2/

Answer 2

Насколько я понимаю, вы пытаетесь создать элемент, когда окно находится в пределах выделенного элемента.

Использование документа В обоих примерах вы можете проверить, что верхняя часть окна больше или равна верхнему элементу и гарантирует, что верхняя часть окна меньше или равна нижней части элемента.

$(document).ready(function() { 
    function isScrolledIntoView(elem) { 
     var docViewTop, docViewBottom, elemTop, elemBottom; 

     docViewTop = $(window).scrollTop(); 
     docViewBottom = docViewTop + $(window).height(); 

     elemTop = $(elem).offset().top; 
     elemBottom = elemTop + $(elem).height(); 

     return docViewTop >= elemTop && docViewTop <= elemBottom; 
    } 

    $(window).scroll(function() { 
     var myelement = $('.pricebox'); // the element to act on if viewable 
     if (isScrolledIntoView(myelement)) { 
      $('#prodbar').show(); 
     } else { 
      $('#prodbar').hide(); // do something when element is not viewable 
     } 
    }); 
}); 

http://jsfiddle.net/halfcube/Xb5Yq/