Prueba en JQuery si un elemento está en la parte superior de la pantalla

Question

Tengo un div que está posicionado a unos 100 px desde la parte superior de la ventana del navegador. Cuando el usuario se desplaza hacia abajo, quiero que div permanezca donde está hasta que llegue a la parte superior de la pantalla. Luego, cambiaré algunos CSS con JQuery para que la posición cambie a fija y el margen superior a 0. ¿Cómo puedo probar en JQuery si este div está en la parte superior de la pantalla?

Answer 1

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

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

P.S. Para un mejor rendimiento, probablemente debe estrangular el controlador de eventos de desplazamiento.
Echa un vistazo al artículo de John Resig: Learning from Twitter.

Answer 2

No es tanto una respuesta, pero podría ser útil para otra persona. Usando la respuesta aceptada arriba y también haciendo referencia al enlace 'Aprender de Twitter' (gracias @Joseph Sibler), se me ocurrió lo siguiente.

Estoy usando un Twitter Bootstrap Navbar para mi navegación principal. Tiene un ID de megamenu.

También tengo un botón de "inicio de sesión" en mi página que cuando hace clic, desliza la barra de navegación y todos los contenidos debajo de ella para revelar el formulario de inicio de sesión. ¿Y qué? Bueno, ahora la posición de mi barra de navegación ha cambiado y si no actualizo esa posición, cuando me desplazo por la barra de navegación volaré hacia la parte superior del navegador, aunque no esté realmente en la parte superior.

Se me ocurrió esto para actualizar la posición de la barra de navegación, por lo que si un usuario hace clic en 'iniciar sesión' y luego se desplaza, la barra de navegación se fijará correctamente en la parte superior.

logincollapse es mi contenedor div que contiene el formulario de inicio de sesión y otro contenido oculto hasta que se presiona el botón login.

Estoy seguro de que hay margen de mejora, así que corrígeme, lo actualizaré en consecuencia.

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

cuando se tiene cabecera. y luego a un lado barra. para la fijación a un lado la barra, cuando se encuentra en la parte superior de la pantalla:

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

oye usted puede hacer como esto:

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