• Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

JavaScript Sticky

hello everyone,

i have written a page with a video sync on scrolling but i'd like to get my sections sticky until the next one

  • i followed this tutorial : https://www.youtube.com/watch?v=HiegEfkenXA and used his sticky function but it doesn't work and I don't understand why...
  • And then do you know how I can stop that for my next (big) section ? where its written in comment section 2 - previ in the hilt part, I'd like to go on another style and background but I don't really know how to indicate that the video need to stop display when meeting this (big) section 2 - previous.
  • I used also the selector section in my script (in the html part), can it be a problem if I need to do other sections on the page that will not be linked to this ? (I supposed that I can use class...)

HTML

HTML:
<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Offres</title>
    <link rel="stylesheet" href="/pages/Offres.css">

    <link href="https://fonts.googleapis.com/icon?family=Material+Icons"
    rel="stylesheet"> 
    <script src="https://kit.fontawesome.com/811bffdae6.js" crossorigin="anonymous"></script>
    
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
  </head>   
  <body>
  <!-- Section 1 - étude de marché -->

    <section class="container">
      <div class="content">
        <h1>L'étude de marché</h1>
        <h2>Pourquoi faire une étude de marché ?</h2>
        <p>blablabla</p>
      </div>
    </section>

      <section class="container">
        <div class="content">
        <h1>L'étude de marché</h1>
        <h2>Et si nous prenions de la hauteur ensemble ?</h2>
        <p>blablabla</p>
        </div>
      </section>

      <section class="container">
        <div class="content">
          <h1>Comment cela va se dérouler ? </h1>
          <p> contactez-nous et discutons de votre projet ! cela nous permettra de bien cimprendre l'objectif de cette etude de marché (est-ee que c'est vraiment utile ?).
             Nous verrrons ensuite, aprés quelques recherches préliminaires, si il y a un marché (nous ne vous ferons pas payé une étude "dans le vent") </p>
          <img src="/ressources/logo provisoire.png" alt="">
          <button> Contactez-nous</button>
        </div>
      </section> 
        
          <div id="set-height"></div>

      <video id="v0" tabindex="0", autobuffer preload>

        <source type="video/mp4" src="/ressources/VIDEO/Market study.mp4"></source>
      </video>
      
      <script src="/pages/sticky.js"></script>
      
    <script>

      enterView({
        selector: "section",
        enter: function(el) {
          el.classList.add("entered");
        }
      })
    
        var frameNumber = 0, // start video at frame 0
        // lower numbers = faster playback
        playbackConst = 1000,
        // get page height from video duration
        setHeight = document.getElementById("set-height"),
        // select video element         
        vid = document.getElementById('v0');
        // var vid = $('#v0')[0]; // jquery option

    // dynamically set the page height according to video length
    vid.addEventListener('loadedmetadata', function() {
    setHeight.style.height = Math.floor(vid.duration) * playbackConst + "px";
    });


    // Use requestAnimationFrame for smooth playback
    function scrollPlay(){ 
    var frameNumber  = window.pageYOffset/playbackConst;
    vid.currentTime  = frameNumber;
    window.requestAnimationFrame(scrollPlay);
    }

    window.requestAnimationFrame(scrollPlay);

        </script>

  <!-- Section 2 - prévi -->

      
    <section class="previ">
      <div class="previ-section">
        <h1>blbabla</h1>

      </div>


</body>
</html>


JS

JavaScript:
"use strict";!function(e){"function"==typeof define&&define.amd?define(e):"undefined"!=typeof module&&module.exports?module.exports=e():window.enterView=e.call(this)}(function(){var e=function(e){function n(){g=window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||window.msRequestAnimationFrame||function(e){return setTimeout(e,1e3/60)}}function t(){if(h&&"number"==typeof h){var e=Math.min(Math.max(0,h),1);return q-e*q}return q}function i(){var e=document.documentElement.clientHeight,n=window.innerHeight||0;q=Math.max(e,n)}function o(){y=!1;var e=t();A=A.filter(function(n){var t=n.getBoundingClientRect(),i=t.top,o=i<e;if(o&&!n.__enter_view){if(m(n),_)return!1}else!o&&n.__enter_view&&w&&w(n);return n.__enter_view=o,!0}),A.length||window.removeEventListener("scroll",r,!0)}function r(){y||(y=!0,g(o))}function u(){i(),o()}function f(e){for(var n=e.length,t=[],i=0;i<n;i+=1)t.push(e[i]);return t}function c(e){var n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:document;return"string"==typeof e?f(n.querySelectorAll(e)):e instanceof NodeList?f(e):e instanceof Array?e:void 0}function d(){A=c(l)}function a(){window.addEventListener("resize",u,!0),window.addEventListener("scroll",r,!0),u()}function s(){var e=l&&m;e||console.error("must set selector and enter options"),n(),d(),a(),o()}var l=e.selector,m=e.enter,w=e.exit,v=e.offset,h=void 0===v?0:v,p=e.once,_=void 0!==p&&p,g=null,y=!1,A=[],q=0;s()};return e});




CSS

CSS:
body{
    font-family: "poppins", sans-serif;
    padding: 3em;
    background-color: black;
}

#v0{
    position: fixed;
    bottom: 0;
    right: 0;
    width: 100%;
}

#set-height{
    display: block;
}

section{
    z-index: 1;
    position: relative;

}

.content{
    position: sticky;
    position: -webkit-sticky;
    width: 100%;
    top: 33,3%;
    color: white;
}

h1 {
    font-size: 3em;
    background: black;
    display: inline-block;
    padding: 10px 15px;
    border-radius: 20px;
    margin: 0;

}

p {
font-size: 1.5em;
}

section:nth-of-type(1) {
    height: 2200px;
}

section:nth-of-type(2) {
    height: 1300px;
}

section:nth-of-type(3) {
    height: 800px;
}

/* à suivre la mise en forme de l'apparition du texte */

.entered {
        -webkit-animation: text-focus-in 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
                animation: text-focus-in 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
}

/* ----------------------------------------------
 * Generated by Animista on 2022-8-3 17:12:26
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info.
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation text-focus-in
 * ----------------------------------------
 */
 @-webkit-keyframes text-focus-in {
    0% {
      -webkit-filter: blur(12px);
              filter: blur(12px);
      opacity: 0;
    }
    100% {
      -webkit-filter: blur(0px);
              filter: blur(0px);
      opacity: 1;
    }
  }
  @keyframes text-focus-in {
    0% {
      -webkit-filter: blur(12px);
              filter: blur(12px);
      opacity: 0;
    }
    100% {
      -webkit-filter: blur(0px);
              filter: blur(0px);
      opacity: 1;
    }
  }
 
  .previ{
    background-image: linear-gradient(to right top, #2c71f6, #0d6fe4, #006cd2, #0068bf, #0163ac);
  }
  .content button{
    margin-top: 20px;
    padding: 15px 20px;
    font-size: 15px;
    border-radius: 10px;
    border: none;
    outline: none;
    cursor: pointer;
    background-color: inherit;
    color: white;
    border: 1px solid white;
  }
  .content button:hover {
    background-color: white;
    transition: background-color 0.5s;
    border: 1px solid white;
    color: #0163ac;
    font-weight: bold;
 }



thank you so much for your help and time :)
 

Johna

Frontend developer
Staff Team
Guardian
Try changing position: relative; in the section styling to position: sticky; and then add top: 0px;.

See it that works and let me know.
 
hello, thank you for your help, it works !

but the text is just covering each other doesn't look like it disappearing, at least for the .content section, do you know how to fix it ?

Capture d’écran 2022-08-04 à 01.53.22.png

and do you know why my video keep being the background of my site ? I'd like that it stop after the script and before section 2 - previ in comment

thank you so much for your time and your help, it really helps me !
 

Johna

Frontend developer
Staff Team
Guardian
Sorry, was busy running around and packing the house yesterday (we're relocating). so maybe I'll try today then, if I won't be busy again.
 
Top