在滚动jQuery

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>