Используйте jQuery для показа отделения только, когда положение прокрутки будет между 2 точками
Я пытаюсь разработать, как заставить отделение (#tips) появляться когда пользовательские прокрутки в 2-й квартал его содержания высоты отделения (#wrap) и затем иметь его, исчезают, когда пользователь прокручивает в последний квартал. Таким образом, это было бы похоже на это:
1-й квартал - #tips скрыт
2-й квартал - #tips видим
3-й квартал - #tips видим
4-й квартал - #tips скрыт
Я почти абсолютно плохо знаком с 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();
});
Любая справка или предложения значительно ценились бы!
Спасибо.
2 ответа
Привет, я разместил демонстрацию здесь ... единственная проблема в том, что если ваш div #wrap недостаточно высок, верх окна никогда не достигнет высоты 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;
Как насчет:
if(($(window).scrollTop() > $quarterwrapHeight) && ($(window).scrollTop() < $threequarterswrapHeight)){
$("#tips").fadeIn("slow");
} else {
$("#tips").fadeOut("slow");
}