hasclass - jquery find class

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

Question

Tengo un div que se coloca a unos 100px desde la parte superior de la ventana del navegador. Cuando el usuario se desplaza hacia abajo, quiero que el div quede donde está hasta que llegue a la parte superior de la pantalla. Luego, cambiaré algo de CSS con JQuery para que la posición cambie a fijo 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

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 ''Aprendiendo de Twitter'' (gracias @Joseph Sibler) se me ocurrió lo siguiente.

Estoy usando una barra de navegación de Bootstrap de Twitter para mi navegación principal. Tiene una ID de megamenu .

También tengo un botón de "inicio de sesión" en mi página que cuando se hace clic, desliza la barra de navegación y todos los contenidos debajo para mostrar 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 desplace, la barra de navegación volará hasta 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 div contenedor que contiene el formulario de inicio de sesión y otro contenido oculto hasta que se hace clic en el botón de login .

Estoy seguro de que hay margen de mejora, así que corríjame, 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 2

cuando tienes encabezado y luego a un lado barra. para fijar la barra a un lado, cuando está 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 3

oye, puedes hacer 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 4

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

Answer 5

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

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

PD: Para un mejor rendimiento, probablemente debería acelerar el controlador de eventos de desplazamiento.
Revisa el artículo de John Resig: Aprendiendo de Twitter .