一定の高さでスクロールしないように固定背景画像を停止する

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

絶対画像の子ソリューション

これは私がこの問題を解決する方法です：
最初に背景画像をスクロールしたいコンテンツの内部の通常の画像に変更します。
次に相対位置を親に設定し、バナー（画像）を絶対位置に配置します。
これで、topプロパティを有効にしてスクロールを制御できます。
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>