Тест в JQuery, если элемент находится в верхней части экрана

Ответ 1

var distance = $('div').offset().top,
    $window = $(window);

$window.scroll(function() {
    if ( $window.scrollTop() >= distance ) {
        // Your div has reached the top
    }
});

P.S.. Для повышения производительности вы должны, вероятно, активировать обработчик событий прокрутки.
Посмотрите статью Джона Ресига: Обучение через Twitter.

Ответ 2

Не так много ответа, но может быть полезно кому-то другому. Используя принятый ответ выше, а также ссылаясь на ссылку "Обучение с Twitter" (спасибо @Joseph Sibler), я придумал следующее.

Я использую Twitter Bootstrap Navbar для своей основной навигации. Он имеет идентификатор megamenu.

У меня также есть кнопка "login" на моей странице, которая при нажатии открывается слайды навигационной панели и всего содержимого ниже нее, чтобы открыть форму входа в систему. И что? Итак, теперь позиция моего навигатора изменилась, и если я не обновляю эту позицию, когда я прокручиваю навигационную панель, она будет взлетать до верхней части браузера, даже если она не находится наверху.

Я придумал это, чтобы обновить позицию навигатора, поэтому, если пользователь нажимает "login", а затем прокручивает, navbar правильно фиксирует себя в верхней части.

logincollapse - это мой контейнер div, который содержит форму входа и другой скрытый контент до тех пор, пока не будет нажата кнопка login.

Я уверен, что есть возможности для улучшения - поэтому, пожалуйста, исправьте меня, я обновлю соответствующим образом.

JQuery

var did_scroll = false,
    $window = $(window),
    megamenu_distance = $('#megamenu').offset().top; // The default position of the navbar

$('#logincollapse').slideToggle(300, 'easeInOutQuint', function () {
    megamenu_distance = $('#megamenu').position().top; // Updated position of the navbar
    ....
});

$window.scroll(function (event) {
    did_scroll = true;
});

setInterval(function () {
    if (did_scroll)
    {
        did_scroll = false;

        if ($window.scrollTop() >= megamenu_distance)
        {
            $('#megamenu').addClass('navbar-fixed-top');
        }
        else
        {
            $('#megamenu').removeClass('navbar-fixed-top');
        }
    }
}, 250);

Ответ 3

когда у вас есть заголовок. а затем в сторону бара. для фиксации боковой панели, когда она находится в верхней части экрана:

JavaScript:

var scroll_happened = false;
var aside_from_top = $('aside').offset().top;
$window = $(window);

$window.scroll(function()
{
    scroll_happened = true;
});

setInterval(function()
{
    if(scroll_happened == true)
    {
        scroll_happened = false;
        if($window.scrollTop() >= aside_from_top)
        {
            $('#aside_container').addClass('fixed_aside');
        }
        else
        {
            $('#aside_container').removeClass('fixed_aside');
        }
    }
} , 250);

Css:

.fixed_aside
{
    position: fixed;
    top: 0;
    bottom: 0;
}

Html:

<aside>
    <div id="aside_container">
        <section>
        </section>
        <section>
        </section>
        <section>
        </section>
    </div>
</aside>

Ответ 4

эй, ты можешь так:

var distance = $('.yourclass').offset().top;

$(window).scroll(function() {
    if ( $(this).scrollTop() >= distance ) {
        console.log('is in top');
    } else {
        console.log('is not in top');
    }
});

Ответ 5

    $(document).ready(function(){  
    var $doc           = $(document);
    var position       = 0;
    var top = $doc.scrollTop();         // 현재 스크롤바 위치  
    var screenSize     = 0;             // 화면크기  
    var halfScreenSize = 0;             // 화면의 반  

    /* 사용자 설정 값 시작 */  
    var pageWidth      = 1000;          // 페이지 폭, 단위:px  
    var leftOffet      = 409;           // 중앙에서의 폭(왼쪽 -, 오른쪽 +), 단위:px  
    var leftMargin     = 909;           // 페이지 폭보다 화면이 작을때 옵셋, 단위:px, leftOffet과 pageWidth의 반만큼 차이가 난다.  
    var speed          = 1500;          // 따라다닐 속도 : "slow", "normal", or "fast" or numeric(단위:msec)  
    var easing         = 'swing';       // 따라다니는 방법 기본 두가지 linear, swing  
    var $layer         = $('#quick');   // 레이어 셀렉팅  
    var layerTopOffset = 140;           // 레이어 높이 상한선, 단위:px  
    $layer.css('z-index', 10);          // 레이어 z-인덱스  
    /* 사용자 설정 값 끝 */

    // 좌우 값을 설정하기 위한 함수  
    function resetXPosition()  
    {  
        $screenSize = $('#contact').width();            // 화면크기  
        halfScreenSize = $screenSize / 2;               // 화면의 반 
        xPosition = halfScreenSize + leftOffet;  
        if ($screenSize < pageWidth)
            xPosition = leftMargin;
        $layer.css('left', xPosition);  
    }  


    // 스크롤 바를 내린 상태에서 리프레시 했을 경우를 위해  
    if (top > 0 )  
        $doc.scrollTop(layerTopOffset+top);  
    else  
        $doc.scrollTop(0);  

    // 최초 레이어가 있을 자리 세팅  
    $layer.css('top',layerTopOffset);  
    resetXPosition();  

    // 윈도우 크기 변경 이벤트가 발생하면  
    $(window).resize(resetXPosition);  

    // 스크롤이벤트가 발생하면  
    $(window).scroll(function(){  
        yPosition = $doc.scrollTop() + layerTopOffset;  
        $layer.animate({"top":yPosition }, {duration:speed, easing:easing, queue:false});  
    });  
});