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

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

你要插入的内容&侧栏导航到一个容器中，并设置内容的位置相对。你可以使用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> 

Answer 2

绝对像孩子解决

这是我将如何解决这个问题：
首先将背景图像更改为想要滚动的内容中的普通图像。
然后将其父母的相对位置以及绝对位置的横幅（图像）。
现在我们可以通过影响它的顶级属性来控制它的滚动。
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>