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

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>

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>

Answer 2

您必须将内容和侧边栏导航插入容器并将内容的位置设置为相对。您可以使用 stickem 插件来帮助滚动。例子如下：

HTML -

<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>

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

Stop fixed background image from scrolling at a certain height

javascript

css

jquery

scroll

background-image

绝对图像子解