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

Odpowiedz Nowy wątek
2018-12-31 13:37
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.

Pozostało 580 znaków

2018-12-31 22:55
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>
edytowany 2x, ostatnio: pablop76, 2018-12-31 23:04

Pozostało 580 znaków

2019-01-02 15:19
0

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

Pozostało 580 znaków

Odpowiedz
Liczba odpowiedzi na stronę

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