Question

当我有＃sp-pocetna10和＃sp-pocetna1时，脚本在＃sp-pocetna1之后和末尾添加＃sp-pocetna10。

这些是一页网站上各部分的ID，因此我需要在当前部分或视口（全屏显示所有部分）上添加活动的类。

如果我添加#sp-pocetna0，它将在#sp-pocetna1之前复制。

您知道如何删除重复的部分吗？

var slidnum = jQuery("div[id^='sp-pocetna']").length + 1;
console.log("Total Scrolls: "+slidnum);
jQuery(window).on('load resize scroll', function() {

  for (i = 1; i < slidnum; i++) { 
    var strane = jQuery( "div[id^='sp-pocetna"+ i +"']" );
      strane.each(function() {
      console.log(this);
        if (jQuery(this).isInViewport()) {
          jQuery("#sp-dots .custom li:nth-child("+ i +") a").addClass("active");
          //console.log("Jeste u VP:"+str);
        } else {
          jQuery("#sp-dots .custom li:nth-child("+ i +") a").removeClass("active");
          //console.log("Nije u VP:"+str);
        }
      });
  }
});

Answer 1

我认为这是另一个应该使用Intersection Observer而不是听滚动事件的地方。滚动事件不利于性能，并且IO可以处理类似您的情况。

首先，您必须创建一个新的观察者：

var options = {
  rootMargin: '0px',
  threshold: 1.0
 }

var observer = new IntersectionObserver(callback, options);

这里，我们指定一旦观察到的元素100％可见，就应该执行一些回调。如果您希望在某个元素传递的可见性超过50％的情况下执行回调，请更改threshold: .5（或您喜欢的任何其他数字）

然后，您必须指定要观察的项目，在我看来，这应该是：

var target = document.querySelector('[id^=sp-pocenta]');
observer.observe(target);

使用该选择器，您可以查看ID以sp-pocenta开头的每个元素。因此，我们定义一旦与该选择器匹配的任何元素在页面上可见，就将执行回调（先前定义）：

var callback = function(entries, observer) { 
  entries.forEach(entry => {
  // Each entry describes an intersection change for one observed
  // target element:
  });
};

在此处，您将为页面中显示的每个“ sp-pocenta”元素指定应发生的事情。

编辑：如果您需要支持的浏览器比使用此(official) polyfill from w3c的浏览器还旧，它会通过侦听滚动事件来重新创建交叉观察器。

$。每个重复10次

1 个答案: