Wie kann ich erreichen, dass ein Div am oberen Rand des Bildschirms bleibt, wenn es einmal gescrollt wurde?

Question

Ich möchte ein Div erstellen, das sich unter einem Inhaltsblock befindet, das aber, sobald die Seite so weit gescrollt wurde, dass es seine obere Begrenzung berührt, an Ort und Stelle fixiert wird und mit der Seite scrollt.

Answer 1

Meine Lösung ist etwas umständlich, aber sie ermöglicht eine variable Positionierung vom linken Rand aus für zentrierte Layouts.

// Ensurs that a element (usually a div) stays on the screen
//   aElementToStick   = The jQuery selector for the element to keep visible
global.makeSticky = function (aElementToStick) {
    var $elementToStick = $(aElementToStick);
    var top = $elementToStick.offset().top;
    var origPosition = $elementToStick.css('position');

    function positionFloater(a$Win) {
        // Set the original position to allow the browser to adjust the horizontal position
        $elementToStick.css('position', origPosition);

        // Test how far down the page is scrolled
        var scrollTop = a$Win.scrollTop();
        // If the page is scrolled passed the top of the element make it stick to the top of the screen
        if (top < scrollTop) {
            // Get the horizontal position
            var left = $elementToStick.offset().left;
            // Set the positioning as fixed to hold it's position
            $elementToStick.css('position', 'fixed');
            // Reuse the horizontal positioning
            $elementToStick.css('left', left);
            // Hold the element at the top of the screen
            $elementToStick.css('top', 0);
        }
    }

    // Perform initial positioning
    positionFloater($(window));

    // Reposition when the window resizes
    $(window).resize(function (e) {
        positionFloater($(this));
    });

    // Reposition when the window scrolls
    $(window).scroll(function (e) {
        positionFloater($(this));
    });
};

Answer 2

Hier ist eine erweiterte Version der Antwort von Josh Lee. Wenn Sie möchten, dass das div in der Sidebar rechts steht und innerhalb eines Bereichs schwebt (d. h. Sie müssen die oberen und unteren Ankerpositionen angeben). Außerdem wird ein Fehler behoben, der bei der Anzeige auf mobilen Geräten auftritt (Sie müssen die linke Scroll-Position überprüfen, da das Div sonst vom Bildschirm verschwindet).

function moveScroller() {
    var move = function() {
        var st = $(window).scrollTop();
        var sl = $(window).scrollLeft();
        var ot = $("#scroller-anchor-top").offset().top;
        var ol = $("#scroller-anchor-top").offset().left;
        var bt = $("#scroller-anchor-bottom").offset().top;
        var s = $("#scroller");
        if(st > ot) {
            if (st < bt - 280) //280px is the approx. height for the sticky div
            {
                s.css({
                    position: "fixed",
                    top: "0px",
                    left: ol-sl
                }); 
            }
            else
            {
                s.css({
                    position: "fixed",
                    top: bt-st-280,
                    left: ol-sl
                }); 
            }
        } else {
            s.css({
                position: "relative",
                top: "",
                left: ""
            });

        }
    };
    $(window).scroll(move);
    move();
}

Answer 3

Ich bin bei meiner Suche nach demselben Thema auf diese Seite gestoßen. Ich weiß, es ist eine alte Frage, aber ich dachte, ich würde eine neuere Antwort anbieten.

Scrollorama hat eine 'Pin it'-Funktion, die genau das ist, wonach ich gesucht habe.

http://johnpolacek.github.io/scrollorama/

Answer 4

Ich habe Links Setup in einem div, so dass es eine vertikale Liste von Buchstaben und Zahlen Links ist.

#links {
    float:left;
    font-size:9pt;
    margin-left:0.5em;
    margin-right:1em;
    position:fixed;
    text-align:center;
    width:0.8em;
}

Dann richte ich diese praktische jQuery-Funktion ein, um die geladene Position zu speichern und dann die Position beim Scrollen über diese Position hinaus zu fixieren.

HINWEIS: dies funktioniert nur, wenn die Links beim Laden der Seite sichtbar sind!!

var listposition=false;
jQuery(function(){
     try{
        ///// stick the list links to top of page when scrolling
        listposition = jQuery('#links').css({'position': 'static', 'top': '0px'}).position();
        console.log(listposition);
        $(window).scroll(function(e){
            $top = $(this).scrollTop();
            $el = jQuery('#links');
            //if(typeof(console)!='undefined'){
            //    console.log(listposition.top,$top);
            //}
            if ($top > listposition.top && $el.css('position') != 'fixed'){
                $el.css({'position': 'fixed', 'top': '0px'});
            }
            else if ($top < listposition.top && $el.css('position') == 'fixed'){
                $el.css({'position': 'static'});
            }
        });

    } catch(e) {
        alert('Please vendor admin@mydomain.com (Myvendor JavaScript Issue)');
    }
});

Answer 5

Ich habe einige der oben genannten Arbeiten verwendet, um diese Technik zu entwickeln. Ich habe es ein wenig verbessert und dachte, ich würde meine Arbeit teilen. Ich hoffe, das hilft.

jsfiddle Code

function scrollErrorMessageToTop() {
    var flash_error = jQuery('#flash_error');
    var flash_position = flash_error.position();

    function lockErrorMessageToTop() {
        var place_holder = jQuery("#place_holder");
        if (jQuery(this).scrollTop() > flash_position.top && flash_error.attr("position") != "fixed") {
            flash_error.css({
                'position': 'fixed',
                'top': "0px",
                "width": flash_error.width(),
                "z-index": "1"
            });
            place_holder.css("display", "");
        } else {
            flash_error.css('position', '');
            place_holder.css("display", "none");
        }

    }
    if (flash_error.length > 0) {
        lockErrorMessageToTop();

        jQuery("#flash_error").after(jQuery("<div id='place_holder'>"));
        var place_holder = jQuery("#place_holder");
        place_holder.css({
            "height": flash_error.height(),
            "display": "none"
        });
        jQuery(window).scroll(function(e) {
            lockErrorMessageToTop();
        });
    }
}
scrollErrorMessageToTop();

Dies ist eine etwas dynamischere Art und Weise, den Bildlauf durchzuführen. Es braucht einige Arbeit, und ich werde irgendwann schalten Sie diese in ein Plugin, aber das ist, was ich kam mit nach Stunde der Arbeit.