javascript - 如果我在特定的 div 中，如何让 jQuery 启动？

Question

正如我在标题中所说，我有一个 jQuery 函数，可以逐个字母地显示一个句子(我正在使用 typed.js 插件)。这是我的功能:

$(function () {
            $("#divInContactPage").typed({
                strings: ["Text1", "Text2"],
                loop: true
            });
        });

所以 div 在联系页面上。我站点中的所有页面都在一个文件中，我使用 div 在它们之间传递。所以要到达 contact.html 页面，我应该引用“#contact”div。

我希望此功能仅在我位于“#contact”div 时才起作用。是否可以？谢谢!

Answer 1

如果您想在 #contact div 处运行一个函数，换句话说，只要该 div 在视口(viewport)中可见，您就可以尝试下面的函数来检查它在 DOM 上的可见性就绪或在滚动上；

isScrolledIntoView(elem) // returns True if visible

   function isScrolledIntoView(elem) {
     var $elem = $(elem);
     var $window = $(window);

     var docViewTop = $window.scrollTop();
     var docViewBottom = docViewTop + $window.height();

     var elemTop = $elem.offset().top;
     var elemBottom = elemTop + $elem.height();

     return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
   }

   $('document').ready(function() {
     alert('Is Contact Div visible : ' + isScrolledIntoView('.contact'));
     alert('Is About Div visible : ' + isScrolledIntoView('.about'));
   });

.container {
  height: 1500px;
  position: relative;
}
.about {
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
}
.contact {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="container">

  <div class="contact">Contact DIV</div>
  <div class="about">About DIV</div>
</div>

或者如果你不介意，你可以使用 jquery 插件:

• jQuery Appear

用法:

$('#contact').appear(function() {
  // add here your function
 });

• jQuery Waypoints

用法:

$('#contact').waypoint(function() {
 // add here your function
});