Jak przykleić DIVa zawsze do spodu strony ,ale tylko wewnątrz swojego rodzica

0

Witam
Używam Sticky-kit do uzyskania efektu przyklejonego diva do prawej strony strony ,który zawsze jest widoczny i scrolluje się za użytkownikiem, ale tylko w obrębie swojego rodzica.
Na mobilnej wersji strony chciałbym uzyskać taki sam efekt, ale z divem przyklejony do dolnej krawędzi okna ,ale tylko w obrębie swojego rodzca. Można to łatwo zrobić nadając mu wartości fixed i bottom 0px i w JS odejmować mu klasę z właściwościami position fixed i nadając position: relative ,gdy użytkownik zescrolluje do konca rodzica ,ale wygląda to nienajlepiej.
Może komuś przychodzi jakiś pomysł jak zrobić to ładniej lub zna jakiś skrypt do jQuery który rozwiązuje taki problem. Niestety w Sticky-kit nie znalazłem takiej opcji.

0 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body {
            margin: 0;
        }

        h1,
        h2,
        h3 {
            margin: 0;
            text-align: center;
        }

        h1 {
            color: #e4e932;
        }

        h2 {
            color: #be0027
        }

        h3 {
            line-height: 70px;
            color: #0099cc;
        }

        section {
            height: 100vh;
        }

        .one {
            background-color: #be0027;
        }

        .two {
            background-color: #e4e932;
        }

        .container {
            width: 200px;
            height: 300px;
            background-color: #0099cc;
            margin: 0 auto;
        }

        .inside {
            width: 200px;
            height: 70px;
            background-color: #caccd1;
        }
    </style>
</head>

<body>
    <section class="one">
        <h1>section 1</h1>
    </section>
    <section class="two">
        <h2>section 2</h2>
        <div class="container">
            <div class="inside">
                <h3>sticky inside</h3>
            </div>
        </div>
    </section>
</body>
<script>
    const container = document.querySelector(".container");
    const inside = document.querySelector(".inside");
    const insideH = inside.offsetHeight;

    const winH = window.innerHeight;

    window.onscroll = function (e) {
        let containerPos = container.getBoundingClientRect();
        if (winH >= containerPos.top + insideH) {
            inside.style.position = "fixed";
            inside.style.bottom = 0;
        } else {
            inside.style.position = "static";
        }
        if (winH >= containerPos.bottom) {
            container.style.position = "relative";
            inside.style.position = "absolute";
            inside.style.bottom = 0;
        }
    }
</script>

</html>
0

Możesz spróbować użyć position: sticky;

1 użytkowników online, w tym zalogowanych: 0, gości: 1