переключение отображения div, когда 2-й div прокручивает страницу включения / выключения

Основные проблемы

Первый шаг к устранению неполадок сценария: всегда проверяйте консоль на наличие ошибок. Проверяя консоль при загрузке Fiddle, я вижу эту ошибку:

Uncaught TypeError: Object [object Object] не имеет метода 'isScrolledIntoView'

Это связано с тем, что не существует метода под названием .isScrolledIntoView. Это простая JS-функция, в которой вы указываете идентификатор элемента (класс или идентификатор), который затем возвращается, если указанный элемент находится в поле зрения или нет. Его следует использовать примерно так:

// For class
if(isScrolledIntoView(".class")) {...} else {...}

// For ID
if(isScrolledIntoView("#id")) {...} else {...}

Это связано с тем, что функция оценивает элемент на основе этой строки:

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

Кроме того, elTop и elBottom на самом деле не определены. Я считаю, что это опечатка. Вот фиксированная функция:

function isScrolledIntoView (elem) {var docViewTop = $ (window).scrollTop(); var docViewBottom = docViewTop + $(window).height(); var docViewBottom = docViewTop + $ (window).height();

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

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

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

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

} }

---

Ваша скрипка

При манипулировании DOM всегда выполняйте их, когда DOM готов, то есть:

$(document).ready(function () {
    $('#magicnav').hide();
    $(window).scroll(function() {
        if (isScrolledIntoView('#intro')) {
            $('#magicnav').fadeOut();
        } else {
            $('#magicnav').fadeIn();
        }
    });
});

Обратите внимание, что я переместил метод .hide() в событие готовности DOM. Кроме того, функция isScrolledIntoView только один раз, когда DOM готов в исходном Fiddle. Вам придется запускать его каждый раз при обнаружении события прокрутки, поэтому я завернул ваш условный оператор в событие $(window).scroll().

Я исправил вашу скрипку - http://jsfiddle.net/teddyrised/XN82s/10/

---

Дополнительные замечания

При прослушивании событий .scroll() некоторые браузеры делают это слишком много раз, когда вы начинаете перемещать полосу прокрутки. Хорошей практикой было бы дросселировать это, например, используя этот отличный плагин.

Ваш код требует минимальной модификации:

$(document).ready(function () {
    $('#magicnav').hide();

    // Here we throttle the scroll event to firing once every 250ms
    $(window).scroll($.throttle(250, function() {
        if (isScrolledIntoView('#intro')) {
            $('#magicnav').fadeOut();
        } else {
            $('#magicnav').fadeIn();
        }
    }));
});