Используйте jQuery для отображения div только тогда, когда положение прокрутки находится между 2 точками

Я пытаюсь выяснить, как получить div (#tips), чтобы появиться, когда пользователь прокручивается во вторую четверть своей содержащейся высоты div (#wrap), а затем исчезает, когда пользователь прокручивает Последняя четверть. Так было бы так:

1-й квартал - # подсказки скрыты
2-й квартал - видно #tips
3-й квартал - видно #tips
4-й квартал - скрытые # подсказки

Я почти полностью новичок в jQuery, но я до сих пор знаю следующее:

function addKeyboardNavigation(){
 // get the height of #wrap
 var $wrapHeight = $('#wrap').outerHeight()
 // get 1/4 of wrapHeight
 var $quarterwrapHeight = ($wrapHeight)/4
 // get 3/4 of wrapHeight
 var $threequarterswrapHeight = 3*($wrapHeight)
 // check if we're over a quarter down the page
 if( $(window).scrollTop() > $quarterwrapHeight ){
  // if we are show keyboardTips
  $("#tips").fadeIn("slow");
 }
}

Вот где я запутался. Как проверить, имеет ли позиция прокрутки > $quarterwrapHeight, но < $ThreequarterswrapHeight?

Чтобы запустить его, я использовал:

// Run addKeyboardNavigation on scroll
$(window).scroll(function(){
 addKeyboardNavigation();
});

Любая помощь или предложения будут очень благодарны!

Спасибо.

Ответ 1

Привет, я разместил здесь . Единственная проблема в том, что ваш #wrap div не достаточно высок, верхняя часть окно никогда не достигнет высоты 3/4, поэтому всплывающая подсказка не исчезнет. Вот код:

$(document).ready(function(){
 $(window).scroll(function(){
  // get the height of #wrap
  var h = $('#wrap').height();
  var y = $(window).scrollTop();
  if( y > (h*.25) && y < (h*.75) ){
   // if we are show keyboardTips
   $("#tips").fadeIn("slow");
  } else {
   $('#tips').fadeOut('slow');
  }
 });
})

Я использовал height(), но вы можете использовать outerHeight()... Я забыл изменить его в демо, потому что изначально я использовал body вместо #wrap.

Другая проблема заключается в том, что #wrap не находится в верхней части страницы. Если он будет дальше, то вам придется вычесть его положение на странице из scrollTop:

var y = $(window).scrollTop() - $('#wrap').position().top;

Ответ 2

Как насчет:

if(($(window).scrollTop() > $quarterwrapHeight) && ($(window).scrollTop() < $threequarterswrapHeight)){
   $("#tips").fadeIn("slow");
} else {
   $("#tips").fadeOut("slow");
}