Как сделать что-то, когда пользователь прокручивает до div? - PullRequest
Новая
       18

Как сделать что-то, когда пользователь прокручивает до div?

3 голосов
/ 07 апреля 2011

У меня есть div id="content".

Можно ли выполнить действие, если пользователь увидит id="content"?

Ответы [ 5 ]

5 голосов
/ 08 апреля 2011

Я ответил на аналогичные вопросы на горизонтальной прокрутке, обнаружив положение прокрутки относительно якорей

См. Рабочий пример http://jsfiddle.net/Vy33z/4/

Вы также можете использовать плагин, если вы не слишком знакомы с jQuery. Плагин Appear великолепен и прост в использовании. Все, что вам нужно сделать, это 

$('#mydiv').appear(function() {
  alert('Your div is in view');
});
2 голосов
/ 08 апреля 2011

Вы можете легко сделать это с помощью этого плагина jQuery: jQuery Waypoints

2 голосов
/ 08 апреля 2011

Видите, как внутри окна просмотра браузера?Вы смотрели на этот плагин viewport ?

1 голос
/ 08 апреля 2011

Вы можете использовать .scrollTop() возможно. Что-то вроде: 

function scrolledTo(el, shownCallback, hiddenCallback) {
    var isVisible = false;
    var isScrolledTo = function(){
       var docViewTop = $(window).scrollTop();
        var docViewBottom = docViewTop + $(window).height();

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

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

    $(window).scroll(function(){
        if(isScrolledTo()){
            if(!isVisible){
                isVisible = true;
                if(shownCallback)(shownCallback());
            }
        } else {
            if(isVisible){
                isVisible = false;
                if(hiddenCallback)(hiddenCallback());
            }
        }
    });
}

Содержит код от Проверьте, виден ли элемент после прокрутки

Вот скрипка .

0 голосов
/ 08 апреля 2011

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

    $(document).ready(function(){
    var divTop = $('#test5').get(0).offsetTop;

    $(window).scroll(function(){
        var windowHeight = $(window).height();
        var top = $(window).scrollTop();
        var windowBottom = (top+windowHeight);
        if(windowBottom > divTop){
            console.log('div in view');
        }
    });
});

HTML: 

    <div id="test1" style="display: block; height: 200px;">1</div>
<div id="test2" style="display: block; height: 200px;">2</div>
<div id="test3" style="display: block; height: 200px;">3</div>
<div id="test4" style="display: block; height: 200px;">4</div>
<div id="test5" style="display: block; height: 200px;">5</div>
...