html - Position: sticky is too glitchy on mobile view - Stack Overflow

admin管理员组

文章数量:1399929

I've been trying to put a cool scrolling animation, and it perfectly works for desktop view, but in mobile, the position sticky is not working properly, sometimes its glitching upwards, sometimes downwards

Tried adding top value in CSS, tried redoing it entirely

I have 2 divs (.phoneholder2, .textholder) inside a parent container (#topdiv) with position: sticky.

there is a phone which is partially visible in the first slide, when the user scrolls down, it scales down a bit, then sticks to the screen, and textholder text animates on scrolling besides it

I dont want to use gsap pin because that too is glitchy

The animation works smooth and perfect for desktop

When I slowly scroll down, the phone first gets stuck over the top of the viewport (even though top value is assigned), then it sometimes glitches to its correct position

It seems like there is some issue with position sticky itself, as its not working anywhere in the website as intended

function Top() {

  const [isMobile, setIsMobile] = useState(window.innerWidth < 768);


  useGSAP(() => {
    const tl = gsap.timeline({
      scrollTrigger: {
        trigger: ".phoneholder1",
        start: "top 40%",
        end: "top top",
        scrub: true,
        markers: false,
      },
    });

    tl.to(".phoneholder1", {
      scale: 0.6,
    });

    // tl.to(".phoneholder2", {
    //   scale: 0.6,
    // });

    const disappearTl = gsap.timeline({
      scrollTrigger: {
        trigger: ".phoneholder1",
        start: "top top",
        end: "top -500%",
        scrub: true,
      },
    });

    // Animate phones disappearing

  
  return (
    <div id="topdiv">
      <Stickers />
      <h1 >Find Your <br className="mobile"/> Perfect</h1>

      <span className="ct">

      {<ChangingText />}
      </span>
      {/* {isMobile && <div className="ct_container">
        <ChangingText />
        </div>} */}
     <div className="phoneholder1">
        <img id="phone1" src="/homescreen1.webp" alt="Homescreen 1" />
        <img id="phone2" src="/homescreen2.webp" alt="Homescreen 2" />
        <img id="phone3" src="/homescreen3.webp" alt="Homescreen 3" />
        <img id="phone4" src="/homescreen4.webp" alt="Homescreen 4" />
      </div>

{
  isMobile && <div className="textholder2">
          <h2 id="rightFirstInfo">Sharing Flats,</h2>
          <h2 id="rightSecondInfo">Roommates,</h2>
          <h2 id="rightThirdInfo">Private Flats</h2>


          <div className="th_bottom">
          <p id="rightFirstInfo">
            Find Flats with Amenities That Suit Your Lifestyle.
          </p>
          <p id="rightSecondInfo">
            Discover Compatible Roommates for a Harmonious Living Experience
          </p>
          <p id="rightThirdInfo">
            Find bachelor-only flats listed by verified partners!
          </p>
          <button className="tbutton b23" id="rightThirdInfo">Download now</button>
          </div>
          </div>
}
      

  {/* For laptop screens */}
   {!isMobile &&  <div className="textholder1">
        <div className="leftHeading">
          <h2 id="leftFirstHeading">Sharing Flats,</h2>
          <h2 id="leftSecondHeading">Roommates,</h2>
          <h2 id="leftThirdHeading">Private Flats</h2>
        </div>

        {/* <div className="leftHeading2 mobile">
          <h2 id="rightFirstInfo">Sharing Flats,</h2>
          <h2 id="rightSecondInfo">Roommates,</h2>
          <h2 id="rightThirdInfo">Private Flats</h2>
        </div> */}


        <div className="rightheading">
          <p id="rightFirstInfo">
            Find Flats with Amenities That Suit Your Lifestyle.
          </p>
          <p id="rightSecondInfo">
            Discover Compatible Roommates for a Harmonious Living Experience
          </p>
          <p id="rightThirdInfo">
            Find bachelor-only flats listed by verified partners!
          </p>
          <button className="tbutton b23" id="rightThirdInfo">Download now</button>
        </div>
        <div className="circles hideonmobile">
          <img className="circle" id="thirdCircleAnimation" src="/firstcircle.webp"/>
          <img className="circle" id="secondCircleAnimation" src="/secondcircle.webp"/>
          <img className="circle" id="firstCircleAnimation" src="/thirdcircle.webp"/>
        </div>
      </div>}
    </div>
  );
}

export default Top;

CSS mobile

@media screen and (max-width: 800px) {

    .hideonmobile, .hideonmobile h2, .hideonmobile p, .hideonmobile img, .hideonmobile div{
      display: none !important;
    }

    .bg{
      width: 100%;
    }
  
    .mobile{
      display: block;
    }

    #topdiv{
        padding: 0% !important;
        margin: 0% !important;
        top: 0%;
        height: 700vh !important; 
        position: relative; 
        z-index: 1;
        padding-top: 20vh;
    }

    #topdiv h1{
      font-size: 3em;
      margin-block: 220px;
      text-align: center;
    }
      
    .phoneholder1 {
      /* position: sticky;
      top:50%;
      z-index: 4;
      height: 100vh;
      width: 50vw;
      display: flex;
      flex-direction: column;
      align-items: center;
      display: none; */

      position: sticky;
      top: 32%;
      background-color: aliceblue;
      height: max-content;
      width: 100%;
  }


  .ct_container{
    position: absolute;
    height: 20vh !important;
  }

  .phoneholder1 img{
    scale: 1.2;
    height: 120vh;
    margin-block: -200px ;
    object-fit: cover;
    overflow: hidden;


  }
  

  .textholder2{
    position: sticky;
    top: 20%;
    width: 50%;
    display: flex;
    align-content: center;
  
  }

  .textholder2 h2{
    position: absolute;
    transform: translateY(-70px);
    width: 100%;
    text-align: center;
  }
   

  .th_bottom{
    width: 100vw;
    background-color: aqua;
    height: max-content;
    margin-top: 65vh;
  }

  .th_bottom p{
    width: 100%;
    text-align: center;
    position: absolute;
  }

  .b23{
    width: 100%;
    font-size: large;
    border-radius: 20px;
  }

  .changingtext h1{
    margin-top: 0% !important;
  }

  .ct{
    padding: 20px;
    transform: translateY(-150px);
    width: 100%;
    height: 20px !important;   
  }
}

body{
    background-color: black;
    color: white;
    padding: 0%;
    margin: 0%;
    font-family: Arial, Helvetica, sans-serif;
}

.bg{
  /* background-color: rgb(219, 219, 219) !important; */
  margin: 0% !important;
}

.mobile{
  display: none;
}

#topdiv{
    display: flex;
    flex-direction: column;
    width: 100%;
    align-items: center;
    padding-top: 190px;
    background-color: rgb(0, 0, 0);
    height: 700vh;
    position: relative;
    z-index: 1;
}

#topdiv h1{
    font-size: 4em;
    z-index: 2;
    margin-block: 0px;
}

.phoneholder1{
    top: -100px;
    /* background-color: red; */
    width: 100%;
    height: 100vh;
    position: sticky;
    display: flex;
    flex-direction: row;
    z-index: 1;
}

.leftHeading{
  position: absolute;
}

.phoneholder1 img{
    object-fit: contain;
    position: absolute;
    width: 100%;
    height: auto;
}


  .textholder1{
    z-index: 0;
    position: sticky;
    top: 5vh;
    width: 100%;
    height: 100vh;
    justify-content: center;
    align-items: center;
    align-content: center;
    justify-items: center;
    overflow-x: hidden;
  }

  .leftHeading{
    /* background-color: rgb(64, 106, 106); */
    padding-left: 10%;
    font-size: 2em;
    transform: translateY(-50%);
    position: absolute;
  }

  .rightheading{
    width: max-content;
    align-self: flex-end;
    justify-self: flex-end;
    padding: 10px;
    width: 400px;
    margin-right: 20px;
    z-index: -1;
  }

  .rightheading p{
    position: absolute;
    font-size: 2em;
    width: 300px;
    transform: translateY(-100%);
  }

  .leftHeading h2{
    margin-block: 0px;
  }

  #leftFirstHeading{
    opacity: 0.7;
  }
  

  .tbutton{
    border: none;
    padding: 10px;
    transform: translateY(90px);
  }

本文标签： htmlPosition sticky is too glitchy on mobile viewStack Overflow