在用户滚动300后显示一次引导模式

Question

嗨，在下面的例子中，用户将在滚动300 my后看到一个模式。但我的问题是，如果我把固定的高度加到div上，就不会触发。我希望它有一个固定的高度和它自己的滚动条。

​

$(window).scroll(function() {
  var hT = $('.list').offset().top,
    hH = $('.list').outerHeight(),
    wH = $(window).height(),
    wS = $(this).scrollTop();
  console.log((hT - wH), wS);
  if (wS > hT + hH - wH && $("#searchModalForm").attr("displayed") === "false") {
    $('#searchModalForm').modal('show');
    $("#searchModalForm").attr("displayed", "true");
  }
});

#searchModalForm {
  display: none;
}
.list {
  height: 500px;
  overflow: auto;
}

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="list">
  <h2 id="clickme">Modal Example</h2>
  <!-- Trigger the modal with a button -->


  <!-- Modal -->
  <div class="modal fade" id="searchModalForm" role="dialog" displayed="false">
    <div class="modal-dialog">

      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Drop your Number here for a CallBack..</h4>
        </div>
        <div class="modal-body">


          <form style="color:#000;" id="contact-form" action="number.php">

            <div class="col-md-4">
              <div class="form-group">

                <input type="numeric" class="form-control" name="number" id="number" placeholder="Enter Cell Number" required />
              </div>
            </div>



          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          <button type="submit" class="btn btn-primary pull-right" id="btnContactUs">
            Request a CallBack</button>
        </div>
      </div>

    </div>
  </div>







  <p>



    Cupidatat master cleanse carles small batch VHS. Brooklyn umami odio, post-ironic selvage hella farm-to-table. Brooklyn DIY cardigan cosby sweater marfa. Gastropub bicycle rights in seitan non small batch. Placeat non street art umami, yr wolf sed skateboard
    cupidatat direct trade seitan put a bird on it occaecat small batch. Hoodie marfa umami, enim scenester cred synth vero gastropub aliqua brunch mlkshk ut. Sed brunch pop-up irony quis. Etsy stumptown 3 wolf moon in carles, vinyl chillwave. Beard sapiente
    nulla banh mi cosby sweater 8-bit craft beer, ethical art party portland tumblr godard quinoa occaecat et. Stumptown art party ea bushwick. Cardigan DIY non cred ullamco duis. Id gastropub pop-up narwhal culpa fanny pack voluptate, street art gluten-free
    eiusmod quis aute lo-fi. Nostrud ethical irure keffiyeh umami lomo. Twee swag nihil culpa odd future.


  </p>

  <p>



    Cupidatat master cleanse carles small batch VHS. Brooklyn umami odio, post-ironic selvage hella farm-to-table. Brooklyn DIY cardigan cosby sweater marfa. Gastropub bicycle rights in seitan non small batch. Placeat non street art umami, yr wolf sed skateboard
    cupidatat direct trade seitan put a bird on it occaecat small batch. Hoodie marfa umami, enim scenester cred synth vero gastropub aliqua brunch mlkshk ut. Sed brunch pop-up irony quis. Etsy stumptown 3 wolf moon in carles, vinyl chillwave. Beard sapiente
    nulla banh mi cosby sweater 8-bit craft beer, ethical art party portland tumblr godard quinoa occaecat et. Stumptown art party ea bushwick. Cardigan DIY non cred ullamco duis. Id gastropub pop-up narwhal culpa fanny pack voluptate, street art gluten-free
    eiusmod quis aute lo-fi. Nostrud ethical irure keffiyeh umami lomo. Twee swag nihil culpa odd future.


  </p>

  <p>



    Cupidatat master cleanse carles small batch VHS. Brooklyn umami odio, post-ironic selvage hella farm-to-table. Brooklyn DIY cardigan cosby sweater marfa. Gastropub bicycle rights in seitan non small batch. Placeat non street art umami, yr wolf sed skateboard
    cupidatat direct trade seitan put a bird on it occaecat small batch. Hoodie marfa umami, enim scenester cred synth vero gastropub aliqua brunch mlkshk ut. Sed brunch pop-up irony quis. Etsy stumptown 3 wolf moon in carles, vinyl chillwave. Beard sapiente
    nulla banh mi cosby sweater 8-bit craft beer, ethical art party portland tumblr godard quinoa occaecat et. Stumptown art party ea bushwick. Cardigan DIY non cred ullamco duis. Id gastropub pop-up narwhal culpa fanny pack voluptate, street art gluten-free
    eiusmod quis aute lo-fi. Nostrud ethical irure keffiyeh umami lomo. Twee swag nihil culpa odd future.


  </p>

  <p>



    Cupidatat master cleanse carles small batch VHS. Brooklyn umami odio, post-ironic selvage hella farm-to-table. Brooklyn DIY cardigan cosby sweater marfa. Gastropub bicycle rights in seitan non small batch. Placeat non street art umami, yr wolf sed skateboard
    cupidatat direct trade seitan put a bird on it occaecat small batch. Hoodie marfa umami, enim scenester cred synth vero gastropub aliqua brunch mlkshk ut. Sed brunch pop-up irony quis. Etsy stumptown 3 wolf moon in carles, vinyl chillwave. Beard sapiente
    nulla banh mi cosby sweater 8-bit craft beer, ethical art party portland tumblr godard quinoa occaecat et. Stumptown art party ea bushwick. Cardigan DIY non cred ullamco duis. Id gastropub pop-up narwhal culpa fanny pack voluptate, street art gluten-free
    eiusmod quis aute lo-fi. Nostrud ethical irure keffiyeh umami lomo. Twee swag nihil culpa odd future.


  </p>

  <p>



    Cupidatat master cleanse carles small batch VHS. Brooklyn umami odio, post-ironic selvage hella farm-to-table. Brooklyn DIY cardigan cosby sweater marfa. Gastropub bicycle rights in seitan non small batch. Placeat non street art umami, yr wolf sed skateboard
    cupidatat direct trade seitan put a bird on it occaecat small batch. Hoodie marfa umami, enim scenester cred synth vero gastropub aliqua brunch mlkshk ut. Sed brunch pop-up irony quis. Etsy stumptown 3 wolf moon in carles, vinyl chillwave. Beard sapiente
    nulla banh mi cosby sweater 8-bit craft beer, ethical art party portland tumblr godard quinoa occaecat et. Stumptown art party ea bushwick. Cardigan DIY non cred ullamco duis. Id gastropub pop-up narwhal culpa fanny pack voluptate, street art gluten-free
    eiusmod quis aute lo-fi. Nostrud ethical irure keffiyeh umami lomo. Twee swag nihil culpa odd future.


  </p>

  <p>



    Cupidatat master cleanse carles small batch VHS. Brooklyn umami odio, post-ironic selvage hella farm-to-table. Brooklyn DIY cardigan cosby sweater marfa. Gastropub bicycle rights in seitan non small batch. Placeat non street art umami, yr wolf sed skateboard
    cupidatat direct trade seitan put a bird on it occaecat small batch. Hoodie marfa umami, enim scenester cred synth vero gastropub aliqua brunch mlkshk ut. Sed brunch pop-up irony quis. Etsy stumptown 3 wolf moon in carles, vinyl chillwave. Beard sapiente
    nulla banh mi cosby sweater 8-bit craft beer, ethical art party portland tumblr godard quinoa occaecat et. Stumptown art party ea bushwick. Cardigan DIY non cred ullamco duis. Id gastropub pop-up narwhal culpa fanny pack voluptate, street art gluten-free
    eiusmod quis aute lo-fi. Nostrud ethical irure keffiyeh umami lomo. Twee swag nihil culpa odd future.


  </p>

  <p>



    Cupidatat master cleanse carles small batch VHS. Brooklyn umami odio, post-ironic selvage hella farm-to-table. Brooklyn DIY cardigan cosby sweater marfa. Gastropub bicycle rights in seitan non small batch. Placeat non street art umami, yr wolf sed skateboard
    cupidatat direct trade seitan put a bird on it occaecat small batch. Hoodie marfa umami, enim scenester cred synth vero gastropub aliqua brunch mlkshk ut. Sed brunch pop-up irony quis. Etsy stumptown 3 wolf moon in carles, vinyl chillwave. Beard sapiente
    nulla banh mi cosby sweater 8-bit craft beer, ethical art party portland tumblr godard quinoa occaecat et. Stumptown art party ea bushwick. Cardigan DIY non cred ullamco duis. Id gastropub pop-up narwhal culpa fanny pack voluptate, street art gluten-free
    eiusmod quis aute lo-fi. Nostrud ethical irure keffiyeh umami lomo. Twee swag nihil culpa odd future.


  </p>
  <p>



    Cupidatat master cleanse carles small batch VHS. Brooklyn umami odio, post-ironic selvage hella farm-to-table. Brooklyn DIY cardigan cosby sweater marfa. Gastropub bicycle rights in seitan non small batch. Placeat non street art umami, yr wolf sed skateboard
    cupidatat direct trade seitan put a bird on it occaecat small batch. Hoodie marfa umami, enim scenester cred synth vero gastropub aliqua brunch mlkshk ut. Sed brunch pop-up irony quis. Etsy stumptown 3 wolf moon in carles, vinyl chillwave. Beard sapiente
    nulla banh mi cosby sweater 8-bit craft beer, ethical art party portland tumblr godard quinoa occaecat et. Stumptown art party ea bushwick. Cardigan DIY non cred ullamco duis. Id gastropub pop-up narwhal culpa fanny pack voluptate, street art gluten-free
    eiusmod quis aute lo-fi. Nostrud ethical irure keffiyeh umami lomo. Twee swag nihil culpa odd future.


  </p>

  <p>



    Cupidatat master cleanse carles small batch VHS. Brooklyn umami odio, post-ironic selvage hella farm-to-table. Brooklyn DIY cardigan cosby sweater marfa. Gastropub bicycle rights in seitan non small batch. Placeat non street art umami, yr wolf sed skateboard
    cupidatat direct trade seitan put a bird on it occaecat small batch. Hoodie marfa umami, enim scenester cred synth vero gastropub aliqua brunch mlkshk ut. Sed brunch pop-up irony quis. Etsy stumptown 3 wolf moon in carles, vinyl chillwave. Beard sapiente
    nulla banh mi cosby sweater 8-bit craft beer, ethical art party portland tumblr godard quinoa occaecat et. Stumptown art party ea bushwick. Cardigan DIY non cred ullamco duis. Id gastropub pop-up narwhal culpa fanny pack voluptate, street art gluten-free
    eiusmod quis aute lo-fi. Nostrud ethical irure keffiyeh umami lomo. Twee swag nihil culpa odd future.


  </p>

  <p>



    Cupidatat master cleanse carles small batch VHS. Brooklyn umami odio, post-ironic selvage hella farm-to-table. Brooklyn DIY cardigan cosby sweater marfa. Gastropub bicycle rights in seitan non small batch. Placeat non street art umami, yr wolf sed skateboard
    cupidatat direct trade seitan put a bird on it occaecat small batch. Hoodie marfa umami, enim scenester cred synth vero gastropub aliqua brunch mlkshk ut. Sed brunch pop-up irony quis. Etsy stumptown 3 wolf moon in carles, vinyl chillwave. Beard sapiente
    nulla banh mi cosby sweater 8-bit craft beer, ethical art party portland tumblr godard quinoa occaecat et. Stumptown art party ea bushwick. Cardigan DIY non cred ullamco duis. Id gastropub pop-up narwhal culpa fanny pack voluptate, street art gluten-free
    eiusmod quis aute lo-fi. Nostrud ethical irure keffiyeh umami lomo. Twee swag nihil culpa odd future.


  </p>

  <p>



    Cupidatat master cleanse carles small batch VHS. Brooklyn umami odio, post-ironic selvage hella farm-to-table. Brooklyn DIY cardigan cosby sweater marfa. Gastropub bicycle rights in seitan non small batch. Placeat non street art umami, yr wolf sed skateboard
    cupidatat direct trade seitan put a bird on it occaecat small batch. Hoodie marfa umami, enim scenester cred synth vero gastropub aliqua brunch mlkshk ut. Sed brunch pop-up irony quis. Etsy stumptown 3 wolf moon in carles, vinyl chillwave. Beard sapiente
    nulla banh mi cosby sweater 8-bit craft beer, ethical art party portland tumblr godard quinoa occaecat et. Stumptown art party ea bushwick. Cardigan DIY non cred ullamco duis. Id gastropub pop-up narwhal culpa fanny pack voluptate, street art gluten-free
    eiusmod quis aute lo-fi. Nostrud ethical irure keffiyeh umami lomo. Twee swag nihil culpa odd future.


  </p>

  <p>



    Cupidatat master cleanse carles small batch VHS. Brooklyn umami odio, post-ironic selvage hella farm-to-table. Brooklyn DIY cardigan cosby sweater marfa. Gastropub bicycle rights in seitan non small batch. Placeat non street art umami, yr wolf sed skateboard
    cupidatat direct trade seitan put a bird on it occaecat small batch. Hoodie marfa umami, enim scenester cred synth vero gastropub aliqua brunch mlkshk ut. Sed brunch pop-up irony quis. Etsy stumptown 3 wolf moon in carles, vinyl chillwave. Beard sapiente
    nulla banh mi cosby sweater 8-bit craft beer, ethical art party portland tumblr godard quinoa occaecat et. Stumptown art party ea bushwick. Cardigan DIY non cred ullamco duis. Id gastropub pop-up narwhal culpa fanny pack voluptate, street art gluten-free
    eiusmod quis aute lo-fi. Nostrud ethical irure keffiyeh umami lomo. Twee swag nihil culpa odd future.


  </p>

  <p>



    Cupidatat master cleanse carles small batch VHS. Brooklyn umami odio, post-ironic selvage hella farm-to-table. Brooklyn DIY cardigan cosby sweater marfa. Gastropub bicycle rights in seitan non small batch. Placeat non street art umami, yr wolf sed skateboard
    cupidatat direct trade seitan put a bird on it occaecat small batch. Hoodie marfa umami, enim scenester cred synth vero gastropub aliqua brunch mlkshk ut. Sed brunch pop-up irony quis. Etsy stumptown 3 wolf moon in carles, vinyl chillwave. Beard sapiente
    nulla banh mi cosby sweater 8-bit craft beer, ethical art party portland tumblr godard quinoa occaecat et. Stumptown art party ea bushwick. Cardigan DIY non cred ullamco duis. Id gastropub pop-up narwhal culpa fanny pack voluptate, street art gluten-free
    eiusmod quis aute lo-fi. Nostrud ethical irure keffiyeh umami lomo. Twee swag nihil culpa odd future.


  </p>
  <p>



    Cupidatat master cleanse carles small batch VHS. Brooklyn umami odio, post-ironic selvage hella farm-to-table. Brooklyn DIY cardigan cosby sweater marfa. Gastropub bicycle rights in seitan non small batch. Placeat non street art umami, yr wolf sed skateboard
    cupidatat direct trade seitan put a bird on it occaecat small batch. Hoodie marfa umami, enim scenester cred synth vero gastropub aliqua brunch mlkshk ut. Sed brunch pop-up irony quis. Etsy stumptown 3 wolf moon in carles, vinyl chillwave. Beard sapiente
    nulla banh mi cosby sweater 8-bit craft beer, ethical art party portland tumblr godard quinoa occaecat et. Stumptown art party ea bushwick. Cardigan DIY non cred ullamco duis. Id gastropub pop-up narwhal culpa fanny pack voluptate, street art gluten-free
    eiusmod quis aute lo-fi. Nostrud ethical irure keffiyeh umami lomo. Twee swag nihil culpa odd future.


  </p>

  <p>



    Cupidatat master cleanse carles small batch VHS. Brooklyn umami odio, post-ironic selvage hella farm-to-table. Brooklyn DIY cardigan cosby sweater marfa. Gastropub bicycle rights in seitan non small batch. Placeat non street art umami, yr wolf sed skateboard
    cupidatat direct trade seitan put a bird on it occaecat small batch. Hoodie marfa umami, enim scenester cred synth vero gastropub aliqua brunch mlkshk ut. Sed brunch pop-up irony quis. Etsy stumptown 3 wolf moon in carles, vinyl chillwave. Beard sapiente
    nulla banh mi cosby sweater 8-bit craft beer, ethical art party portland tumblr godard quinoa occaecat et. Stumptown art party ea bushwick. Cardigan DIY non cred ullamco duis. Id gastropub pop-up narwhal culpa fanny pack voluptate, street art gluten-free
    eiusmod quis aute lo-fi. Nostrud ethical irure keffiyeh umami lomo. Twee swag nihil culpa odd future.


  </p>

  <p>



    Cupidatat master cleanse carles small batch VHS. Brooklyn umami odio, post-ironic selvage hella farm-to-table. Brooklyn DIY cardigan cosby sweater marfa. Gastropub bicycle rights in seitan non small batch. Placeat non street art umami, yr wolf sed skateboard
    cupidatat direct trade seitan put a bird on it occaecat small batch. Hoodie marfa umami, enim scenester cred synth vero gastropub aliqua brunch mlkshk ut. Sed brunch pop-up irony quis. Etsy stumptown 3 wolf moon in carles, vinyl chillwave. Beard sapiente
    nulla banh mi cosby sweater 8-bit craft beer, ethical art party portland tumblr godard quinoa occaecat et. Stumptown art party ea bushwick. Cardigan DIY non cred ullamco duis. Id gastropub pop-up narwhal culpa fanny pack voluptate, street art gluten-free
    eiusmod quis aute lo-fi. Nostrud ethical irure keffiyeh umami lomo. Twee swag nihil culpa odd future.


  </p>

  <p>



    Cupidatat master cleanse carles small batch VHS. Brooklyn umami odio, post-ironic selvage hella farm-to-table. Brooklyn DIY cardigan cosby sweater marfa. Gastropub bicycle rights in seitan non small batch. Placeat non street art umami, yr wolf sed skateboard
    cupidatat direct trade seitan put a bird on it occaecat small batch. Hoodie marfa umami, enim scenester cred synth vero gastropub aliqua brunch mlkshk ut. Sed brunch pop-up irony quis. Etsy stumptown 3 wolf moon in carles, vinyl chillwave. Beard sapiente
    nulla banh mi cosby sweater 8-bit craft beer, ethical art party portland tumblr godard quinoa occaecat et. Stumptown art party ea bushwick. Cardigan DIY non cred ullamco duis. Id gastropub pop-up narwhal culpa fanny pack voluptate, street art gluten-free
    eiusmod quis aute lo-fi. Nostrud ethical irure keffiyeh umami lomo. Twee swag nihil culpa odd future.


  </p>

  <p>



    Cupidatat master cleanse carles small batch VHS. Brooklyn umami odio, post-ironic selvage hella farm-to-table. Brooklyn DIY cardigan cosby sweater marfa. Gastropub bicycle rights in seitan non small batch. Placeat non street art umami, yr wolf sed skateboard
    cupidatat direct trade seitan put a bird on it occaecat small batch. Hoodie marfa umami, enim scenester cred synth vero gastropub aliqua brunch mlkshk ut. Sed brunch pop-up irony quis. Etsy stumptown 3 wolf moon in carles, vinyl chillwave. Beard sapiente
    nulla banh mi cosby sweater 8-bit craft beer, ethical art party portland tumblr godard quinoa occaecat et. Stumptown art party ea bushwick. Cardigan DIY non cred ullamco duis. Id gastropub pop-up narwhal culpa fanny pack voluptate, street art gluten-free
    eiusmod quis aute lo-fi. Nostrud ethical irure keffiyeh umami lomo. Twee swag nihil culpa odd future.


  </p>

  <p>



    Cupidatat master cleanse carles small batch VHS. Brooklyn umami odio, post-ironic selvage hella farm-to-table. Brooklyn DIY cardigan cosby sweater marfa. Gastropub bicycle rights in seitan non small batch. Placeat non street art umami, yr wolf sed skateboard
    cupidatat direct trade seitan put a bird on it occaecat small batch. Hoodie marfa umami, enim scenester cred synth vero gastropub aliqua brunch mlkshk ut. Sed brunch pop-up irony quis. Etsy stumptown 3 wolf moon in carles, vinyl chillwave. Beard sapiente
    nulla banh mi cosby sweater 8-bit craft beer, ethical art party portland tumblr godard quinoa occaecat et. Stumptown art party ea bushwick. Cardigan DIY non cred ullamco duis. Id gastropub pop-up narwhal culpa fanny pack voluptate, street art gluten-free
    eiusmod quis aute lo-fi. Nostrud ethical irure keffiyeh umami lomo. Twee swag nihil culpa odd future.


  </p>

</div>

​

https://jsfiddle.net/gilbertlucas46/9nnLcr1y/3/

Answer 1

​

$('.list').scroll(function() {
   var hT = $('.list').offset().top,
       hH = $('.list').outerHeight(),
       wH = $(window).height(),
       wS = $(this).scrollTop();
    console.log((hT-wH) , wS);
   if (wS > hT+hH-wH && $("#searchModalForm").attr("displayed") === "false") {
    $('#searchModalForm').modal('show');
     $("#searchModalForm").attr("displayed", "true");
   }
});

#searchModalForm {
  display: none;
}
.list {
  height: 500px;
  overflow: auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div class="list">
  <h2 id="clickme">Modal Example</h2>
  <!-- Trigger the modal with a button -->


  <!-- Modal -->
  <div class="modal fade" id="searchModalForm" role="dialog" displayed="false">
    <div class="modal-dialog">

      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Drop your Number here for a CallBack..</h4>
        </div>
        <div class="modal-body">


          <form style="color:#000;" id="contact-form" action="number.php">

            <div class="col-md-4">
              <div class="form-group">

                <input type="numeric" class="form-control" name="number" id="number" placeholder="Enter Cell Number" required /> </div>
            </div>



          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          <button type="submit" class="btn btn-primary pull-right" id="btnContactUs">
            Request a CallBack</button>
        </div>
      </div>

    </div>
  </div>







<p>



  Cupidatat master cleanse carles small batch VHS. Brooklyn umami odio, post-ironic selvage hella farm-to-table. Brooklyn DIY cardigan cosby sweater marfa. Gastropub bicycle rights in seitan non small batch. Placeat non street art umami, yr wolf sed skateboard
  cupidatat direct trade seitan put a bird on it occaecat small batch. Hoodie marfa umami, enim scenester cred synth vero gastropub aliqua brunch mlkshk ut. Sed brunch pop-up irony quis. Etsy stumptown 3 wolf moon in carles, vinyl chillwave. Beard sapiente
  nulla banh mi cosby sweater 8-bit craft beer, ethical art party portland tumblr godard quinoa occaecat et. Stumptown art party ea bushwick. Cardigan DIY non cred ullamco duis. Id gastropub pop-up narwhal culpa fanny pack voluptate, street art gluten-free
  eiusmod quis aute lo-fi. Nostrud ethical irure keffiyeh umami lomo. Twee swag nihil culpa odd future.


</p>

<p>



  Cupidatat master cleanse carles small batch VHS. Brooklyn umami odio, post-ironic selvage hella farm-to-table. Brooklyn DIY cardigan cosby sweater marfa. Gastropub bicycle rights in seitan non small batch. Placeat non street art umami, yr wolf sed skateboard
  cupidatat direct trade seitan put a bird on it occaecat small batch. Hoodie marfa umami, enim scenester cred synth vero gastropub aliqua brunch mlkshk ut. Sed brunch pop-up irony quis. Etsy stumptown 3 wolf moon in carles, vinyl chillwave. Beard sapiente
  nulla banh mi cosby sweater 8-bit craft beer, ethical art party portland tumblr godard quinoa occaecat et. Stumptown art party ea bushwick. Cardigan DIY non cred ullamco duis. Id gastropub pop-up narwhal culpa fanny pack voluptate, street art gluten-free
  eiusmod quis aute lo-fi. Nostrud ethical irure keffiyeh umami lomo. Twee swag nihil culpa odd future.


</p>

<p>



  Cupidatat master cleanse carles small batch VHS. Brooklyn umami odio, post-ironic selvage hella farm-to-table. Brooklyn DIY cardigan cosby sweater marfa. Gastropub bicycle rights in seitan non small batch. Placeat non street art umami, yr wolf sed skateboard
  cupidatat direct trade seitan put a bird on it occaecat small batch. Hoodie marfa umami, enim scenester cred synth vero gastropub aliqua brunch mlkshk ut. Sed brunch pop-up irony quis. Etsy stumptown 3 wolf moon in carles, vinyl chillwave. Beard sapiente
  nulla banh mi cosby sweater 8-bit craft beer, ethical art party portland tumblr godard quinoa occaecat et. Stumptown art party ea bushwick. Cardigan DIY non cred ullamco duis. Id gastropub pop-up narwhal culpa fanny pack voluptate, street art gluten-free
  eiusmod quis aute lo-fi. Nostrud ethical irure keffiyeh umami lomo. Twee swag nihil culpa odd future.


</p>

<p>



  Cupidatat master cleanse carles small batch VHS. Brooklyn umami odio, post-ironic selvage hella farm-to-table. Brooklyn DIY cardigan cosby sweater marfa. Gastropub bicycle rights in seitan non small batch. Placeat non street art umami, yr wolf sed skateboard
  cupidatat direct trade seitan put a bird on it occaecat small batch. Hoodie marfa umami, enim scenester cred synth vero gastropub aliqua brunch mlkshk ut. Sed brunch pop-up irony quis. Etsy stumptown 3 wolf moon in carles, vinyl chillwave. Beard sapiente
  nulla banh mi cosby sweater 8-bit craft beer, ethical art party portland tumblr godard quinoa occaecat et. Stumptown art party ea bushwick. Cardigan DIY non cred ullamco duis. Id gastropub pop-up narwhal culpa fanny pack voluptate, street art gluten-free
  eiusmod quis aute lo-fi. Nostrud ethical irure keffiyeh umami lomo. Twee swag nihil culpa odd future.


</p>

<p>



  Cupidatat master cleanse carles small batch VHS. Brooklyn umami odio, post-ironic selvage hella farm-to-table. Brooklyn DIY cardigan cosby sweater marfa. Gastropub bicycle rights in seitan non small batch. Placeat non street art umami, yr wolf sed skateboard
  cupidatat direct trade seitan put a bird on it occaecat small batch. Hoodie marfa umami, enim scenester cred synth vero gastropub aliqua brunch mlkshk ut. Sed brunch pop-up irony quis. Etsy stumptown 3 wolf moon in carles, vinyl chillwave. Beard sapiente
  nulla banh mi cosby sweater 8-bit craft beer, ethical art party portland tumblr godard quinoa occaecat et. Stumptown art party ea bushwick. Cardigan DIY non cred ullamco duis. Id gastropub pop-up narwhal culpa fanny pack voluptate, street art gluten-free
  eiusmod quis aute lo-fi. Nostrud ethical irure keffiyeh umami lomo. Twee swag nihil culpa odd future.


</p>

<p>



  Cupidatat master cleanse carles small batch VHS. Brooklyn umami odio, post-ironic selvage hella farm-to-table. Brooklyn DIY cardigan cosby sweater marfa. Gastropub bicycle rights in seitan non small batch. Placeat non street art umami, yr wolf sed skateboard
  cupidatat direct trade seitan put a bird on it occaecat small batch. Hoodie marfa umami, enim scenester cred synth vero gastropub aliqua brunch mlkshk ut. Sed brunch pop-up irony quis. Etsy stumptown 3 wolf moon in carles, vinyl chillwave. Beard sapiente
  nulla banh mi cosby sweater 8-bit craft beer, ethical art party portland tumblr godard quinoa occaecat et. Stumptown art party ea bushwick. Cardigan DIY non cred ullamco duis. Id gastropub pop-up narwhal culpa fanny pack voluptate, street art gluten-free
  eiusmod quis aute lo-fi. Nostrud ethical irure keffiyeh umami lomo. Twee swag nihil culpa odd future.


</p>

<p>



  Cupidatat master cleanse carles small batch VHS. Brooklyn umami odio, post-ironic selvage hella farm-to-table. Brooklyn DIY cardigan cosby sweater marfa. Gastropub bicycle rights in seitan non small batch. Placeat non street art umami, yr wolf sed skateboard
  cupidatat direct trade seitan put a bird on it occaecat small batch. Hoodie marfa umami, enim scenester cred synth vero gastropub aliqua brunch mlkshk ut. Sed brunch pop-up irony quis. Etsy stumptown 3 wolf moon in carles, vinyl chillwave. Beard sapiente
  nulla banh mi cosby sweater 8-bit craft beer, ethical art party portland tumblr godard quinoa occaecat et. Stumptown art party ea bushwick. Cardigan DIY non cred ullamco duis. Id gastropub pop-up narwhal culpa fanny pack voluptate, street art gluten-free
  eiusmod quis aute lo-fi. Nostrud ethical irure keffiyeh umami lomo. Twee swag nihil culpa odd future.


</p>
<p>



  Cupidatat master cleanse carles small batch VHS. Brooklyn umami odio, post-ironic selvage hella farm-to-table. Brooklyn DIY cardigan cosby sweater marfa. Gastropub bicycle rights in seitan non small batch. Placeat non street art umami, yr wolf sed skateboard
  cupidatat direct trade seitan put a bird on it occaecat small batch. Hoodie marfa umami, enim scenester cred synth vero gastropub aliqua brunch mlkshk ut. Sed brunch pop-up irony quis. Etsy stumptown 3 wolf moon in carles, vinyl chillwave. Beard sapiente
  nulla banh mi cosby sweater 8-bit craft beer, ethical art party portland tumblr godard quinoa occaecat et. Stumptown art party ea bushwick. Cardigan DIY non cred ullamco duis. Id gastropub pop-up narwhal culpa fanny pack voluptate, street art gluten-free
  eiusmod quis aute lo-fi. Nostrud ethical irure keffiyeh umami lomo. Twee swag nihil culpa odd future.


</p>

<p>



  Cupidatat master cleanse carles small batch VHS. Brooklyn umami odio, post-ironic selvage hella farm-to-table. Brooklyn DIY cardigan cosby sweater marfa. Gastropub bicycle rights in seitan non small batch. Placeat non street art umami, yr wolf sed skateboard
  cupidatat direct trade seitan put a bird on it occaecat small batch. Hoodie marfa umami, enim scenester cred synth vero gastropub aliqua brunch mlkshk ut. Sed brunch pop-up irony quis. Etsy stumptown 3 wolf moon in carles, vinyl chillwave. Beard sapiente
  nulla banh mi cosby sweater 8-bit craft beer, ethical art party portland tumblr godard quinoa occaecat et. Stumptown art party ea bushwick. Cardigan DIY non cred ullamco duis. Id gastropub pop-up narwhal culpa fanny pack voluptate, street art gluten-free
  eiusmod quis aute lo-fi. Nostrud ethical irure keffiyeh umami lomo. Twee swag nihil culpa odd future.


</p>

<p>



  Cupidatat master cleanse carles small batch VHS. Brooklyn umami odio, post-ironic selvage hella farm-to-table. Brooklyn DIY cardigan cosby sweater marfa. Gastropub bicycle rights in seitan non small batch. Placeat non street art umami, yr wolf sed skateboard
  cupidatat direct trade seitan put a bird on it occaecat small batch. Hoodie marfa umami, enim scenester cred synth vero gastropub aliqua brunch mlkshk ut. Sed brunch pop-up irony quis. Etsy stumptown 3 wolf moon in carles, vinyl chillwave. Beard sapiente
  nulla banh mi cosby sweater 8-bit craft beer, ethical art party portland tumblr godard quinoa occaecat et. Stumptown art party ea bushwick. Cardigan DIY non cred ullamco duis. Id gastropub pop-up narwhal culpa fanny pack voluptate, street art gluten-free
  eiusmod quis aute lo-fi. Nostrud ethical irure keffiyeh umami lomo. Twee swag nihil culpa odd future.


</p>

<p>



  Cupidatat master cleanse carles small batch VHS. Brooklyn umami odio, post-ironic selvage hella farm-to-table. Brooklyn DIY cardigan cosby sweater marfa. Gastropub bicycle rights in seitan non small batch. Placeat non street art umami, yr wolf sed skateboard
  cupidatat direct trade seitan put a bird on it occaecat small batch. Hoodie marfa umami, enim scenester cred synth vero gastropub aliqua brunch mlkshk ut. Sed brunch pop-up irony quis. Etsy stumptown 3 wolf moon in carles, vinyl chillwave. Beard sapiente
  nulla banh mi cosby sweater 8-bit craft beer, ethical art party portland tumblr godard quinoa occaecat et. Stumptown art party ea bushwick. Cardigan DIY non cred ullamco duis. Id gastropub pop-up narwhal culpa fanny pack voluptate, street art gluten-free
  eiusmod quis aute lo-fi. Nostrud ethical irure keffiyeh umami lomo. Twee swag nihil culpa odd future.


</p>

<p>



  Cupidatat master cleanse carles small batch VHS. Brooklyn umami odio, post-ironic selvage hella farm-to-table. Brooklyn DIY cardigan cosby sweater marfa. Gastropub bicycle rights in seitan non small batch. Placeat non street art umami, yr wolf sed skateboard
  cupidatat direct trade seitan put a bird on it occaecat small batch. Hoodie marfa umami, enim scenester cred synth vero gastropub aliqua brunch mlkshk ut. Sed brunch pop-up irony quis. Etsy stumptown 3 wolf moon in carles, vinyl chillwave. Beard sapiente
  nulla banh mi cosby sweater 8-bit craft beer, ethical art party portland tumblr godard quinoa occaecat et. Stumptown art party ea bushwick. Cardigan DIY non cred ullamco duis. Id gastropub pop-up narwhal culpa fanny pack voluptate, street art gluten-free
  eiusmod quis aute lo-fi. Nostrud ethical irure keffiyeh umami lomo. Twee swag nihil culpa odd future.


</p>

<p>



  Cupidatat master cleanse carles small batch VHS. Brooklyn umami odio, post-ironic selvage hella farm-to-table. Brooklyn DIY cardigan cosby sweater marfa. Gastropub bicycle rights in seitan non small batch. Placeat non street art umami, yr wolf sed skateboard
  cupidatat direct trade seitan put a bird on it occaecat small batch. Hoodie marfa umami, enim scenester cred synth vero gastropub aliqua brunch mlkshk ut. Sed brunch pop-up irony quis. Etsy stumptown 3 wolf moon in carles, vinyl chillwave. Beard sapiente
  nulla banh mi cosby sweater 8-bit craft beer, ethical art party portland tumblr godard quinoa occaecat et. Stumptown art party ea bushwick. Cardigan DIY non cred ullamco duis. Id gastropub pop-up narwhal culpa fanny pack voluptate, street art gluten-free
  eiusmod quis aute lo-fi. Nostrud ethical irure keffiyeh umami lomo. Twee swag nihil culpa odd future.


</p>
<p>



  Cupidatat master cleanse carles small batch VHS. Brooklyn umami odio, post-ironic selvage hella farm-to-table. Brooklyn DIY cardigan cosby sweater marfa. Gastropub bicycle rights in seitan non small batch. Placeat non street art umami, yr wolf sed skateboard
  cupidatat direct trade seitan put a bird on it occaecat small batch. Hoodie marfa umami, enim scenester cred synth vero gastropub aliqua brunch mlkshk ut. Sed brunch pop-up irony quis. Etsy stumptown 3 wolf moon in carles, vinyl chillwave. Beard sapiente
  nulla banh mi cosby sweater 8-bit craft beer, ethical art party portland tumblr godard quinoa occaecat et. Stumptown art party ea bushwick. Cardigan DIY non cred ullamco duis. Id gastropub pop-up narwhal culpa fanny pack voluptate, street art gluten-free
  eiusmod quis aute lo-fi. Nostrud ethical irure keffiyeh umami lomo. Twee swag nihil culpa odd future.


</p>

<p>



  Cupidatat master cleanse carles small batch VHS. Brooklyn umami odio, post-ironic selvage hella farm-to-table. Brooklyn DIY cardigan cosby sweater marfa. Gastropub bicycle rights in seitan non small batch. Placeat non street art umami, yr wolf sed skateboard
  cupidatat direct trade seitan put a bird on it occaecat small batch. Hoodie marfa umami, enim scenester cred synth vero gastropub aliqua brunch mlkshk ut. Sed brunch pop-up irony quis. Etsy stumptown 3 wolf moon in carles, vinyl chillwave. Beard sapiente
  nulla banh mi cosby sweater 8-bit craft beer, ethical art party portland tumblr godard quinoa occaecat et. Stumptown art party ea bushwick. Cardigan DIY non cred ullamco duis. Id gastropub pop-up narwhal culpa fanny pack voluptate, street art gluten-free
  eiusmod quis aute lo-fi. Nostrud ethical irure keffiyeh umami lomo. Twee swag nihil culpa odd future.


</p>

<p>



  Cupidatat master cleanse carles small batch VHS. Brooklyn umami odio, post-ironic selvage hella farm-to-table. Brooklyn DIY cardigan cosby sweater marfa. Gastropub bicycle rights in seitan non small batch. Placeat non street art umami, yr wolf sed skateboard
  cupidatat direct trade seitan put a bird on it occaecat small batch. Hoodie marfa umami, enim scenester cred synth vero gastropub aliqua brunch mlkshk ut. Sed brunch pop-up irony quis. Etsy stumptown 3 wolf moon in carles, vinyl chillwave. Beard sapiente
  nulla banh mi cosby sweater 8-bit craft beer, ethical art party portland tumblr godard quinoa occaecat et. Stumptown art party ea bushwick. Cardigan DIY non cred ullamco duis. Id gastropub pop-up narwhal culpa fanny pack voluptate, street art gluten-free
  eiusmod quis aute lo-fi. Nostrud ethical irure keffiyeh umami lomo. Twee swag nihil culpa odd future.


</p>

<p>



  Cupidatat master cleanse carles small batch VHS. Brooklyn umami odio, post-ironic selvage hella farm-to-table. Brooklyn DIY cardigan cosby sweater marfa. Gastropub bicycle rights in seitan non small batch. Placeat non street art umami, yr wolf sed skateboard
  cupidatat direct trade seitan put a bird on it occaecat small batch. Hoodie marfa umami, enim scenester cred synth vero gastropub aliqua brunch mlkshk ut. Sed brunch pop-up irony quis. Etsy stumptown 3 wolf moon in carles, vinyl chillwave. Beard sapiente
  nulla banh mi cosby sweater 8-bit craft beer, ethical art party portland tumblr godard quinoa occaecat et. Stumptown art party ea bushwick. Cardigan DIY non cred ullamco duis. Id gastropub pop-up narwhal culpa fanny pack voluptate, street art gluten-free
  eiusmod quis aute lo-fi. Nostrud ethical irure keffiyeh umami lomo. Twee swag nihil culpa odd future.


</p>

<p>



  Cupidatat master cleanse carles small batch VHS. Brooklyn umami odio, post-ironic selvage hella farm-to-table. Brooklyn DIY cardigan cosby sweater marfa. Gastropub bicycle rights in seitan non small batch. Placeat non street art umami, yr wolf sed skateboard
  cupidatat direct trade seitan put a bird on it occaecat small batch. Hoodie marfa umami, enim scenester cred synth vero gastropub aliqua brunch mlkshk ut. Sed brunch pop-up irony quis. Etsy stumptown 3 wolf moon in carles, vinyl chillwave. Beard sapiente
  nulla banh mi cosby sweater 8-bit craft beer, ethical art party portland tumblr godard quinoa occaecat et. Stumptown art party ea bushwick. Cardigan DIY non cred ullamco duis. Id gastropub pop-up narwhal culpa fanny pack voluptate, street art gluten-free
  eiusmod quis aute lo-fi. Nostrud ethical irure keffiyeh umami lomo. Twee swag nihil culpa odd future.


</p>

<p>



  Cupidatat master cleanse carles small batch VHS. Brooklyn umami odio, post-ironic selvage hella farm-to-table. Brooklyn DIY cardigan cosby sweater marfa. Gastropub bicycle rights in seitan non small batch. Placeat non street art umami, yr wolf sed skateboard
  cupidatat direct trade seitan put a bird on it occaecat small batch. Hoodie marfa umami, enim scenester cred synth vero gastropub aliqua brunch mlkshk ut. Sed brunch pop-up irony quis. Etsy stumptown 3 wolf moon in carles, vinyl chillwave. Beard sapiente
  nulla banh mi cosby sweater 8-bit craft beer, ethical art party portland tumblr godard quinoa occaecat et. Stumptown art party ea bushwick. Cardigan DIY non cred ullamco duis. Id gastropub pop-up narwhal culpa fanny pack voluptate, street art gluten-free
  eiusmod quis aute lo-fi. Nostrud ethical irure keffiyeh umami lomo. Twee swag nihil culpa odd future.


</p>

</div>

​

试一试

$('.list').scroll(function() {});

代表

$(window).scroll(function() {});

Answer 2

这是参考代码，您可以根据需要修改它，只需在if中显示模式即可。

​

// custom 'scrolldelta' event extends 'scroll' event
jQuery.event.special.scrolldelta = {
    delegateType: "scroll",
    bindType: "scroll",
    handle: function (event) {
        var handleObj = event.handleObj;
        var targetData = jQuery.data(event.target);
        var ret = null;
        var elem = event.target;
        var isDoc = elem === document;
        var oldTop = targetData.top || 0;
        var oldLeft = targetData.left || 0;
        targetData.top = isDoc ? elem.documentElement.scrollTop + elem.body.scrollTop : elem.scrollTop;
        targetData.left = isDoc ? elem.documentElement.scrollLeft + elem.body.scrollLeft : elem.scrollLeft;
        event.scrollTopDelta = targetData.top - oldTop;
        event.scrollTop = targetData.top;
        event.scrollLeftDelta = targetData.left - oldLeft;
        event.scrollLeft = targetData.left;
        event.type = handleObj.origType;
        ret = handleObj.handler.apply(this, arguments);
        event.type = handleObj.type;
        return ret;
    }
};

// bind to custom 'scrolldelta' event
$(window).on('scrolldelta', function (e) {
    var top = e.scrollTop;
    var topDelta = e.scrollTopDelta;
    var left = e.scrollLeft;
    var leftDelta = e.scrollLeftDelta;
  // do stuff with the above info; for now just display it to user
    var feedbackText = 'scrollTop: ' + top.toString() + 'px (' + (topDelta >= 0 ? '+' : '') + topDelta.toString() + 'px), scrollLeft: ' + left.toString() + 'px (' + (leftDelta >= 0 ? '+' : '') + leftDelta.toString() + 'px)';
    document.getElementById('feedback').innerHTML = feedbackText;
if(top >= 300){
alert("Show Modal");
//you can write modal show code here
}
});

#content {
    /* make window tall enough for vertical scroll */
    height: 2000px;
    /* make window wide enough for horizontal scroll */
    width: 2000px;
    /* visualization of scrollable content */
    background-color: blue;
}
#feedback {
    border:2px solid red;
    padding: 4px;
    color: black;
    position: fixed;
    top: 0;
    height: 20px;
    background-color: #fff;
    font-family:'Segoe UI', 'Arial';
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='feedback'>scrollTop: 0px, scrollLeft: 0px</div>
<div id='content'></div>

​

Answer 3

这对我有用，我使用了@ruby的代码片段，并相应地更改了我的代码

function displayModalForm () {
  $('.list').scroll(function() {
        wS = $(this).scrollTop();
    if (wS > 300 && $("#searchModalForm").attr("displayed") === "false") {
     $('#searchModalForm').modal('show');
      $("#searchModalForm").attr("displayed", "true");
    }
 });
}
displayModalForm();