jQuery: скрыть / показать разделы на странице прокрутки - PullRequest
Новая
       5

jQuery: скрыть / показать разделы на странице прокрутки

2 голосов
/ 29 декабря 2011

jsfiddle: http://jsfiddle.net/MFUw3/5/

jQuery: 

function showDiv() {
    if ($(window).scrollTop() > 610) {
        $(".a").css({"position": "fixed", "top": "10px"});
    } else {
        $(".a").css({"position": "relative", "top": "0px"});
    }
}
$(window).scroll(showDiv);
showDiv();

HTML: 

<div>
    <div class="a">
        A
    </div>
    <div class="b">
        B
    </div>
</div>

Я хочу сделать так, когда пользователь прокрутил мимо div "B" (A и B не видны), затем div "A" исчезнет и закрепится в верхней части браузера.

Когда выпрокрутите вверх и div "B" снова в поле зрения, я хочу, чтобы div "A" исчез и вернулся в исходное положение.

Myкод в настоящее время делает именно это, ЗА ИСКЛЮЧЕНИЕМ он не исчезает.

Я пытался возиться с .is(":visible"), .is(":hidden"), .hide();, чтобы я мог использовать fadeIn(); и fadeOut();, но что бы я ни пытался, я не могу понять это, и я знаю, что это неэффективно с самого начала.Вероятно, есть какой-то способ определить, прошел ли он div вместо определенной координаты?

1 Ответ

4 голосов
/ 29 декабря 2011

Вот то, что должно удовлетворить ваши потребности: 

function showDiv() {
    if ($(window).scrollTop() > 610 && $('.a').data('positioned') == 'false') {
        $(".a").hide().css({"position": "fixed", "top": "10px"}).fadeIn().data('positioned', 'true');
    } else if ($(window).scrollTop() <= 610 && $('.a').data('positioned') == 'true') {
        $(".a").fadeOut(function() {
            $(this).css({"position": "relative", "top": "0px"}).show();
        }).data('positioned', 'false');
    }
}
$(window).scroll(showDiv);
$('.a').data('positioned', 'false');

И ссылка на рабочий пример: http://jsfiddle.net/MFUw3/10/

Редактировать: я добавил улучшения кода, предложенные Sparky672, и исчезновение (изначально опущено).

...