社区所有版块导航
Python
python开源   Django   Python   DjangoApp   pycharm  
DATA
docker   Elasticsearch  
aigc
aigc   chatgpt  
WEB开发
linux   MongoDB   Redis   DATABASE   NGINX   其他Web框架   web工具   zookeeper   tornado   NoSql   Bootstrap   js   peewee   Git   bottle   IE   MQ   Jquery  
机器学习
机器学习算法  
Python88.com
反馈   公告   社区推广  
产品
短视频  
印度
印度  
Py学习  »  Jquery

有没有一种方法可以使用jquery和css在滚动时重叠固定的div?

Jimmy • 6 年前 • 2093 次点击  

我想创建以下滚动效果

滚动时: 当第一个DIV(.section one)滚动到其容器的顶部时, 它变为固定的。当第二个分区(第二节) 滚动到覆盖前一个分区的同一容器的顶部,并变为固定。

第二节封面第一节第三节封面第二节等等 有点像卡片效应。我对怎么做有个想法。 但我还不太明白。

我也愿意使用纯JavaScript

我想提一下。这不是视差滚动,在滚动时背景内容(即图像)以与前景内容不同的速度移动。

这是前景层与固定层重叠

            .fixed {
                left: 0;
                position: fixed;
                right: 0;
                z-index: 0;
            }

            .section-one, section-two .section-three {
                height: 100vh;
            }


            .scroll-contain {
                overflow-y: hidden;
            }


            function sticktothetop() {
                var element_top = $('.scroll-contain').scrollTop();
                var top = $('#top-of-element').offset().top;
                if (element_top > top) {
                    $('.section-one').addClass('fixed');
                    $('#top-of-element').height($('.section-one').outerHeight());
                } else {
                    $('.section-one').removeClass('fixed');
                    $('.section-one').height(0);
                }
            }

            $(function() {
                $(window).scroll(sticktothetop);
                sticktothetop();
            });
        <div class="scroll-contain">
        <div id="top-of-element"></div>
            <section class="section-one" style="background-color: yellow">
                <div class="card">
                    <p>
                    Tempor commodo ullamcorper a lacus vestibulum sed arcu non. Auctor elit sed vulputate mi sit amet mauris commodo quis. Tortor aliquam nulla facilisi cras fermentum odio eu feugiat pretium. Sagittis orci a scelerisque purus semper eget.
                    </p>
                </div> 
            </section>

            <section class="section-two" style="background-color: pink">
                <div class="card">
                    <p>
                    Tempor commodo ullamcorper a lacus vestibulum sed arcu non. Auctor elit sed vulputate mi sit amet mauris commodo quis. Tortor aliquam nulla facilisi cras fermentum odio eu feugiat pretium. Sagittis orci a scelerisque purus semper eget.
                    </p>
                </div> 
            </section>

            <section class="section-three" style="background-color: orange">
                <div class="card">
                    <p>
                    Tempor commodo ullamcorper a lacus vestibulum sed arcu non. Auctor elit sed vulputate mi sit amet mauris commodo quis. Tortor aliquam nulla facilisi cras fermentum odio eu feugiat pretium. Sagittis orci a scelerisque purus semper eget.
                    </p>
                </div> 
            </section>              
        </div>              
Python社区是高质量的Python/Django开发社区
本文地址:http://www.python88.com/topic/38686
 
2093 次点击  
文章 [ 2 ]  |  最新文章 6 年前
psren
Reply   •   1 楼
psren    6 年前

我不能100%确定你是否在搜索“我如何做我自己的”-解决方案或 一个“我该怎么做”的解决方案。

我怎么做

这就是你要找的吗? http://scrollmagic.io/examples/advanced/parallax_sections.html 如果可以,您可以使用ScrollMagic: http://scrollmagic.io/

我自己怎么做

如果你只想学习如何做你自己,“视差”是你可以搜索的(谷歌或StackOverflow,有无限的答案)。

Andu Andrici
Reply   •   2 楼
Andu Andrici    6 年前

如果我没弄错的话,你在找 position: sticky 效果。

试试这个,看看它是否符合您的请求(不需要JS):

.section-one, section-two .section-three {
    position: sticky;
    top: 0;
}

还建议您查找有关 位置:粘性 以及如何将其应用于您的需求。