时间戳

首页 > 解决方案 > 如何使此 DIV 仅向下滚动到其部分的末尾？

javascript - 如何使此 DIV 仅向下滚动到其部分的末尾？

问题描述

考虑下面的代码：

我需要做的是拥有<div class="col-lg-12 kip">它的所有内容，只向下滚动到 workOne 部分的末尾，除此之外什么都没有。

我在这里附上了一张图片，它将向您展示这个固定 div 现在会发生什么，正如您在图片中看到的那样，它离开了它的部分并超出了按钮/我需要做的是让它停止并结束按钮上方的部分或右侧。

我如何在 CSS 或 JS 中做到这一点/请尽可能详细，因为作为初学者，我可能需要插图。

显示问题的图像

<section id="workOne">

        <div class="container">
            <div class="row">


 <!-- #### DIV CLASS "kip" is what need to be fixed and scroll down to end of this section#### -->

                <div class="col-lg-12 kip">
                    <h2>Kipeesh Language Check // Version 1.0</h2>
                    <p>Client asked to develop a simple language learning app.</p>
                    <ul class="kipul">
                        <li>Development in progress</li>
                        <li>Will be made to fit Wordpress</li>
                        <li><mark>html</mark>&nbsp;&nbsp;<mark>css</mark>&nbsp;&nbsp;<mark>javascript</mark>&nbsp;&nbsp;<mark>php</mark></li>
                    </ul>
                </div>


                <!-- #### ONE #### -->

                <div class="col-lg-6">
                </div>

                <div class="col-lg-6  kip2">
                    <p>01. Overview</p>
                    <img src="assets/images/kip1.jpg">

                </div>

                <!-- #### TWO #### -->


                <div class="col-lg-6">
                </div>

                <div class="col-lg-6  kip2">
                    <p>02. Create a button to hide elements.</p>
                    <img src="assets/images/kip2.jpg">
                </div>


                <!-- #### THREE #### -->

                <div class="col-lg-6">
                </div>

                <div class="col-lg-6  kip2">

                    <p>03. Put the button to work / hide elements</p>
                    <img src="assets/images/kip3.jpg">
                </div>


                <!-- #### FOUR #### -->

                <div class="col-lg-6">
                </div>

                <div class="col-lg-6  kip2">
                    <p>04. Add a reveal button to display one item at a time</p>

                    <img src="assets/images/kip4.jpg">

                </div>

                <a href="javascript: void(0)" onclick="popup('https://moenagy.dev/Kipeesh')"><button type="button" class="btn btnWork btn-outline-light btn-lg">View Version 1.0</button></a>



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

 <!-- #### DIV CLASS "kip" must end here and and scroll down further to the next section #### -->

标签： javascripthtmlcss

解决方案

完成，修复如下：

.kip{
    position: sticky;
    top: 50%;
    }

推荐阅读