Question

我想在用户滚动到特定ID时显示div，但我希望此div只在X秒后出现，因为滚动到达ID后。

我怎么能编辑这个小提琴呢？

$(document).ready(function() {
    $("#dvid").hide(); //hide your div initially
    var topOfOthDiv = $("#othdiv").offset().top;
    $(window).scroll(function() {
        if($(window).scrollTop() > topOfOthDiv) { //scrolled past the other div?
            $("#dvid").show(200); //reached the desired point -- show div
        }
    });
});

http://jsfiddle.net/DnJ2z/11/

Answer 1

您可以使用setTimeout

var millis = 2000;
setTimeout(function() {
     $("#dvid").show(200); //reached the desired point -- show div
}, millis);

但请记住，每次你用＃34;断点＆＃34;滚动时都会重新触发。所以你应该调整这个并在必要时首先清除你的超时或使用旗帜并且不要再试一次：

$(document).ready(function() {
      var divIsShown = false;
      var millis = 2000; // 2 seconds
      $("#dvid").hide(); //hide your div initially
      var topOfOthDiv = $("#othdiv").offset().top;
      $(window).scroll(function() {
           if(!divIsShown && $(window).scrollTop() > topOfOthDiv) { //scrolled past the other div
                setTimeout(function() {
                     $("#dvid").show(200); //reached the desired point -- show div
                     divIsShown = true;
                }, millis);
           }
      });
});

Answer 2

您只需在现有功能中添加$(document).ready(function() { $("#dvid").hide(); //hide your div initially var topOfOthDiv = $("#othdiv").offset().top; $(window).scroll(function() { if($(window).scrollTop() > topOfOthDiv) { //scrolled past the other div? setTimeout(function(){$("#dvid").show(200); }, 1000); } }); });方法即可。所以只需将div.show包装在setTimeout

中

Meteor.publish('users.name.by-game', function(code) {
  check(code, String);
  this.autorun(function() {
    const game = Game.findOne({ code });
    return Meteor.users.find(
      { _id: { $in: (game && game.getPlayersId()) || [] } },
      { fields: { 'services.gitlab.username': 1 } },
    );
  });
});

这会在你滚动到它后显示你的div 1秒。

https://www.elastic.co/guide/en/elasticsearch/reference/current/mapping-id-field.html

Answer 3

我确实只为你的代码添加了一个setTimeout和更高的身体高度，它似乎有效。如果您有任何问题，请使用代码段并在评论中提问。

如果您想在延迟一段时间后做某事，可以使用setTimeout，如果您想定期做某事，可以使用setInterval。这些都是javascript函数而不是jQuery。

如果你想要，你也可以看到jQuery的.delay()方法

$(document).ready(function() {
  $("#dvid").hide(); //hide your div initially
  var topOfOthDiv = $("#othdiv").offset().top;
  var delay = 500;
  $(window).scroll(function() {
    if ($(window).scrollTop() > topOfOthDiv) { //scrolled past the other div?
      setTimeout(function() {
        $("#dvid").show(200); //reached the desired point -- show div
      }, delay);
    }
  });


  $('#update').on('click', function() {
    delay = $('#delay').val();
  });

  $('#hide').on('click', function() {
    $("#dvid").hide(200);
  });
});

body {
  height: 1200px;
  font-family: 'Arial', Helvetica, Sans-Serif;
  color: white;
  font-weight: bold;
}

#othdiv {
  height: 30px;
  background-color: rgb(0, 140, 200);
  /*just wanted this to be pretty :)*/
  position: absolute;
  top: 100px;
  left: 0px;
}

#dvid {
  background-color: rgb(34, 177, 76);
  height: 50px;
  position: absolute;
  top: 140px;
  left: 100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="delay" value="500">
<button id="update">Update Delay</button>
<button id="hide">Hide</button>
<div id="othdiv">
  If you scroll past me, then you'll see the other div.
</div>
<div id="dvid">
  Oh hello! :D
</div>

滚动到特定ID时和X秒后显示div

3 个答案: