html - 视差导航菜单

这是基于以下问题的问题：parallax navigation menu title to show。

因此，我能够显示菜单的标题，但是我想知道当有人在特定标题区域时，我是否仍可以更改css来改变菜单。

当前在上一个问题的示例中，它只有一种颜色（蓝色）。我正在考虑使其对圆圈透明，或更改为其他颜色以使他们知道它们在网页的特定部分。

谢谢！

最佳答案

您可以使用jQuery滚动功能来检测何时显示某一节，就像这样！

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;
});

滚动功能只是检查元素是否在视口内向下滚动（介于0和屏幕高度之间）。如果向上滚动，则比较会翻转，因为偏移是从元素的顶部开始计算的-因此，您要查找的是视口高度在0到负之间的任意值。让我知道这是否有意义！