HTML Element beim scrollen fixieren

Question

Ich habe eine Seite mit 2 Spalten. In der einen Spalte ist der Hauptteil und in der anderen Spalte eine Sidebar. In der rechten Spalte unter der Sidebar möchte ich ein kleines DIV platzieren wo ich einen die ganzen Links zum Impressum etc. reinsetze.

Mein Problem ist wenn auf der Seite in der linken Spalte (Im Hauptteil) sehr langer Text ist und man nach unten scrollt, dann scrollt die Sidebar mit. Ich möchte zwar das die Sidebar mitscollt aber sobald soweit gescrollt wurde das das kleine DIV mit den Links auch schon aus dem Bild verschwunden ist dann möchte ich das nur das kleine DIV mit den Links am oberen Rand fixiert wird aber die Seitenabstände beibehält.

Hier ist mein Beispielcode:

<style>
div.container {
    width: 1001px;
    margin: 0px auto;
}
div.left {
    width: 700px;
    float:left;
}
div.right {
    width: 300px;
    float:right;
}
div.scrolldiv {
    //position: fixed;
    //position: sticky;
    //top: 0; 
}
</style>

<div class="container">

    <div class="left">
    Lorem ipsum dolor sit amet consectetuer consectetuer sagittis lorem Vestibulum In. Ipsum diam justo Curabitur dui amet risus auctor magnis sodales non. Nullam condimentum eleifend leo faucibus eros urna Vestibulum ante urna Morbi. Nullam Nam ac pharetra Sed rhoncus faucibus malesuada sollicitudin facilisis semper. Leo Nullam vitae hac congue auctor cursus platea congue volutpat eu. Malesuada risus Curabitur id Aliquam est malesuada ridiculus Vestibulum auctor.
    Augue natoque tellus eget ornare dis porttitor mattis Quisque congue velit. Curabitur sem vitae ante non amet mus Aliquam urna et cursus. Sociis ac nisl augue sed ultrices semper faucibus lorem neque Sed. Scelerisque Sed convallis Curabitur amet Aliquam Curabitur condimentum Ut pretium vitae. Ac ut wisi at adipiscing leo mi congue et Morbi non. Eu pellentesque hendrerit ligula suscipit felis tortor consequat dui ligula Sed. A.
    <br><br><br><br><br><br><br><br><br><br><br><br><br>
    Lorem ipsum dolor sit amet consectetuer consectetuer sagittis lorem Vestibulum In. Ipsum diam justo Curabitur dui amet risus auctor magnis sodales non. Nullam condimentum eleifend leo faucibus eros urna Vestibulum ante urna Morbi. Nullam Nam ac pharetra Sed rhoncus faucibus malesuada sollicitudin facilisis semper. Leo Nullam vitae hac congue auctor cursus platea congue volutpat eu. Malesuada risus Curabitur id Aliquam est malesuada ridiculus Vestibulum auctor.
    Augue natoque tellus eget ornare dis porttitor mattis Quisque congue velit. Curabitur sem vitae ante non amet mus Aliquam urna et cursus. Sociis ac nisl augue sed ultrices semper faucibus lorem neque Sed. Scelerisque Sed convallis Curabitur amet Aliquam Curabitur condimentum Ut pretium vitae. Ac ut wisi at adipiscing leo mi congue et Morbi non. Eu pellentesque hendrerit ligula suscipit felis tortor consequat dui ligula Sed. A.
    <br><br><br><br><br><br><br><br><br><br><br><br><br>
    Lorem ipsum dolor sit amet consectetuer consectetuer sagittis lorem Vestibulum In. Ipsum diam justo Curabitur dui amet risus auctor magnis sodales non. Nullam condimentum eleifend leo faucibus eros urna Vestibulum ante urna Morbi. Nullam Nam ac pharetra Sed rhoncus faucibus malesuada sollicitudin facilisis semper. Leo Nullam vitae hac congue auctor cursus platea congue volutpat eu. Malesuada risus Curabitur id Aliquam est malesuada ridiculus Vestibulum auctor.
    Augue natoque tellus eget ornare dis porttitor mattis Quisque congue velit. Curabitur sem vitae ante non amet mus Aliquam urna et cursus. Sociis ac nisl augue sed ultrices semper faucibus lorem neque Sed. Scelerisque Sed convallis Curabitur amet Aliquam Curabitur condimentum Ut pretium vitae. Ac ut wisi at adipiscing leo mi congue et Morbi non. Eu pellentesque hendrerit ligula suscipit felis tortor consequat dui ligula Sed. A.
    <br><br><br><br><br><br><br><br><br><br><br><br><br>
    Lorem ipsum dolor sit amet consectetuer consectetuer sagittis lorem Vestibulum In. Ipsum diam justo Curabitur dui amet risus auctor magnis sodales non. Nullam condimentum eleifend leo faucibus eros urna Vestibulum ante urna Morbi. Nullam Nam ac pharetra Sed rhoncus faucibus malesuada sollicitudin facilisis semper. Leo Nullam vitae hac congue auctor cursus platea congue volutpat eu. Malesuada risus Curabitur id Aliquam est malesuada ridiculus Vestibulum auctor.
    Augue natoque tellus eget ornare dis porttitor mattis Quisque congue velit. Curabitur sem vitae ante non amet mus Aliquam urna et cursus. Sociis ac nisl augue sed ultrices semper faucibus lorem neque Sed. Scelerisque Sed convallis Curabitur amet Aliquam Curabitur condimentum Ut pretium vitae. Ac ut wisi at adipiscing leo mi congue et Morbi non. Eu pellentesque hendrerit ligula suscipit felis tortor consequat dui ligula Sed. A.
    </div>
    
    <div class="right">
    <div>
    gfjdhslkhfdsjklgh jfdklsgh fdsgjklfdh jklfds hjgklds hfjgklfds hgjfkdls lhdjgkfd lshjgkfdl shgjkfdl shgjkfdls hgjkfd lshgjkfds hgjklfds klfdhjkgfds hgjkfds lhgjfdkls hgjfdks lhgjkfd lshgjkfds lhgjfdkls hgjkfd lshgjfds lhgjfdk lshgjkfd lshgjkfd slhgjfdkls hgj lshjkfdsl hgjkfds hgjfdkls hgjfklds hgjfd lshgjkfdls hgjfdkls hgjfds ldhgjfdk lshgjfd klshgjfdk lhgsjkhfdgjkösfdhgjkfs lfdhgjkfdlhgjkfd lshgjfdkls hgjfdkls hgjfdks lghjfdksl hgjfdks lhgjfd sghfjds hgjfd ks.
    </div>
    <div class="scrolldiv">
    ewrewrnmew,rme.,rm,.rqme.qwrm,w.nr.w,emt.nrmentmr,e.wntmr,e.wnt,mwe r.,ntmw,. nr,mew. nt,m.n rem,.tw n,mre.n tm,wre ntmr,e.w ntmr,e.w nt,m
    </div>
    </div>

</div>

Ich hoffe hier kann mir jemand helfen. Danke schonmal im Voraus.

Answer 1

Du kannst einen "Intersection Observer" einbauen um zu überwachen ob ein bestimmter Teil der Seite beim scrollen sichtbar ist. Wenn der Observer feststellt, dass das "scrolldiv" nicht mehr sichtbar ist, wird dem Element die CSS Klasse "fixed" hinzugefügt. Sobald die eigentliche Position das "scrolldiv" wieder im sichtbaren Bereich der Seite ist wird die Klasse wieder entfernt.

window.addEventListener("load", function () {
    const scrolldiv = document.querySelector(".scrolldiv");
    const observerOptions = {
        root: null,
        rootMargin: "0px",
        threshold: 0,
    };
    
    if (scrolldiv.classList.contains("position-fixed"))
        return;
        
    const observer = new IntersectionObserver((entries, observer) => {
        entries.forEach((entry) => {
            if (!entry.isIntersecting) {
                scrolldiv.classList.add("fixed");
            } else {
                scrolldiv.classList.remove("fixed");
            }
        });
    }, observerOptions);
    
    observer.observe(scrolldiv);
});

Für das Element mit der "position: fixed" Eigenschaft kannst du dann einen eigenen CSS Selektor schreiben um zu steuern wie es aussieht wenn es fixiert ist.

div.scrolldiv.fixed {
    position: fixed;
    top: 10;
    width: 300px; /* Breite des fixierten DIVs */
}

Answer 2

Das kannst du mit Javascript erreichen.

document.addEventListener('DOMContentLoaded', function() {
    var scrolldiv = document.querySelector('.scrolldiv');
    var dis = scrolldiv.offsetTop;
    var $window = window;
    
    $window.addEventListener('scroll', function() {
        if ($window.scrollY >= dis) {
            scrolldiv.classList.add('fixed');
        } else {
            scrolldiv.classList.remove('fixed');
        }
    });
});