两个 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-text 作为触发器来显示和隐藏不透明的手机图像。

祝你好运