测试在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}); 
    }); 
});