Question

我在网站上有侧面点导航 - 标准position: fixed点导航。现在我在同一个网站上也有2种类型的背景和2种类型的背景 - 假设一个是白色而另一个是黑色。我的问题是，当导航悬停黑色部分时，点不可见。所以我试着编写脚本来检测部分是否有某个类，如果某个点在这一部分 - 如果是，那么点的颜色会改变。我取得了一定的成功但是在我完成后我意识到我的脚本只能以一种方式工作（从上到下滚动），即使我会检测到从下到上滚动，当我改变网站中间的方向时它也无法正常工作。我已经花了很长一段时间而且我一无所知 - 这是我到目前为止的代码 - 当你从上到下滚动时它正在工作。

您是否有任何其他建议或某些图书馆可以解决此问题？

编辑：布局很有艺术性 - 所以有一些盒子从左边或右边动态浮动，当盒子在那里时，点也必须改变，这就是为什么我拼接我的阵列并将#myname推向它。 / p>

EDIT2：您可以在此链接下查看其工作原理（未优化，加载时间较慢http://lektor.ionstudio.pl/）

var sections = [];
$("section[id]").each(function() {
    sections.push("#" + this.id);
})
sections.splice(0,0,"#myname");
i = 0;


$(window).scroll(function(){
    var content = $("section.current").hasClass("white-section");
    $("#banner .navigation li").each(function(){
        var thisElem = this.getBoundingClientRect();



        section = sections[i];

        section = document.querySelector(section);
        sectionRect = section.getBoundingClientRect();



        if(sectionRect.top - thisElem.top <= 0) {
            if($(section).hasClass("white")) {
                $(this).addClass("black");
            } else {
                $(this).removeClass("black");
            }
            if(sectionRect.top + $(section).outerHeight(true) <= thisElem.top ) {
                i++;
            }
        }


    })
})

Answer 1

正如评论中所提到的，我会使用elementFromPoint检查它是否在具有特定类的部分上点。

试试这个：

＆＃13;

(function(win, doc) {
  var dotsSelector = '.dot';
  var sectionsSelector = 'section';
  var classes = ['white', 'black'];
  var dots = [].slice.call(doc.querySelectorAll(dotsSelector));
  var dotPositions = dots.map(function(dot) {
    var rect = dot.getBoundingClientRect();
    return rect.top + rect.height / 2 ;                         
  });
  var sections = [].slice.call(doc.querySelectorAll(sectionsSelector));
  
 
  win.addEventListener('scroll', function(event) {
    for(var i = 0; i < dots.length; ++i) {
      var element = doc.elementFromPoint(0, dotPositions[i]);
      var section = null;
      while(!section && element) {
        section = sections.find(function(s) { return s === element });
        element = element.parentNode; 
      }
      if(section) {
        dots[i].classList.toggle(classes[0], section.classList.contains(classes[1]));
      }
    }
  });
})(window, document);

＆＃13;

section {
  min-height: 400px;
  background: white;
}

section.black {
  background: black;
}

.menu {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  left: 10px;
  z-index: 20;
}

.dot {
  border-radius: 50%;
  width: 20px;
  height: 20px;
  background: black;
  margin-bottom: 10px;
}

.dot.white {
  background: white;
}

* {
  padding: 0;
  margin: 0;
}

ul {
  list-style: none;
}

＆＃13;

<section></section>
<section class="black"></section>
<section></section>
<section class="black"></section>
<section></section>
<section class="black"></section>

<ul class="menu">
  <li class="dot"></li>
  <li class="dot"></li>
  <li class="dot"></li>
  <li class="dot"></li>
  <li class="dot"></li>
  <li class="dot"></li>
</ul>

＆＃13;

Answer 2

由于循环方式，它仅适用于单向滚动。你需要消除＆＃39; i＆＃39;增加你的功能。

使用此增量的唯一原因是您需要能够唯一地标识该部分。

您是否能够将一些元数据添加到＆＃34;这个＆＃34;您可以用来识别该部分的元素？像

这样的东西

<li data-sectionID="999" ....>Menu Node</li>
...
section = $(this).data("sectionID");

检测元素是否悬停在截面上

2 个答案: