bugfix> javascript > 投稿

cssとhtmlのみを使用して、ページの残りの部分を下にスクロールする前に、内側のdiv(赤いdivをオーバーレイ)を完全にスクロールアウトすることは可能ですか?基本的に、後ろのdivをフリーズしながらオーバーレイスクロールがcssでのみ可能かどうか疑問に思っていますか?次に、赤いdivが消えたら、背景のスクロールを解除して続行します。ここのこのサイトに似ています:https://humaan.com/ 。それとも、何らかのJavaScriptを使用する必要がありますか?

.headervideo{background-color:blue; width:100%; height:900px;}
.headerbreak{width:100%; height:300px;}
.headervideo #inner-box {
  background-color: red;
  height: 90%;
  width: 100%;
}

<div class="headervideo">
  <div id="inner-box"></div>
</div>
<div class="headerbreak">
<div>

回答 2 件
  • position:sticky これを概算できます:

    .headervideo {
      background: url(https://picsum.photos/id/1064/800/800) center/cover;
      height: 100vh;
      position: relative;
      z-index: 2;
    }
    .nextsection {
      background: url(https://picsum.photos/id/107/800/800) center/cover;
      height: 100vh;
      margin-top: -100vh;
      position: sticky;
      top: 0;
    }
    .container {
      height:200vh;
    }
    body {
      margin: 0;
    }
    
    
    <div class="container">
      <div class="headervideo"></div>
      <div class="nextsection"></div>
    </div>
    <div style="height:150vh"> more content later </div>
    
    

  • CSSを使用すると、ホバーイベントを使用して特定のスクロール位置(たとえば、赤いdivの直後)を検出できますが、これは携帯電話などのタッチのみのデバイスでは機能しません。また、カーソルが画面上のどこにでもある可能性があるため、信頼性が低くなります。

    JavaScriptを使用してスクロール位置を検出する必要があります。ただし、JavaScriptを使用して、異なるスクロール位置にクラスを追加し、残りをCSSで実行することしかできませんでした。簡単な例を次に示します。

    var red = document.querySelector('#inner-box');
    var begin = red.scrollTop;
    var end = begin + red.clientHeight;
    console.log(begin)
    document.body.classList.add('in');
    window.addEventListener("scroll", (event) => {
      if(this.scrollY < begin) {
        document.body.classList.add('before');
        document.body.classList.remove('after');
        document.body.classList.remove('in');
      } else if(end < this.scrollY) {
        document.body.classList.remove('before');
        document.body.classList.add('after');
        document.body.classList.remove('in');
      } else {
        document.body.classList.remove('before');
        document.body.classList.remove('after');
        document.body.classList.add('in');
      };
    });
    
    
    .headervideo {
      background-color: blue;
      width: 100%;
      height: 900px;
    }
    .headerbreak {
      width: 100%;
      height: 300px;
    }
    .headervideo #inner-box {
      background-color: red;
      height: 90%;
      width: 100%;
    }
    body {
    }
    body.before {
      background-color: lightgreen;
    }
    body.in {
      background-color: lightpink;
    }
    body.after {
      background-color: lightblue;
    }
    
    
    <body>
      <div class="headervideo">
        <div id="inner-box"></div>
      </div>
      <div class="headerbreak">
        <div>
    </body>
    
    

あなたの答え