html - 视差导航菜单

Question

这是基于这个问题的问题:parallax navigation menu title to show .

所以我能够让它显示菜单的标题，但我想知道我是否可以更改 css 以在用户位于特定标题部分时改变菜单。

目前在上一个问题的例子中，它只有一种颜色(蓝色)。我在考虑让它对圆圈产生透明效果，或者改变成不同的颜色让他们知道他们在网页的特定部分。

谢谢!

Answer 1

您可以使用 jQuery 滚动功能来检测您的某个部分何时在 View 中，就像这样!

var thisScroll = 0, lastScroll = 0;
$(window).scroll(function(){
  //Detect your current scroll position
  thisScroll = $(window).scrollTop();

  //Loop through each article
  $('#content article').each(function(){

    //Get the element's distance from top of the viewport, including scroll
    var myPos = $(this).offset().top - thisScroll;

    //Scrolling down
    if(thisScroll > lastScroll){
      if(myPos > 0 && myPos < $(window).height()){
        console.log($(this).attr('id'));
      }
    }
    //Scrolling up
    else{
      if(myPos > -$(window).height() && myPos < 0){
        console.log($(this).attr('id'));
      }
    }

  });

  //If lastScroll is higher than thisScroll, the user must have scrolled up
  lastScroll = thisScroll;
});

滚动功能只是检查元素是否在您的视口(viewport)内向下滚动(在 0 和屏幕高度之间)。如果向上滚动，比较会翻转，因为偏移量是从元素的顶部开始计算的 - 所以您正在寻找介于 0 和负视口(viewport)高度之间的任何一个。让我知道这是否有意义!