不在视野范围内：隐藏然后在视野范围内触发一次答案

【问题标题】：Out of view: Hide then trigger once on view不在视野范围内：隐藏然后在视野范围内触发一次
【发布时间】：2017-08-29 03:29:45
【问题描述】：

成功：以下代码有效。当 div 滚动到视图中时，它将激活 css（出现、动画等）。

问题：我只希望它触发一次（我不希望它在您滚动过去时再次隐藏或重置）。

代码如下：

;(function($) {
  $.outOfView = {
      init: function() {
        $("[data-outofview]").css('transition', 'none').addClass('outofview');
        window.setTimeout(function(){
          $("[data-outofview]").css('transition', '');
          $.outOfView.scroll();
        }, 100);
      }
    , scroll: function() {
       var $window = $(window)
         , scrolled = $(window).scrollTop()
         , windowHeight = $(window).height();

       $("[data-outofview].outofview").each(function() {
         var $this = $(this)
           , dataCoefficient = $(this).data('outofview-coefficient')
           , coefficient = dataCoefficient ? parseInt(dataCoefficient, 10) / 100 : 1
           , windowHeightPadded = windowHeight * coefficient
           , offsetTop = $this.offset().top
           , offsetBottom = offsetTop + $this.outerHeight() * coefficient;

          // If the distance from the bottom of the element to the top of the document
          // is greater than the distance from the top of the window to the top of the
          // document, OR the distance from the top of the element is less than the distance
          // from the bottom of the window to the top of the document... remove the class.
          // The element is in view.
         if ( scrolled < offsetBottom || scrolled + windowHeightPadded > offsetTop) {
           if ($this.data('outofview-timeout')) {
             window.setTimeout(function() {
               $this.removeClass('outofview');
             }, parseInt($this.data('outofview-timeout'), 10));
           } else {
             $this.removeClass('outofview');
           }
         }
       });
       // Hidden...
       $("[data-outofview]:not(.outofview)").each(function () {
         var $this = $(this)
           , dataCoefficient = $(this).data('outofview-coefficient')
           , coefficient = dataCoefficient ? parseInt(dataCoefficient, 10) / 100 : 1
           , windowHeightPadded = windowHeight * coefficient
           , offsetTop = $this.offset().top
           , offsetBottom = offsetTop + $this.outerHeight() * coefficient;

          // If the distance from the bottom of the element to the top of the document
          // is less than the distance from the top of the window to the top of the
          // document, OR the distance from the top of the element is greater than the distance
          // from the bottom of the window to the top of the document... add the class.
          // The element is out of view.
         if ( scrolled > offsetBottom || scrolled + windowHeightPadded < offsetTop) {
           $(this).addClass('outofview');
         }
       });
      }
  };

  // Reveal animations as they appear on screen
  $(window).on('scroll', $.outOfView.scroll);
  $.outOfView.init();
})(jQuery);

您能提供的任何帮助将不胜感激。虽然我以前定制过代码，但我不是专家。

【问题讨论】：

有一个值为false 的flag，一旦触发，然后将flag 值更改为true 并检查您的相同条件代码。
这听起来很有希望 Shiladitya。我仍然是 jQuery 的新手。这在代码中看起来如何？

标签： jquery onscroll

【解决方案1】：

尝试访问此链接Popup on website load once per session

我认为这是您使用 sessionStorage 所需要的，我之前尝试过并且效果很好。

【讨论】：

【解决方案2】：

我无法 100% 解决这个问题，但我确实有一个可行的解决方案。

核心是，一旦项目不在视野范围内（滚动过去），我不希望再次隐藏 div。结果，我删除了以下代码……

scrolled > offsetBottom ||

这实质上意味着脚本只会在向下滚动时触发。除非您从 div 上方向下滚动页面，否则它不会再次隐藏/触发元素。

【讨论】：