如何使元素保持粘性，直到其所有内部内容完全滚动？

问题描述 投票：0回答：1

我已经用 html 构建了一个移动设备，并希望一旦窗口滚动到此部分，它就会变得粘滞，直到所有内部内容都滚动过去。问题是，当前的解决方案确实帮助我实现内部滚动，同时防止主滚动（使其看起来像粘性的），但是一旦内部内容完全滚动，而不是窗口返回到正常滚动行为，它要么滚动回顶部立即或滚动变得滞后，请参阅下面的代码并了解我的意思。

https://jsfiddle.net/nomnwz/1cLj290y/1/

代码在这里

index.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title>HTML Device</title>
        <link rel="stylesheet" href="styles.css" />
    </head>
    <body>
        <div class="section-full">1</div>
        <div class="section-full">2</div>
        <div class="section-full">3</div>
        <div class="section-full">4</div>
        <div class="err-mobile">
            <div class="err-device">
                <div class="err-ring">
                    <div class="err-mic"></div>
                    <div class="err-view">
                        <div class="err-cards">
                            <div class="err-card">
                                <div class="err-head">Communication<br><span class="err-secondary">Gaps</span></div>
                                <div class="err-body">
                                    <span class="err-icon no"></span>
                                    <p>Misunderstandings, and lack of clarity. Facing difficulty in locating effective questioners.</p>
                                </div>
                            </div>
                            <div class="err-card">
                                <div class="err-head"><span class="err-secondary">High</span><br>Costs</div>
                                <div class="err-body">
                                    <span class="err-icon no"></span>
                                    <p>Unable to find a vendor that meets budget or offers reasonable pricing.</p>
                                </div>
                            </div>
                            <div class="err-card">
                                <div class="err-head"><span class="err-secondary">Exhausting</span><br>Interviews</div>
                                <div class="err-body">
                                    <span class="err-icon no"></span>
                                    <p>Unable to find or retain all-star talent. Drainer of arranging extensive evaluations inhouse.</p>
                                </div>
                            </div>
                            <div class="err-card">
                                <div class="err-head">Identifying<br><span class="err-secondary">Challenges</span></div>
                                <div class="err-body">
                                    <span class="err-icon warning"></span>
                                    <p>Need assistance identifying and addressing challenges during the entire business development process.</p>
                                </div>
                            </div>
                            <div class="err-card">
                                <div class="err-head">Timeline<br><span class="err-secondary">Constraints</span></div>
                                <div class="err-body">
                                    <span class="err-icon no"></span>
                                    <p>Unable to locate a service provider who consistently meets specified timeline constraints for delivery.</p>
                                </div>
                            </div>
                            <div class="err-card">
                                <div class="err-head"><span class="err-secondary">Quality</span><br>Issues</div>
                                <div class="err-body">
                                    <span class="err-icon no"></span>
                                    <p>Defects in produce services, or processes resulting in unsatisfactory outcomes.</p>
                                </div>
                            </div>
                            <div class="err-card">
                                <div class="err-head"><img src="https://example.com/wp-content/uploads/2023/11/Logo.svg" alt="Logo"></div>
                                <div class="err-body">
                                    <span class="err-icon yes"></span>
                                    <p>Beyond Solutions, Building Partnerships</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="err-navigator"></div>
                    <div class="err-power"></div>
                    <div class="err-volume">
                        <div class="err-ringer"></div>
                        <div class="err-up"></div>
                        <div class="err-down"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="section-full">-2</div>
        <div class="section-full">-1</div>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
        <script src="script.js"></script>
    </body>
</html>

样式.css

* {
    box-sizing: border-box;
}

body {
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    padding: 0;
    margin: 0;
}

.section-full {
    height: 100vh;
}

.err-secondary {
    color: #e37373;
}

.err-mobile {
    font-family: "NeuzeitGro-Bol", Sans-serif;
    display: block;
    width: 100%;
    height: calc(100vh - 10px);
    margin-top: 5px;
    overflow: hidden;
}

.err-mobile .err-device {
    max-width: 340px;
    height: 100%;
    margin: 0 auto;
    border: 3px solid #dcd2d2;
    border-radius: 40px;
    position: relative;
}

.err-mobile .err-device .err-ring {
    background-image: url(https://example.com/wp-content/uploads/2023/12/iphone-wallpaper-scaled.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    border: 6px solid #000;
    border-radius: 40px;
}

.err-mobile .err-device .err-mic {
    max-width: 100px;
    height: 30px;
    border-radius: 30px;
    background-color: #000;
    margin: 5px auto;
    position: relative;
    z-index: 1;
}

.err-mobile .err-device .err-mic::after {
    content: "";
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: #121212;
    position: absolute;
    top: 5px;
    right: 5px;
}

.err-mobile .err-device .err-view {
    max-width: 100%;
    height: 100%;
    overflow: hidden;
    overflow-y: auto;
    margin-top: -40px;
    border-radius: 40px;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.err-mobile .err-device .err-view::-webkit-scrollbar {
    display: none;
}

.err-mobile .err-device .err-view .err-cards {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 10px;
    padding-top: 60px;
    padding-bottom: 20px;
}

.err-mobile .err-device .err-view .err-cards .err-card {
    background: rgb(255 247 249 / 94%);
    padding: 20px;
    border-radius: 30px;
    box-shadow: 0 0 20px 0 rgb(255 240 241);
    position: relative;
}

.err-mobile .err-device .err-view .err-cards .err-card .err-head {
    font-family: "Rafiloma", Sans-serif;
    font-size: 28px;
    font-weight: 600;
    position: relative;
}

.err-mobile .err-device .err-view .err-cards .err-card .err-head img {
    max-height: 40px;
    width: auto;
}

.err-mobile .err-device .err-view .err-cards .err-card .err-head::after {
    content: "";
    background-image: url(https://example.com/wp-content/uploads/2023/12/Close-Icon.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    width: 16px;
    height: 16px;
    position: absolute;
    right: 0px;
    top: 25px;
}

.err-mobile .err-device .err-view .err-cards .err-card:last-child .err-head::after {
    background-image: url(https://example.com/wp-content/uploads/2023/11/success-icon.png);
    width: 20px;
    height: 20px;
    top: 10px;
}

.err-mobile .err-device .err-view .err-cards .err-card .err-body {
    font-size: 16px;
    font-weight: 500;
    display: flex;
    gap: 10px;
    align-items: center;
}

.err-mobile .err-device .err-view .err-cards .err-card .err-body .err-icon.no::before {
    content: "";
    background-image: url(https://example.com/wp-content/uploads/2023/11/Error-Icon.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    width: 50px;
    height: 50px;
    display: block;
}

.err-mobile .err-device .err-view .err-cards .err-card .err-body .err-icon.warning::before {
    content: "";
    background-image: url(https://example.com/wp-content/uploads/2023/11/warning-icon.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    width: 50px;
    height: 44px;
    display: block;
}

.err-mobile .err-device .err-view .err-cards .err-card .err-body .err-icon.yes::before {
    content: "";
    background-image: url(https://example.com/wp-content/uploads/2023/11/success-icon.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    width: 50px;
    height: 50px;
    display: block;
}

.err-mobile .err-device .err-navigator {
    max-width: 160px;
    height: 5px;
    border-radius: 5px;
    background-color: #ffffff;
    margin: 5px auto;
    margin-top: -10px;
    z-index: 1;
}

.err-mobile .err-device .err-power {
    content: "";
    width: 5px;
    height: 80px;
    position: absolute;
    top: 40%;
    right: -5px;
    background-color: #dcd2d2;
    border-radius: 5px;
}

.err-mobile .err-device .err-volume .err-ringer,
.err-mobile .err-device .err-volume .err-up,
.err-mobile .err-device .err-volume .err-down {
    content: "";
    width: 5px;
    height: 50px;
    position: absolute;
    top: 30%;
    left: -5px;
    background-color: #dcd2d2;
    border-radius: 5px;
}

.err-mobile .err-device .err-volume .err-ringer {
    height: 30px;
}

.err-mobile .err-device .err-volume .err-up {
    top: calc(30% + 55px);
}

.err-mobile .err-device .err-volume .err-down {
    top: calc(30% + 120px);
}

脚本.js

jQuery(document).ready(function ($) {
    var mobileDevice = $(".err-mobile");
    var mobileDeviceTop = mobileDevice.offset().top;
    var mobileView = $(".err-mobile .err-device .err-view");

    $(window).scroll(function () {
        var scrollPosition = $(window).scrollTop();

        if (scrollPosition >= mobileDeviceTop - 5) {
            var maxScroll =
                mobileView.prop("scrollHeight") - mobileView.height();

            $("body").css("overflow", "hidden");

            $("body, .err-mobile .err-device .err-view").on(
                "wheel",
                function (e) {
                    if (
                        (e.originalEvent.deltaY < 0 &&
                            mobileView.scrollTop() > 0) ||
                        (e.originalEvent.deltaY > 0 &&
                            mobileView.scrollTop() < maxScroll)
                    ) {
                        mobileView.scrollTop(
                            mobileView.scrollTop() + e.originalEvent.deltaY
                        );
                    } else {
                        $("body").css("overflow", "");
                    }
                }
            );
        } else {
            $("body").css("overflow", "");
        }
    });
});
javascript html jquery css parallax
1个回答
0
投票

要实现此所需效果，您必须的一个选择是构建框架，将其包装在没有高度但允许溢出的粘性元素中，并让以下元素相对于较高的 z-index 定位，以便可以隐藏溢出。

这是一个使用纯 html / css 的小演示。我将背景设置为线性渐变，这样您就可以看到它通过粘性数字头更清晰地滚动。

body {
  margin: 0;
  color: hotpink;
  font-weight: bold;
  font-size: 20pt;
  font-family: monospace;
}

section {
  min-height: 200dvh;
  text-align: center;
}

section {
  background:
    linear-gradient(
      #888,
      #000,
      #888
    );
}

section:nth-of-type(3) {
  position: relative;
  z-index: 2;
}

.sticky {
  position: sticky;
  top: 0;
}

.frame-wrap {
  height: 0;
}

.frame {
  box-sizing: border-box;
  height: 100dvh;
  width: 100%;
  border: 15px solid hotpink;
  border-radius: 20px;
}
<section>
  <div class="sticky">1</div>
</section>
<section>
  <div class="sticky frame-wrap">
    <div class="frame"></div>
  </div>
  Enjoy this content <br />
  Enjoy this content <br />
  Enjoy this content <br />
  Enjoy this content <br />
  Enjoy this content <br />
  Enjoy this content <br />
  Enjoy this content <br />
  Enjoy this content <br />
  Enjoy this content <br />
  Enjoy this content <br />
  Enjoy this content <br />
  Enjoy this content <br />
  Enjoy this content <br />
  Enjoy this content <br />
  Enjoy this content <br />
  Enjoy this content <br />
  Enjoy this content
</section>
<section>
  <div class="sticky">3</div>
</section>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.