Прокручиваемый липкий элемент рядом с контейнером - PullRequest
Новая
       9

Прокручиваемый липкий элемент рядом с контейнером

1 голос
/ 20 января 2020

У меня были проблемы с сохранением липкого div, содержащего текст, который вращается на 90 градусов внутри соседнего контейнера. Я пытаюсь выполнить sh то, что на изображении ниже.

img of sticky top of container

Проблема в том, что я пытался правильно выровнять его, чтобы остаться внутри контейнера и прокручивайте правильно, но липкий div, содержащий текст, вытекает из его контейнера. См. Изображение ниже.

img of sticky flowing out of container

/* This is the css*/    
.work-section {
    padding-bottom: 20px;
}

.work-title {
    position: -webkit-sticky;
    position: sticky;
    z-index: 10;
    top: 370px;
    transform: rotate(-90deg);
    width: fit-content;
    left: 80px;
    transform-origin: 0 0 0px;
}

.tt {
    position: relative;
    width: fit-content;
}

.test-img {
    width: 100%;
}

Вот JSfiddle: https://jsfiddle.net/Ratsuns/mz08oew3/17/

Ответы [ 3 ]

1 голос
/ 21 января 2020

сделал три варианта, с какими-то результатами. У каждого есть свои идеи и ограничения.

Первый , модифицированный Ответ Райана Нгиема

Основное отличие - сделано tt class авто квадрат и перемещен заголовок к тексту слева. Основное ограничение - заголовок не go ниже нижнего края контейнера. 

body {
  color: white !important;
  background-color: black !important;
}

/* Work Section */

.work-section {
  padding-bottom: 20px;
}
.container {
  position: relative;
}
.abs-work {
  position: absolute;
  width: 100%;
  top:0;
  bottom:0;
  left: -1%;
}
.work-title {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  transform: rotate(-90deg);
  width: fit-content;
}

.tt {
  position: relative;
  width: fit-content;
  padding-bottom: 100%;
}

.test-img {
  width: 100%;
}
<!doctype html>

<html lang="en">

<head>
    <meta charset="utf-8">

    <title></title>

    <link rel="stylesheet" href="styles-abs.css">

</head>

<body>

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

    <head>
        <title>Random-Code</title>
        <!-- Required meta tags -->
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
        <!-- bootstrap -->
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
            integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    </head>

    <body>
        <section>
            <div style="height: 150px"></div>
        </section>
        <section id="work-section1">
            <div class="container">
                <div class="abs-work">
                    <div class="work-title">
                        <div class="tt">
                            <h2>Recent Work</h2>
                        </div>
                    </div>
                </div>
                <div>
                    <div class="row work-section">
                        <div class="col-md-6">
                            <h3>Tuml</h3>
                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi exercitationem, aperiam
                                nisi
                                dolor harum corrupti necessitatibus dolore dolores nesciunt voluptate iste nobis amet
                                omnis
                                deserunt minima officiis, facere quisquam eius
                                fugiat. Recusandae at molestiae voluptate quasi aliquid? Mollitia animi, dolore fuga
                                impedit
                                rerum ratione minus quas enim natus aperiam nihil!
                            </p>
                            <button type="button" class="btn btn-outline-dark align-self-end">Dark</button>
                        </div>
                        <div class="col-md-5 offset-md-1 align-self-center">
                            <figure>
                                <img class="test-img" src="https://i.ibb.co/rH7c4mM/9000.gif" alt="9000" border="0">

                            </figure>
                        </div>
                    </div>
                    <div class="row work-section">
                        <div class="col-md-6">
                            <h3>Tuml</h3>
                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi exercitationem, aperiam
                                nisi
                                dolor harum corrupti necessitatibus dolore dolores nesciunt voluptate iste nobis amet
                                omnis
                                deserunt minima officiis, facere quisquam eius
                                fugiat. Recusandae at molestiae voluptate quasi aliquid? Mollitia animi, dolore fuga
                                impedit
                                rerum ratione minus quas enim natus aperiam nihil!
                            </p>
                            <button type="button" class="btn btn-outline-dark align-self-end">Dark</button>
                        </div>
                        <div class="col-md-5 offset-md-1 align-self-center">
                            <figure>
                                <img class="test-img" src="https://i.ibb.co/rH7c4mM/9000.gif" alt="9000" border="0">
                            </figure>
                        </div>
                    </div>
                    <div class="row work-section">
                        <div class="col-md-6">
                            <h3>Tuml</h3>
                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi exercitationem, aperiam
                                nisi
                                dolor harum corrupti necessitatibus dolore dolores nesciunt voluptate iste nobis amet
                                omnis
                                deserunt minima officiis, facere quisquam eius
                                fugiat. Recusandae at molestiae voluptate quasi aliquid? Mollitia animi, dolore fuga
                                impedit
                                rerum ratione minus quas enim natus aperiam nihil!
                            </p>
                            <button type="button" class="btn btn-outline-dark align-self-end">Dark</button>
                        </div>
                        <div class="col-md-5 offset-md-1 align-self-center">
                            <figure>
                                <img class="test-img" src="https://i.ibb.co/rH7c4mM/9000.gif" alt="9000" border="0">
                            </figure>
                        </div>
                    </div>
                    <div class="row work-section">
                        <div class="col-md-6">
                            <h3>Tuml</h3>
                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi exercitationem, aperiam
                                nisi
                                dolor harum corrupti necessitatibus dolore dolores nesciunt voluptate iste nobis amet
                                omnis
                                deserunt minima officiis, facere quisquam eius
                                fugiat. Recusandae at molestiae voluptate quasi aliquid? Mollitia animi, dolore fuga
                                impedit
                                rerum ratione minus quas enim natus aperiam nihil!
                            </p>
                            <button type="button" class="btn btn-outline-dark align-self-end">Dark</button>
                        </div>
                        <div class="col-md-5 offset-md-1 align-self-center">
                            <figure>
                                <img class="test-img" src="https://i.ibb.co/rH7c4mM/9000.gif" alt="9000" border="0">
                            </figure>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <section>
            <div style="height: 1800px"></div>
        </section>
    </body>
    <!-- Scripts Jquery Bootstrap -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"
        integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js "
        integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo "
        crossorigin="anonymous "></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js "
        integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6 "
        crossorigin="anonymous "></script>

    </html>


    <script src="js/scripts.js"></script>

</body>

</html>

Второй вариант, используется display: flex. Заголовок идет ниже нижнего края контейнера.

Основное ограничение - <div> с шириной заголовка, которая имеет значение, и шире с более длинным заголовком. 

body {
    color: white !important;
    background-color: black !important;
  }
  
  /* Work Section */
  
  .container {
      position: relative;
      display: flex;
  }
  
  .work-section {
    padding-bottom: 20px;
  }
  
  .work-title {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    transform: rotate(-90deg);
    transform-origin: 90% 90%;
    white-space: nowrap;
  }
  
  .tt {
    position: relative;
    width: fit-content;
  }
  
  .test-img {
    width: 100%;
  }
<!doctype html>

<html lang="en">

<head>
    <meta charset="utf-8">

    <title></title>

    <link rel="stylesheet" href="styles-flex.css">

</head>

<body>

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

    <head>
        <title>Random-Code</title>
        <!-- Required meta tags -->
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
        <!-- bootstrap -->
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
            integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    </head>

    <body>
        <section>
            <div style="height: 150px"></div>
        </section>
        <section id="work-section1">
            <div class="container">
                <div>
                    <div class="work-title">
                        <div class="tt">
                            <h2>Recent Work</h2>
                        </div>
                    </div>
                </div>
                <div>
                    <div class="row work-section">
                        <div class="col-md-6">
                            <h3>Tuml</h3>
                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi exercitationem, aperiam
                                nisi
                                dolor harum corrupti necessitatibus dolore dolores nesciunt voluptate iste nobis amet
                                omnis
                                deserunt minima officiis, facere quisquam eius
                                fugiat. Recusandae at molestiae voluptate quasi aliquid? Mollitia animi, dolore fuga
                                impedit
                                rerum ratione minus quas enim natus aperiam nihil!
                            </p>
                            <button type="button" class="btn btn-outline-dark align-self-end">Dark</button>
                        </div>
                        <div class="col-md-5 offset-md-1 align-self-center">
                            <figure>
                                <img class="test-img" src="https://i.ibb.co/rH7c4mM/9000.gif" alt="9000" border="0">

                            </figure>
                        </div>
                    </div>
                    <div class="row work-section">
                        <div class="col-md-6">
                            <h3>Tuml</h3>
                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi exercitationem, aperiam
                                nisi
                                dolor harum corrupti necessitatibus dolore dolores nesciunt voluptate iste nobis amet
                                omnis
                                deserunt minima officiis, facere quisquam eius
                                fugiat. Recusandae at molestiae voluptate quasi aliquid? Mollitia animi, dolore fuga
                                impedit
                                rerum ratione minus quas enim natus aperiam nihil!
                            </p>
                            <button type="button" class="btn btn-outline-dark align-self-end">Dark</button>
                        </div>
                        <div class="col-md-5 offset-md-1 align-self-center">
                            <figure>
                                <img class="test-img" src="https://i.ibb.co/rH7c4mM/9000.gif" alt="9000" border="0">
                            </figure>
                        </div>
                    </div>
                    <div class="row work-section">
                        <div class="col-md-6">
                            <h3>Tuml</h3>
                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi exercitationem, aperiam
                                nisi
                                dolor harum corrupti necessitatibus dolore dolores nesciunt voluptate iste nobis amet
                                omnis
                                deserunt minima officiis, facere quisquam eius
                                fugiat. Recusandae at molestiae voluptate quasi aliquid? Mollitia animi, dolore fuga
                                impedit
                                rerum ratione minus quas enim natus aperiam nihil!
                            </p>
                            <button type="button" class="btn btn-outline-dark align-self-end">Dark</button>
                        </div>
                        <div class="col-md-5 offset-md-1 align-self-center">
                            <figure>
                                <img class="test-img" src="https://i.ibb.co/rH7c4mM/9000.gif" alt="9000" border="0">
                            </figure>
                        </div>
                    </div>
                    <div class="row work-section">
                        <div class="col-md-6">
                            <h3>Tuml</h3>
                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi exercitationem, aperiam
                                nisi
                                dolor harum corrupti necessitatibus dolore dolores nesciunt voluptate iste nobis amet
                                omnis
                                deserunt minima officiis, facere quisquam eius
                                fugiat. Recusandae at molestiae voluptate quasi aliquid? Mollitia animi, dolore fuga
                                impedit
                                rerum ratione minus quas enim natus aperiam nihil!
                            </p>
                            <button type="button" class="btn btn-outline-dark align-self-end">Dark</button>
                        </div>
                        <div class="col-md-5 offset-md-1 align-self-center">
                            <figure>
                                <img class="test-img" src="https://i.ibb.co/rH7c4mM/9000.gif" alt="9000" border="0">
                            </figure>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <section>
            <div style="height: 1800px"></div>
        </section>
    </body>
    <!-- Scripts Jquery Bootstrap -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"
        integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js "
        integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo "
        crossorigin="anonymous "></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js "
        integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6 "
        crossorigin="anonymous "></script>

    </html>


    <script src="js/scripts.js"></script>

</body>

</html>

Третий вариант смешной, просто для идей. 

body {
    color: white !important;
    background-color: black !important;
  }
  
  /* Work Section */
  
  .container {
      display: flex;
  }
  
  .work-section {
    padding-bottom: 20px;
  }
  
  .test-img {
    width: 100%;
  }

  .lala2 {
      display: flex;
      position: sticky;
      top: 0;
      height: fit-content;
  }

  .lala {
    display: flex;
    flex-direction: column-reverse;
    margin-bottom: auto;
    margin-right: 8px;
  }

  .lala div {
      transform: rotate(-90deg);
      font-size: 2rem;
      display: flex;
    }
    
    .lala div span {
        margin-left: auto;
        margin-right: auto;
    }
    
<!doctype html>

<html lang="en">

<head>
    <meta charset="utf-8">

    <title></title>

    <link rel="stylesheet" href="styles.css">

</head>

<body>

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

    <head>
        <title>Random-Code</title>
        <!-- Required meta tags -->
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
        <!-- bootstrap -->
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
            integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    </head>

    <body>
        <section>
            <div style="height: 150px"></div>
        </section>
        <section id="work-section1">
            <div class="container">
                <div class="lala2">
                    <div class="lala">
                        <div><span>R</span></div>
                        <div><span>e</span></div>
                        <div><span>c</span></div>
                        <div><span>e</span></div>
                        <div><span>n</span></div>
                        <div><span>t</span></div>
                        <div><span>&#8199</span></div>
                        <div><span>W</span></div>
                        <div><span>o</span></div>
                        <div><span>r</span></div>
                        <div><span>k</span></div>
                    </div>
                </div>
                <div>
                    <div class="row work-section">
                        <div class="col-md-6">
                            <h3>Tuml</h3>
                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi exercitationem, aperiam
                                nisi
                                dolor harum corrupti necessitatibus dolore dolores nesciunt voluptate iste nobis amet
                                omnis
                                deserunt minima officiis, facere quisquam eius
                                fugiat. Recusandae at molestiae voluptate quasi aliquid? Mollitia animi, dolore fuga
                                impedit
                                rerum ratione minus quas enim natus aperiam nihil!
                            </p>
                            <button type="button" class="btn btn-outline-dark align-self-end">Dark</button>
                        </div>
                        <div class="col-md-5 offset-md-1 align-self-center">
                            <figure>
                                <img class="test-img" src="https://i.ibb.co/rH7c4mM/9000.gif" alt="9000" border="0">

                            </figure>
                        </div>
                    </div>
                    <div class="row work-section">
                        <div class="col-md-6">
                            <h3>Tuml</h3>
                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi exercitationem, aperiam
                                nisi
                                dolor harum corrupti necessitatibus dolore dolores nesciunt voluptate iste nobis amet
                                omnis
                                deserunt minima officiis, facere quisquam eius
                                fugiat. Recusandae at molestiae voluptate quasi aliquid? Mollitia animi, dolore fuga
                                impedit
                                rerum ratione minus quas enim natus aperiam nihil!
                            </p>
                            <button type="button" class="btn btn-outline-dark align-self-end">Dark</button>
                        </div>
                        <div class="col-md-5 offset-md-1 align-self-center">
                            <figure>
                                <img class="test-img" src="https://i.ibb.co/rH7c4mM/9000.gif" alt="9000" border="0">
                            </figure>
                        </div>
                    </div>
                    <div class="row work-section">
                        <div class="col-md-6">
                            <h3>Tuml</h3>
                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi exercitationem, aperiam
                                nisi
                                dolor harum corrupti necessitatibus dolore dolores nesciunt voluptate iste nobis amet
                                omnis
                                deserunt minima officiis, facere quisquam eius
                                fugiat. Recusandae at molestiae voluptate quasi aliquid? Mollitia animi, dolore fuga
                                impedit
                                rerum ratione minus quas enim natus aperiam nihil!
                            </p>
                            <button type="button" class="btn btn-outline-dark align-self-end">Dark</button>
                        </div>
                        <div class="col-md-5 offset-md-1 align-self-center">
                            <figure>
                                <img class="test-img" src="https://i.ibb.co/rH7c4mM/9000.gif" alt="9000" border="0">
                            </figure>
                        </div>
                    </div>
                    <div class="row work-section">
                        <div class="col-md-6">
                            <h3>Tuml</h3>
                            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi exercitationem, aperiam
                                nisi
                                dolor harum corrupti necessitatibus dolore dolores nesciunt voluptate iste nobis amet
                                omnis
                                deserunt minima officiis, facere quisquam eius
                                fugiat. Recusandae at molestiae voluptate quasi aliquid? Mollitia animi, dolore fuga
                                impedit
                                rerum ratione minus quas enim natus aperiam nihil!
                            </p>
                            <button type="button" class="btn btn-outline-dark align-self-end">Dark</button>
                        </div>
                        <div class="col-md-5 offset-md-1 align-self-center">
                            <figure>
                                <img class="test-img" src="https://i.ibb.co/rH7c4mM/9000.gif" alt="9000" border="0">
                            </figure>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <section>
            <div style="height: 1800px"></div>
        </section>
    </body>
    <!-- Scripts Jquery Bootstrap -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"
        integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js "
        integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo "
        crossorigin="anonymous "></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js "
        integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6 "
        crossorigin="anonymous "></script>

    </html>


    <script src="js/scripts.js"></script>

</body>

</html>
0 голосов
/ 20 января 2020 
.work-title {
  position: -webkit-sticky;
  position: sticky;
  z-index: 10;
  top: 100px;
  transform: rotate(-90deg);
  width: fit-content;
  margin-left: -120px;
  transform-origin: 0, 0, 0px;
}
0 голосов
/ 20 января 2020

У вас должен быть родительский div с position: absolute; полной высотой container div.

Давайте посмотрим мой код: 

.container {
  position: relative;
}
.abs-work {
  position: absolute;
  width: 100%;
  top:0;
  bottom:0;
}
.work-title {
  position: -webkit-sticky;
  position: sticky;
  z-index: 10;
  top: 0;
  transform: rotate(-90deg);
  width: 200px;
  height: 200px; 
  left: 80px;
  transform-origin: 0, 0, 0px;
}

.work-title должен быть квадратом, когда Вы используете transform: rotate(-90deg);

Это демо

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...