javascript - 在滚动 jQuery 上将 div 包装/展开到另一个 div 中

Question

我试图在滚动时使用 jQuery 将 div 包装到另一个 div 中，然后在向后滚动时展开，但每次滚动时它都会继续包装 div，如何使其仅工作一次？

这是我正在尝试的代码

$(".scroller").scroll(function() {
    if($(window).width() > 768)
    {
    if($(".scroller").scrollTop() > 245) {
       $(".doctor_listing_wrapper").wrap("<div class='doctor_listing_wrapper_master'></div>");
      }   
      else{
       $(".doctor_listing_wrapper").unwrap("<div class='doctor_listing_wrapper_master'></div>");
      }
    }
});

HTML很简单，只是一个带有一些内部内容的div

 <div class="doctor_listing_wrapper">
    <p>Content goes here</p>
    <p>Content goes here</p>
    <p>Content goes here</p>
 </div>

更新 JSfiddle Demo

Answer 1

您需要检查该元素是否已存在...以下示例应该可以解决您的问题 (!$(".doctor_listing_wrapper_master").length)

$(".scroller").scroll(function() {
    if($(window).width() > 768)
    {
    if($(".scroller").scrollTop() > 245) {
      if(!$(".doctor_listing_wrapper_master").length){
           $(".doctor_listing_wrapper").wrap("<div class='doctor_listing_wrapper_master'></div>");
        }
      }   
      else{
       $(".doctor_listing_wrapper").unwrap("<div class='doctor_listing_wrapper_master'></div>");
      }
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="doctor_listing_wrapper">
    <p>Content goes here</p>
    <p>Content goes here</p>
    <p>Content goes here</p>
 </div>