Question

我试图在Chaptr的网站上重现效果，大约在页面的一半以下，在这里滚动滚动列表元素会更改粘滞/固定的单独元素的类。示例如下：https://chaptr.studio/，“品牌，创意，代码，增长”部分。

尽管不是最干净的代码，但我设法获得了部分效果以使用以下代码。无论如何，我可以获得左边的元素列表“投资，教育，指导”，以匹配非粘性列表中发生的事情。

const halfWindow = (window.innerHeight / 2) - 50
const listItems = document.querySelectorAll('.scroll-item')

const firstItem = listItems[0]
const lastItem = listItems[listItems.length - 1]

const updateSection = () => {
  const pixels = window.pageYOffset

  listItems.forEach(item => {

    // find the position of each item
    const itemTop = item.offsetTop - pixels
    const itemBottom = (item.offsetTop + item.offsetHeight) - pixels

    // first item top
    const firstItemTop = firstItem.offsetTop - pixels
    const firstItemBottom = (firstItem.offsetTop + firstItem.offsetHeight) - pixels

    // target the first item in the array
    if (firstItemBottom <= halfWindow) {
      firstItem.classList.remove('active')
      firstItem.classList.remove('current')
    } else if (firstItemBottom >= halfWindow) {
      firstItem.classList.add('current')
    }

    // working sort of - clean up
    if ((itemTop <= halfWindow) && (itemBottom <= halfWindow)) {
      item.classList.remove('active')   
      if (item === lastItem) {
        item.classList.add('current')
      }
    } else if ((itemTop <= halfWindow) && (itemBottom >= halfWindow)) {
      item.classList.add('active')
      item.classList.remove('current')
    } else {
      item.classList.remove('active')
    }

  })
}

document.addEventListener("scroll", updateSection)

这是一个Codepen示例： https://codepen.io/anon/pen/gVOZzp？

我需要弄清的主要内容是，当右侧的每个列表项变为“活动”时，如何使左侧列表项与活动列表匹配。

Answer 1

一种方法是这样的。首先，选择所有内部项目以将其存储在global variable中：

const innerItems = document.querySelectorAll('.sticky-inner li');

然后，您可以将其添加到updateSection function的末尾：

  if (document.querySelector('.sticky-inner .active')) {
    document.querySelector('.sticky-inner .active').classList.remove('active');
  }
  if (listItems[0].classList.contains('active')) {
    innerItems[0].classList.add('active');
  } else if (listItems[1].classList.contains('active')) {
    innerItems[1].classList.add('active');
  } else if (listItems[2].classList.contains('active')) {
    innerItems[2].classList.add('active');
  }

它将始终比较两只手以匹配它们并添加/删除active class。

Answer 2

最后，我像Azametzin那样设置了变量：

found = compimgs("D:/PYTHONS/COUNTOURS/ALPHNOSYMBOLS/SMALL-A.jpg","D:/PYTHONS/COUNTOURS/ALPHNOSYMBOLS/IMROI.jpg")
print(found)

def compimgs(srcimg, dstimg):
im1 = cv2.imread(srcimg,cv2.COLOR_BGR2GRAY)
im2 = cv2.imread(dstimg,cv2.COLOR_BGR2GRAY)
#`enter code here`im2 = dstimg
cv2.imshow("EXTRAC-CHAR", im1)
cv2.imshow("MY-CHAR", im2)
diff = cv2.subtract(im1,im2)``
gett = not np.any(diff)
if gett is True:
return True
else:
return False

然后使用const innerItems = document.querySelectorAll('.sticky-inner li')和classList.contains比较两个列表-检查它们是否匹配。参见下面的代码：

getAttribute

如何基于单独元素的活动类更新元素类？

2 个答案: