並排兩個div，一個固定，另一個固定，但是如果鼠標也在固定div上，則滾動div

Question

我有一個父div，兩個子div並排。 我想要右div scolling和左一個是固定的。 確切地說，我想要的東西完全像這樣： https : //venmo.com/about/product/

到目前為止，這是代碼：

HTML：

<div class="row" id="spec" style="height:700px">
   <div class="col-sm-12 col-md-6 scrollable" style="height:700px;overflow-y:scroll">
      <section id="spec-text1" class="spec-text" style="height:400px">scrolling text in section1</section>
      <section id="spec-text1" class="spec-text" style="height:400px">scrolling text in section2</section>                                                       
      <section id="spec-text1" class="spec-text" style="height:400px">scrolling text in section3</section>                                                         
   </div>                                                                
   <div id="how-it-works" class="col-sm-12 col-md-6 text-center">        
   <img src="image_phone.png"/></div>
</div>

問題是，當鼠標懸停在固定div上方時，滾動div停止垂直滾動！ 我希望滾動div如果鼠標也位於另一個div上也保持滾動，就像上面的示例一樣。

謝謝

Answer 1

如果要復制其他模板，請先檢查DOM，css和js。

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<style>
.phone{
    position: fixed; 
    top: 100px; 
    left: 0px; 
}
</style>

<div class="container-fluid">
    <div class="row" id="spec" >
       <div class="col-sm-12 col-md-6 text-center">        
            <div class="phone">
                <img src="https://www.bell.ca/Styles/wireless/all_languages/all_regions/catalog_images/iPhone_7/iPhone7_MatBlk_lrg1_en.png"/>
            </div>
       </div>

       <div class="col-sm-12 col-md-6 " >
          <section id="spec-text1" class="spec-text" style="height:400px">scrolling text in section1</section>
          <section id="spec-text1" class="spec-text" style="height:400px">scrolling text in section2</section>
          <section id="spec-text1" class="spec-text" style="height:400px">scrolling text in section3</section>
          <section id="spec-text1" class="spec-text" style="height:400px">scrolling text in section3</section>
          <section id="spec-text1" class="spec-text" style="height:400px">scrolling text in section3</section>
          <section id="spec-text1" class="spec-text" style="height:400px">scrolling text in section3</section>
          <section id="spec-text1" class="spec-text" style="height:400px">scrolling text in section3</section>
       </div>                  
    </div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

更新：

您的問題僅用於此。

但您的評論不僅要如此。 因此，下次請提供一個完整的問題，這樣您就可以避免需要幫助的人進行兩次工作。 （或者我只是看錯你的問題了）

復制/克隆模板的關鍵只是查看DOM，css和JS，您可以復制，分析並查看更改的內容

在這里，我將向您展示我從該模板中獲得的收益

1. 打開控制台。 您會發現<div class="phone asset-feature-iphone">開頭沒有內聯元素css。

2. 當您開始滾動時。 您會注意到.phone具有內聯CSS。 因此，我們可以說：1.有一個javascript更改了它。 2.他們添加了css： position: fixed和opacity:1

3. 我們滾動到最后。 我們將知道.phone仍然存在。 但是我們看不到。 因為不透明度等於或小於0。

4. 我們注意到事件滾動是觸發器（現在就猜測）。 為了確保這一點，讓我們找到javascript。 我們找到了https://cdn1.venmo.com/production/js/auth-legacy.min.js 。 我們使用http://jsbeautifier.org/將其縮小，因此我們可以閱讀。 然后我找到了scroll ，所以我找到了scrollspy。

..snippet.. }), define("auth-legacy/public/js/phone", ["jquery", "jquery-scrollspy"], function(e) { ..snippet..

5. 讓我們用谷歌搜索一下，我們發現https://github.com/softwarespot/jquery-scrollspy

6. 嘗試嘗試。 演示： http : //output.jsbin.com/xoyenamafe

我所做的與venmo.com並不完全相同，因為venmo.com在每個.spec-text上的運行功能有所不同（更改手機圖像，不透明度，轉換等）。 我所做的只是使用倒數第二個.spec文本作為觸發器顯示和隱藏不透明的手機圖像。

祝好運