在特定高度停止固定背景图像滚动

Question

如下图所示，侧边栏在其包裹器下方。如果它超出包裹器，我该如何停止固定背景图像滚动？我不希望它接触页脚。

这是我的代码：

 <script>
    $(function () {

        //Sidebar navigation

        var scrollNavTop = $('.scroll').offset().top;


        $(window).scroll(function () {
            if ($(window).scrollTop() > scrollNavTop) {
            $('.scroll').css({ position: 'fixed', top: '0px' });
            } else {

                    $('.scroll').css({ position: 'relative', top: '0px' });

            }

        });

    });
</script>

HTML代码：

<div class="wrapper">

<%--      SMOOTH SCROLL--%>
          <div class="scroll">
              <div style="margin:0 auto;">
          <div style="background-image:url(image/scrolltopNew.png); background-repeat:no-repeat; width:232px; height:97px; margin-left: 60px;"></div>
                  </div>
              <div class="subpage-header">
                  <div class="nav-section1"><a class="link" href="#section1"><p style="padding-left:50px;">COMPANY<br />BACKGROUND</p></a></div>
                  <div class="nav-section2"><a class="link" href="#section2"><p style="padding-left:50px;">COMPANY<br />VALUES</p></a></div>
                  <div class="nav-section3"><a class="link" href="#section3"><p style="padding-left:50px;">OUR<br />SERVICES</p></a></div>
              </div>
              <div style="margin:0 auto;">
              <div style="background-image:url(image/scrollbottomNew.png); background-repeat:no-repeat; width:232px; height:97px; margin-left: 60px;"></div>
              </div>
          </div>

- Courageous Lemon

Answer 1

绝对图像子元素解决方案

以下是我解决此问题的方法：
首先将背景图像更改为要滚动的内容内部的普通图像。
然后相对定位其父元素，并绝对定位横幅（图像）。
现在我们可以通过影响其顶部属性来控制其滚动。
JavaScript代码检查横幅是否在其父容器内，并且当滚动超出该容器时不会添加任何其他滚动。

$(document).ready(function() {
  $image = $('.image');
  $(window).scroll(function() {
    if ($(window).scrollTop() < $(".content").height() - $image.height()) {
      $image.css('top', $(window).scrollTop());
    }
  });
});

body {
  margin-left: 100px;
}
.content {
  position: relative;
  padding-left: 50px;
  height: 1000px;
  background-color: #999;
  margin-bottom: 15px;
}
.end {
  height: 100px;
  background-color: black;
}
.image {
  position: absolute;
  top: 0;
  left: -30px;
  width: 600px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content">
  <p>Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet,
    Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet,
    Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet, Lorem ipsum dollar si amet,</p>
  <svg class="image" viewBox="0 0 100 100">
    <path fill="blue" d="m0,10 5,-5
             v80
             l-10,-10" />
    <path fill="#07c" d="m0,10 35,5 
                                        c5,0 5,10 5,10
                                        v40
                                        c0,10 -5,10 -5,10
                                        l-35,5Z" />

  </svg>
</div>
<footer class="end">

</footer>

- Persijn

Answer 2

您需要将内容和侧边栏导航插入到容器中，并将内容的位置设置为相对位置。您可以使用stickem插件来帮助滚动。以下是一个示例：

HTML -

您需要将内容和侧边栏导航插入到容器中，并将内容的位置设置为相对位置。您可以使用stickem插件来帮助滚动。以下是一个示例：

<div class="container">
<div class="row stickem-container">
    <div class="content">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>

    <div class="aside stickem">
      I'm gonna be sticky!
    </div>
</div>

CSS -

.stickem-container {
 position: relative;
}

.stickit {
margin-left: 660px;
position: fixed;
top: 0;
}

.stickit-end {
bottom: 40px;
position: absolute;
right: 0;
}

JavaScript -

    <script src="jquery.js"></script>
<script src="jquery.stickem.js"></script>
<script>
    $(document).ready(function () {
        $('.wrapper').stickem();
    });
</script>

- Enovyne