JQuery的div從

Question

的頂部到底部所以我有一個div，只是有一些高度的寬度和背景顏色，我想這個div開始在一段內容的頂部，當你向下滾動它你喜歡邊欄，然後當你到達該部分的結尾時，它會停止。這裏是我的代碼到目前爲止：

$('.page-home .showcase').scroll(function() { 
    $('.page-home .showcase .left-sidebar').animate({ 
     top: $(this).scrollTop() 
    }); 
}); 


.page - home.showcase { 
     background - color: #f9f9f9; 
     padding: 100 px 0; 
    } 
    .page - home.showcase.left - sidebar { 
     display: block; 
     position: absolute; 
     width: 15 px; 
     height: 350 px; 
     background - color: #e84d5b; 
     z - index: 999; 
    } 
    .page - home.showcase.showcase - content h2 { 
     font - size: 60 px; 
     font - weight: 700; 
     text - transform: uppercase; 
     color: #000; 
} 
.page-home .showcase .showcase-content p { 
    font-size: 24px; 
    margin-top: 60px; 
} 
.page-home .showcase .showcase-content a { 
    margin-top: 60px; 
    font-size: 17px; 
} 
.page-home .showcase .showcase-content hr { 
    left: 15px; 
    position: absolute; 
    margin-top: 50px; 
} 

<div class="showcase"> 
    <div class="container-fluid"> 
     <div class="row"> 
      <div class="left-sidebar"></div> 
      <div class="col-md-5 col-md-offset-2"> 
       <div class="showcase-content"> 
        <h2>AAAA</h2> 
        <p>We’re strategists, producers and doers. Collectively you could call us a design and innovation studio. 
         <br> 
         <br> 
         <span>We love what we do... <strong>uncovering your brand’s potential.</strong></span></p> 
        <a href="#" class="btn btn-custom">Case study</a> 
        <hr> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

我是一個noob與JQuery所以任何幫助表示讚賞！

Answer 1

這裏有一個想法，你可以熄滅的：

$(function() { 
 
    var $window = $(window), 
 
    $content = $('#content'), 
 
    $aside = $('#aside'); 
 

 
    // Make initial adjustment 
 
    adjustAside(); 
 

 
    // Adjust on scroll event 
 
    $window.scroll(adjustAside); 
 

 
    function adjustAside() { 
 
    // Bounds relative to viewport 
 
    var $contentRect = $content[0].getBoundingClientRect(); 
 

 
    // Div associated with sidebar has moved up past viewport 
 
    if ($contentRect.top < 0) { 
 
     var $asideHeight = $aside.outerHeight(); 
 

 
     // Move sidebar down as long as it still fits inside associated div 
 
     if ($contentRect.bottom > $asideHeight) { 
 
     $aside.css({ 
 
      marginTop: $contentRect.top * -1 
 
     }) 
 
     } else { 
 
     $aside.css({ 
 
      marginTop: $content.innerHeight() - $asideHeight 
 
     }) 
 
     } 
 
    } else { 
 
     // Set sidebar to top of associated div 
 
     $aside.css({ 
 
     marginTop: 0 
 
     }) 
 
    } 
 
    } 
 
});

body { 
 
    height: 2000px; 
 
} 
 
#content { 
 
    border: 1px solid red; 
 
    margin-top: 300px; 
 
    padding-right: 220px; 
 
    position: relative; 
 
} 
 
#aside { 
 
    border: 1px solid green; 
 
    width: 200px; 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
SCROLL DOWN 
 
<br>. 
 
<br>. 
 
<br>. 
 
<div id="content"> 
 
    <div id="aside">I will follow him... follow him wherever he may gooooo</div> 
 
    The rain in spain falls mainly on the plain. The rain in spain falls mainly on the plain. The rain in spain falls mainly on the plain. The rain in spain falls mainly on the plain. The rain in spain falls mainly on the plain. The rain in spain falls mainly 
 
    on the plain. The rain in spain falls mainly on the plain. The rain in spain falls mainly on the plain. The rain in spain falls mainly on the plain. The rain in spain falls mainly on the plain. The rain in spain falls mainly on the plain. The rain in 
 
    spain falls mainly on the plain. The rain in spain falls mainly on the plain. The rain in spain falls mainly on the plain. 
 
</div> 
 

 
<div> 
 
    The rain in spain falls mainly on the plain. The rain in spain falls mainly on the plain. 
 
</div>