Testen Sie in JQuery, ob sich ein Element am oberen Bildschirmrand befindet

Lesezeit: 4 Minuten

Benutzer-Avatar
herr_donnerstag

Ich habe ein div das etwa 100 Pixel vom oberen Rand des Browserfensters entfernt positioniert ist. Wenn der Benutzer nach unten scrollt, möchte ich das div zu bleiben, wo es ist bis um es erreicht den oberen Rand des Bildschirms. Dann ändere ich etwas CSS mit JQuery, um die Position zu fixieren und den oberen Rand auf 0 zu ändern. Wie kann ich in JQuery testen, ob dies der Fall ist div ist oben auf dem Bildschirm?

Benutzer-Avatar
Josef Silber

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

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

PS Für eine bessere Leistung sollten Sie wahrscheinlich den Scroll-Event-Handler drosseln.
Lesen Sie den Artikel von John Resig: Von Twitter lernen.

  • Kann ich eine px # für die Entfernung eingeben?

    – herr_donnerstag

    25. September 2011 um 4:57 Uhr

  • @ Hubrid – Sicher. Achten Sie nur darauf, die Buchstaben nicht einzuschließen pxda es eine Zahl sein soll.

    – Josef Silber

    25. September 2011 um 8:34 Uhr

  • was soll das $window var? nicht versuchen, es zu einfach zu machen?

    – Eduard

    12. Juli 2018 um 13:47 Uhr

  • @ user3411192 – $(window) erstellt ein neues jQuery-Objekt. Sie möchten das nicht alle paar Millisekunden ausführen, während der Benutzer scrollt. Wir erstellen es also einmal, wenn die Seite geladen wird, dann können wir dasselbe Objekt innerhalb des Scroll-Ereignis-Listeners wiederverwenden.

    – Josef Silber

    12. Juli 2018 um 13:59 Uhr

hey du kannst das so machen:

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

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

Nicht so sehr eine Antwort, könnte aber für jemand anderen hilfreich sein. Unter Verwendung der oben akzeptierten Antwort und unter Bezugnahme auf den Link „Von Twitter lernen“ (danke @Joseph Sibler) kam ich auf Folgendes.

Ich verwende eine Twitter Bootstrap-Navigationsleiste für meine Hauptnavigation. Es hat eine ID von megamenu.

Ich habe auch eine „Login“-Schaltfläche auf meiner Seite, die, wenn sie angeklickt wird, die Navigationsleiste und alle Inhalte darunter nach unten schiebt, um das Anmeldeformular anzuzeigen. Na und? Nun, jetzt hat sich die Position meiner Navigationsleiste geändert, und wenn ich diese Position nicht aktualisiere, fliegt die Navigationsleiste beim Scrollen an den oberen Rand des Browsers – obwohl sie nicht wirklich ganz oben ist.

Ich habe mir das ausgedacht, um die Position der Navigationsleiste zu aktualisieren. Wenn also ein Benutzer auf „Anmelden“ klickt und dann scrollt, wird die Navigationsleiste korrekt oben fixiert.

logincollapse ist mein Container-Div, das das Anmeldeformular und andere versteckte Inhalte enthält, bis die login Schaltfläche angeklickt wird.

Ich bin mir sicher, dass es Raum für Verbesserungen gibt – also korrigiert mich bitte, ich werde entsprechend aktualisieren.

Abfrage

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

Benutzer-Avatar
mlbre

wenn du einen Header hast. und dann beiseite bar. zum Fixieren der seitlichen Leiste, wenn sie sich oben auf dem Bildschirm befindet:

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>

Benutzer-Avatar
Benutzer8197823

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

1246920cookie-checkTesten Sie in JQuery, ob sich ein Element am oberen Bildschirmrand befindet

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy