javascript - Locomotive-scroll how to make element fixed on scroll - Stack Overflow

admin管理员组

文章数量:1391748

I'm trying to reproduce the fixed positioning effect used in the scrolling library Lootive-scroll. Demo for the library- section 04 and library documentation here. What I want to achieve is this: I have a canvas down the page; when scrolling and reaching the canvas, it should stay fixed on the viewport (as a background, to say), while the text at the bottom scrolls normally on it. I can't quite figure out how to achieve it. Here is a working link (cannot use pastebin or else at the moment): my demo

HTML:
<section id="c-canvas" class="c-section -fixed" data-scroll-section data-persistent>
    <div class="o-container" id="fixed-elements">
      <div class="o-layout">
        <div class="o-layout_item">
          <div class="c-fixed_wrapper" id="c-fixed_wrapper">
            <!--<div class="c-fixed_target" id="fixed-target"></div>-->
                <canvas id="c-canvas_scene" data-scroll data-scroll-sticky data-scroll-target="#c-fixed_wrapper"></canvas>
          </div>
        </div>
        <div class="o-layout_item">
          <div class="c-section" id="fixed-text" data-scroll data-scroll-sticky data-scroll-target="#fixed-elements">
            <div class="b-block_internal">
              <p>Maison Operative apre la sua nuova location in 400 mq di uno store, suddiviso in due livelli, il cui concept rielabora l’immagine iconica di uno dei primi giochi elettronici, il flipper.</p>
            </div>
            <div class="b-block_internal">
              <p>Le linee curve, le ombreggiature, i giochi di luci led e i materiali metallici impiegati nel nostro nuovo store, riportano il visitatore in un altro tipo di realtà dove design a fashion sono perfettamente mixati.</p>
            </div>
            <div class="b-block_internal">
              <p>Così e abbiamo mischiato e giocato con elementi architettonici e di design, allo stesso modo cerchiamo di trasferire questo tipo di personalità ai nostri clienti: ci piace mescolare materiali e tessuti differenti per i nostri outfit e per quelli che suggeriamo e proponiamo alla nostra utenza.</p>
            </div>
          </div>
        </div>

      </div>
    </div>
  </section>

---

JS:
const scroll = new LootiveScroll({
      el: document.querySelector('#app'),
      smooth: true
    });

---

I'm using the same CSS code as the Lootive demo. I've stripped the relevant code here, as the source is much longer.

Thanks in advance to anyone has the patience to suggest.

I'm trying to reproduce the fixed positioning effect used in the scrolling library Lootive-scroll. Demo for the library- section 04 and library documentation here. What I want to achieve is this: I have a canvas down the page; when scrolling and reaching the canvas, it should stay fixed on the viewport (as a background, to say), while the text at the bottom scrolls normally on it. I can't quite figure out how to achieve it. Here is a working link (cannot use pastebin or else at the moment): my demo

HTML:
<section id="c-canvas" class="c-section -fixed" data-scroll-section data-persistent>
    <div class="o-container" id="fixed-elements">
      <div class="o-layout">
        <div class="o-layout_item">
          <div class="c-fixed_wrapper" id="c-fixed_wrapper">
            <!--<div class="c-fixed_target" id="fixed-target"></div>-->
                <canvas id="c-canvas_scene" data-scroll data-scroll-sticky data-scroll-target="#c-fixed_wrapper"></canvas>
          </div>
        </div>
        <div class="o-layout_item">
          <div class="c-section" id="fixed-text" data-scroll data-scroll-sticky data-scroll-target="#fixed-elements">
            <div class="b-block_internal">
              <p>Maison Operative apre la sua nuova location in 400 mq di uno store, suddiviso in due livelli, il cui concept rielabora l’immagine iconica di uno dei primi giochi elettronici, il flipper.</p>
            </div>
            <div class="b-block_internal">
              <p>Le linee curve, le ombreggiature, i giochi di luci led e i materiali metallici impiegati nel nostro nuovo store, riportano il visitatore in un altro tipo di realtà dove design a fashion sono perfettamente mixati.</p>
            </div>
            <div class="b-block_internal">
              <p>Così e abbiamo mischiato e giocato con elementi architettonici e di design, allo stesso modo cerchiamo di trasferire questo tipo di personalità ai nostri clienti: ci piace mescolare materiali e tessuti differenti per i nostri outfit e per quelli che suggeriamo e proponiamo alla nostra utenza.</p>
            </div>
          </div>
        </div>

      </div>
    </div>
  </section>

---

JS:
const scroll = new LootiveScroll({
      el: document.querySelector('#app'),
      smooth: true
    });

---

I'm using the same CSS code as the Lootive demo. I've stripped the relevant code here, as the source is much longer.

Thanks in advance to anyone has the patience to suggest.

• javascript
• html
• css
• canvas

Share Improve this question Follow asked Jan 23, 2020 at 11:10 IljaRilicIljaRilic 8511 gold badge11 silver badge1111 bronze badges 8

• 1 Does this answer your question? How to make div fixed after you scroll to that div? – Awais Commented Jan 23, 2020 at 11:54
• Hello Awais, thank you for the reply. Unfortunately no, seems like that the library ignores the fixed positioning. I've also tried with intersectionObserver, but with no luck. – IljaRilic Commented Jan 23, 2020 at 12:29
• 1 I think this is the issue in that library github./lootivemtl/lootive-scroll/issues/30 – Awais Commented Jan 23, 2020 at 13:21
• You're right, thank you for the information. Before moving to something else, do you think there's a possibility to replicate the demo somehow? – IljaRilic Commented Jan 23, 2020 at 14:56
• 1 Yes, what I meant was to use the structure used in lootive scroll's demo and adapt it with my demo. However, considering the limitations of the library, I followed the link provided by you and used that instead, removing the library, and it worked! Thank you! – IljaRilic Commented Jan 24, 2020 at 9:12

 |  Show 3 more ments

4 Answers 4

Sorted by: Reset to default 1

It's difficult without seeing some of your css or better yet a codepen example, but I see you have added the attribute "data-scroll-sticky" and the target "data-scroll-target="#c-fixed_wrapper", which is correct.

What I have done before is make the target height:100vh so that the sticky element sticks for 100% of the screen height.

To have other elements float past this sticky element you may need to have them (or their wrapping container) set to position:absolute and add a "top" value to get them starting further down. Positioned like this they can move independently of the sticky container.

I have done this on a current project and it's working well.

Good luck!

Its Easy Just Perform Following steps- 

Html  ( Use always Unique Target id )

<div class="fixed_wrapper">
   
  <div class="fixed_target" id="fixed-target"></div>
     
    <div class="fixed" data-scroll data-scroll-sticky data-scroll-target="#fixed-target" 
      style="background-image:url('img/bg.jpg')">
    </div>
 </div>


use this Css




.fixed_wrapper {
    position: relative;
    overflow: hidden;
    height: 818px;
}

.fixed_target {
    bottom: -100vh;
}
.fixed,
.fixed_target {
    position: absolute;
    top: -100vh;
    right: 0;
    left: 0;
}
.fixed {
    height: 100%;
    background-size: cover;
    background-position: center;
}




Work For me 
Hope for you as Well

i have a cookies aggree button which i have to place in bottom fixed if the user didn't accept cookies thus i have placed it fixed and gave it zIndex of max and placed it outside the lootive container

sample:

<div>
    <button class="accept-cookie">Accept Cookie</button>

    <main data-scroll-container> <!-- lootive container -->
    ....
    </main>

 

.accept-cookie {
    position: fixed;
    bottom: 5px;
    z-index: 9999999999;
    ....
}

I have encountered the same issue and the solution was to set data-scroll-target to outer data-scroll-container.

<div data-scroll-container id="scroll-container">
...
  <div class="fixed" data-scroll data-scroll-sticky data-scroll-target="#scroll-container">
    // Fixed content

本文标签： javascriptLocomotivescroll how to make element fixed on scrollStack Overflow