使用 Bootstrap 4 时视差固定滚动不起作用

编程问答 2022-05-23

问题描述

我需要创建一个如下所示的视差滚动效果，但它没有按预期工作。

滚动时，我需要有一个包含内容的固定部分，并且只想滚动一个包含内容的部分。

当我在 Bootstrap-4 中使用脚本时，视差效果不起作用。这是预期的行为吗？

谁能指导我如何在使用脚本时产生视差效果？

任何帮助将不胜感激！

我做过的代码

    $(window).scroll(function (e) {
        parallax();
    });

    function parallax() {
        var scrolled = $(window).scrollTop();
        $(".hero").css("top",-(scrolled * 0.0315) + "rem");
    }
   .hero {
        position: fixed;
        z-index: 1;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background-color: bisque;
        background-size: cover;
        height: 100%;
        width: 100%;
    }
    .content {
        position: absolute;
        left: 0;
        z-index: 1000;
        top: 80vh;
        background: #2c7b99;
        height: 100%;
        width: 100%;
        Box-shadow: 0 -2px 1px rgba(0,0.15);
        border-top: 1px solid rgba(255,255,0.2);
    }
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<div class="container">
    <div class="row">
        <section class="hero">
            <p>
                <strong>Lorem Ipsum</strong> is simply dummy text of the
                printing and typesetting industry. Lorem Ipsum has been the
                industry's standard dummy text ever since the 1500s,when an
                unkNown printer took a galley of type and scrambled it to make a
                type specimen book. It has survived not only five centuries,but
                also the leap into electronic typesetting,remaining essentially
                unchanged. It was popularised in the 1960s with the release of
                Letraset sheets containing Lorem Ipsum passages,and more
                recently with desktop publishing software like Aldus PageMaker
                including versions of Lorem Ipsum.
            </p>
            <p>
                <strong>Lorem Ipsum</strong> is simply dummy text of the
                printing and typesetting industry. Lorem Ipsum has been the
                industry's standard dummy text ever since the 1500s,and more
                recently with desktop publishing software like Aldus PageMaker
                including versions of Lorem Ipsum.
            </p>
        </section>
    </div>
    <div class="row">
        <section class="content">
            <p>
                <strong>Lorem Ipsum</strong> is simply dummy text of the
                printing and typesetting industry. Lorem Ipsum has been the
                industry's standard dummy text ever since the 1500s,and more
                recently with desktop publishing software like Aldus PageMaker
                including versions of Lorem Ipsum.
            </p>
        </section>
    </div>
</div>

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

bootstrap-4javascriptjqueryparallax