測試在JQuery的元素是否在屏幕

Question

的頂部我有一個是從瀏覽器窗口的頂部定位在100px的一個div。當用戶向下滾動時，我想讓div保持在的位置，直到它到達屏幕的頂部。然後，我將使用JQuery更改一些CSS，以便將位置更改爲固定值，並將margin-top設置爲0.如果此div位於屏幕的頂部，我如何在JQuery中進行測試？

Answer 1

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

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

P.S.爲了獲得更好的性能，您應該可以調節滾動事件處理程序。
查看John Resig的文章：Learning from Twitter。

Answer 2

沒有太多的答案，但可能有助於其他人。使用上面接受的答案，並參考「從Twitter學習」鏈接（謝謝@Joseph Sibler），我提出了以下內容。

我使用的是Twitter Bootstrap Navbar我的主導航。它的ID爲megamenu。

我也有我的頁面上的「登錄」按鈕，單擊時，滑動導航欄和下方下來的所有內容以顯示登錄表單。所以呢？那麼，現在我的導航欄的位置已經改變了，如果我沒有更新那個位置，當我滾動導航欄時，它將飛到瀏覽器的頂部 - 儘管它並不是真正的頂部。

我想出了這個更新導航欄位置，如果用戶點擊「登錄」，然後滾動，導航欄將正確自身固定在頂部。

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

Answer 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> 

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

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