Проверить, доступен ли div в окне?

У меня есть сайт на одной странице с фиксированной навигацией и с помощью прокрутки script, очень похоже на это: http://www.ivanjevremovic.in.rs/live/temptation/single/orange/index-cycle-slider.html

Что я ищу - это способ проверить, какой раздел доступен для просмотра в окне, чтобы установить активное состояние на навигаторе при использовании полосы прокрутки браузера, любых идей?

Ответ 1

Вот все необходимые вам переменные...

var $myElt       = $('.myElement');      // whatever element you want to check
var $window      = $(window);            // the window jQuery element
var myTop        = $myElt.offset().top;  // the top (y) location of your element
var windowTop    = $window.scrollTop();           // the top of the window
var windowBottom = windowTop + $window.height();  // the bottom of the window

Затем убедитесь, что ваш элемент находится в пределах окна...

if (myTop > windowTop && myTop < windowBottom) {
    // element is in the window
} else {
    // element is NOT in the window
    // maybe use this to scroll... 
    // $('html, body').animate({scrollTop: myTop}, 300);
}

Справочник по jQuery:

Ответ 2

Используйте $('#element').offset().top; для обнаружения верхней части элемента.

$(window).scrollTop();, чтобы обнаружить текущую позицию прокрутки.

И $(window).height(); для определения текущей высоты окна.

И после этих шагов вам понадобятся только что-то простые математические вычисления.

Ответ 3

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));
}

source: Проверить, что элемент виден после прокрутки

Ответ 4

см. следующий плагин lazyload:

http://plugins.jquery.com/files/jquery.lazyload.js__6.txt

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

Ответ 5

Если вы используете jQuery, попробуйте проверить положение документа

$('html').position().top;

например:

$(document).bind("scroll", checkLink);

function checkLink(){

   /* Position will checked out after 1 sec when user finish scrolling  */
   var s = setTimeout(function(){ 

     var docHeight = $('html').position().top;
     var allLinks = $('.navigation a');

     if ( docHeight < 0 && docHeight <= -1000 ) { 

        allLinks.removeClass('active');
        $('a.firstlink').addClass('active');

     } else 
     if ( docHeight < -1000 && docHeight <= -2000 ) { 

        allLinks.removeClass('active');
        $('a.secondlink').addClass('active');

     } else { /* .... */ }

   $(document).bind("scroll", checkLink);
   }, 1000);

  $(document).unbind('scroll');
}

но ребята в вашем примере долгое время не занимались этим:) они просто переключают классы на клик

$('#navigation').localScroll();
    $('#navigation li a').click( function () {
        $('#navigation li a').removeClass("active");
        $(this).addClass("active");
    });