Wie lässt man ein div beim Scrollen folgen?

Ich habe ein div auf der linken Seite, das die Geschäftszeiten und das Wetter enthält. Ich möchte, dass dieses div nach unten und oben scrollt, je nachdem, wie der Benutzer scrollt. Es würde also folgen und sich mit der Seite auf und ab bewegen. Wie würde ich das versuchen? Dies ist meine Webseite judystropicalgarden.com

Vielen Dank

Sie können entweder die CSS-Eigenschaft Fixed verwenden oder, wenn Sie etwas Feinabstimmung benötigen, Javascript verwenden und die Eigenschaft scrollTop verfolgen, die definiert, wo sich die Bildlaufleiste des Benutzeragenten befindet (0 steht oben … und x ist ganz unten)

.Fixed
{
    position: fixed;
    top: 20px;
}

oder mit jQuery:

$('#ParentContainer').scroll(function() { 
    $('#FixedDiv').css('top', $(this).scrollTop());
});

Der Beitrag ist alt, aber ich habe ein perfektes CSS für diesen Zweck gefunden und möchte es teilen.

Ein Sticky-Element wechselt je nach Bildlaufposition zwischen relativ und fest. Es wird relativ positioniert, bis eine bestimmte Versatzposition im Ansichtsfenster erreicht wird – dann “klebt” es an Ort und Stelle (wie position:fixed).

    div.sticky {
        position: -webkit-sticky; /* Safari */
        position: sticky;
        top: 0;
        background-color: green;
        border: 2px solid #4CAF50;
    }

Quelle: https://www.w3schools.com/css/css_positioning.asp

Mithilfe von CSS-Stilen können Sie definieren, wie etwas positioniert wird. Wenn Sie das Element als definieren Festbleibt es immer an der gleichen Position auf dem Bildschirm.

div
{
    position:fixed;
    top:20px;
}

Du kannst den … benutzen fixed CSS-Positionseigenschaft, um dies zu erreichen. Dazu gibt es ein Basis-Tutorial hier.

BEARBEITEN: Dieser Ansatz wird jedoch NICHT in IE-Versionen < IE7 unterstützt, und nur in IE7, wenn es sich im Standardmodus befindet. Dies wird hier etwas ausführlicher besprochen.

Es gibt auch einen Hack, erklärt hier, das zeigt, wie man eine feste Positionierung in IE6 erreicht, ohne die absolute Positionierung zu beeinträchtigen. Auf welche Version von IE zielen Sie mit Ihrer Website ab?

Eine bessere JQuery-Antwort wäre:

$('#ParentContainer').scroll(function() { 
    $('#FixedDiv').animate({top:$(this).scrollTop()});
});

Sie können auch eine Zahl nach scrollTop hinzufügen, dh .scrollTop() + 5, um es zu stärken.

Ein guter Vorschlag wäre auch, die Dauer auf 100 zu begrenzen und vom Standardschwung zu einer linearen Lockerung überzugehen.

$('#ParentContainer').scroll(function() { 
    $('#FixedDiv').animate({top:$(this).scrollTop()},100,"linear");
})

das Position:fest; Eigentum sollte die Arbeit erledigen, ich habe es auf meiner Website verwendet und es hat gut funktioniert.
http://www.w3schools.com/css/css_positioning.asp

Verwenden Sie einfach einen Hintergrundanhang und stellen Sie ihn so ein, dass er in Ihrem CSS scrollt.

so was:

background-attachment: scroll;