Html Question posted in
Some basic documentation can be found here.

Html – How to fix text overlay using position sticky?

there is a page that contains information about the author. I’m trying to achieve the following result when scrolling the text: https://streamable.com/4cvcgq (This is a version of the application for iOS (made on Swift), I am making a web analogue).

Here is my HTML:

<div class="curator__info">
    <div class="curator__details">
        <h1 class="curator__name" v-text="curator.name" />
        <p class="curator__about" v-text="curator.about" />
    </div>
</div>

Here is my CSS:

.curator__info {
    position: absolute;
    height: 100%;
    bottom: 0;
    z-index: 2;
    padding: 2rem;
    flex-direction: column;
    justify-content: flex-end;
    overflow: hidden;
}
.curator__details {
    flex: auto;
    position: relative;
    flex: 0 1 80%;
    bottom: 50px;
    overflow-y: auto;
    padding-top: 55%;
}
.curator__name {
    margin-bottom: 1.5rem;
    position: sticky;
    top: -86%;
}

It seems ready, and it can be done without JS, but there is one single problem that I cannot solve, the text curator__about (description) fits under curator__name (curator’s name), here is the video:
https://streamable.com/ov2n2b

It is necessary to somehow prevent the texts from overlapping each other, a simple solution would be to give a background-color to the curator__name element, and then this overlapping text will not be visible, but this is not what we need. I will be glad if you can help)

Here is a link to the site, you can look by clicking on the photo or name:
Tutorial:

Tags:

2

Answers


  1. 0

    We need to tweak around with the height of the .curator__about, and then add a overflow-y: scroll; to it, to make it scrollable, like so:

    .curator__about {
    height: 230px;
    overflow-y: scroll;
/*also, you can hide the scrollbar, but it's not visible on mobile */
    -ms-overflow-style: none; 
    scrollbar-width: none;  
}

    and then tweak around with the top, or completely remove the top: -86%; from the .curator__name, and it will look and behave properly.

    Login or Signup to reply.
  2. 0

    For now* I think the way to solve this is to use a faux-crop to avoid breaking page scroll (causes more problems than it solves – e.g. minimal-ui on iOS)

    The basic idea is to have a cropped copy of the main image inside the info block and place the about text behind it

    *You might be able to solve it using animation-timeline – but browser support is not great at the moment

    /**
 * CSSVars 
 */

html {
  --info-offset: 80vw;
  --crop-height: 10rem;
  --name-height: 4rem;
  --grad-height: 20vw;
  --padding: 1.5rem;
  
  --color-back: black;
  --color-text: #fff057;
  --color-none: transparent;
}


/**
 * crop styling
 */

.faux-crop {
  position: fixed;
  inset: 0 0 auto;
  overflow: hidden;
  height: var(--crop-height);
  outline: 1px dashed red;
}

.curator__photo {
  position: fixed;
  inset: 0 0 auto;
}

.curator__info {
  margin: var(--info-offset) 0 0;
  isolation: isolate;
}

.curator__name {
  position: sticky;
  top: calc(var(--crop-height) - var(--name-height));
  height: var(--name-height);
  padding-inline: var(--padding);
}

.curator__about {
  z-index: -1;
  padding: var(--padding);
}


/**
 * gradient / darken effect 
 */

.curator__name::before {
  content: '';
  position: absolute;
  inset: calc(var(--grad-height) * -1) 0 0;
  height: calc(var(--grad-height) + var(--name-height));
  background-image: linear-gradient(to top, var(--color-back), var(--color-none));
  z-index: -1;
}

.curator__about {
  background-color: var(--color-back);
}


/**
 * base styling 
 */

* {
  box-sizing: border-box;
  position: relative;
  margin: 0;
}

body {
  margin: 0;
  font-family: serif;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  background-color: var(--color-back);
  color: var(--color-text);
}

img {
  width: 100%;
  display: block;
}

.curator__name {
  font-size: 2.5rem;
  font-weight: 400;
  font-style: italic;
}
    <section class="curator">
  <div class="curator__close">
    <!-- removed -->
  </div>

  <div class="curator__photo"><img src="https://app.rovr.live/assets/storage/ProgramManager/113/photo.ae17206185c4e28822552cf2e62baa49.png" alt="Pete Herbert"></div>

  <div class="curator__info">

    <!-- 
        Faux Crop - using a cliped version of the top image
      -->
    <div class="faux-crop">
      <img src="https://app.rovr.live/assets/storage/ProgramManager/113/photo.ae17206185c4e28822552cf2e62baa49.png" alt="Pete Herbert">
    </div>


    <div class="curator__details">
      <h1 class="curator__name">Pete Herbert</h1>
      <p class="curator__about">
        UK-based DJ/Producer/Remixer Pete Herbert's musical career spans over and beyond the last two decades since he set up and co-ran the infamous Atlas Records Shop in Soho in the mid-90s. As a DJ, Pete has since been plying his trade on dance floors worldwide,
        joining the dots musically with his unique style, taking in Disco, Balearic, House, and all its mutations. Or similarly soundtracking sunsets and more laid-back affairs with his take on music for swimming pools, a style he has been pushing in
        his long-running radio show/stream site and record label of the same name. Pete has held residencies and played guest spots at many of London's seminal dance institutions at that time, such as Fabric, Ministry Of Sound, 333, The Blue Note, and
        Sancho Panza at Notting Hill Carnival, as well as residencies in Paris, Madrid, Bali, and Marseille. Pete also regularly plays festivals such as Electric Elephant, Garden, Exit, Mareh, and at Lovebox, Festival No.6, Corona Sunsets, Masked Ball,
        and Campo Sancho in the UK. In the last 12 years, Pete has spent much of the winter months based in Bali, including just recently, two years permanently as Music Director at Potato Head Beach Club and, from there, playing regularly in nearby spots
        like Jakarta, Cambodia, Vietnam, and Singapore. When not DJing, Pete can be found in the studio working on various music projects. Pete has produced and collaborated on over 300 music releases and projects and Remixed artists, including Royksopp,
        Roots Manuva, Grace Jones, Daniele Baldelli, Cantoma, Belle &amp; Sebastian, The Orielles, Kylie, Tensnake, and more. In Addition, he has been working solo or collaborating as Reverso 68 and Frontera with Phil Mison, Optimo/Optimus, Challenge,
        Cuica, LSB, Bakazou, and more recently on various projects, including Disco Deviance, File Under Disco, Paradise Row with Dicky Trisco. Pete is currently working on "New Music for Swimming Pools" releases with the Two Tribes/Campfire venue and
        label in London's Kings Cross alongside Leo Zero and Justin Deighton.</p>
    </div>

    <div class="curator__links">
      <!-- removed -->
    </div>
  </div>
</section>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search