Question

我写过JQuery，其中突出显示了关于＆＃39;关于＆＃39;，＆＃39;我的项目＆＃39;或者＆＃39;与我联系＆＃39;正在查看相应页面部分时导航栏上的文本。为了做到这一点，我使用了一个scroll（）事件监听器：

$(document).scroll(function myFuction() {
    if ($(document).scrollTop() >= $("#contactMe").offset().top) {
        $("#contactButton").addClass("active");
        $("#projectButton").removeClass("active");
        $("#aboutButton").removeClass("active");       
    } else if ( $(document).scrollTop() > $("#portfolio").offset().top && $(document).scrollTop() < $("#contactMe").offset().top) {
        $("#contactButton").removeClass("active");
        $("#projectButton").addClass("active");
        $("#aboutButton").removeClass("active");
    } else if ( $(document).scrollTop() > $("#about").offset().top && $(document).scrollTop() < $("#portfolio").offset().top)  {
        $("#contactButton").removeClass("active");
        $("#projectButton").removeClass("active");
        $("#aboutButton").addClass("active");
    }
});

当用户滚动时，该功能通过scrollTop（）检查页面顶部的位置，然后添加或删除＆＃34;活动＆＃34;有效突出适当文本的类。

我理解，虽然在事件监听器中执行操作通常是一个坏主意，但我不确定如何完成我想要做的事情。也许我不知何故在这里重新发明轮子？

我原本想象Bootstrap库会有一个预先打包的类，但没有找到它的运气。

Answer 1

你可以获得所有这些项的一些类，将它们作为jQuery集合进行缓存，并在滚动检查它们是否在视口中 - 基于此，你可以执行所需的操作。

快速演示：

var $items = $('.item')
var $window = $(window);
var $document = $(document);

function inViewport(el) {
  var rect = el.getBoundingClientRect();
  return (
    rect.bottom > 0 &&
    rect.right > 0 &&
    rect.left < $window.width() &&
    rect.top < $window.height()
  );
};

$document.on('scroll', function(){
  $items.each(function(){
    if(inViewport(this)) {
      $items.removeClass('active');
      $(this).addClass('active');
      return false;
    }
  })
}).trigger('scroll');

.item {
  width: 100%;
  height: 150px;
  margin-bottom: 50px;
  background-color: #ddd;
}

.item.active {
  background: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="item"><span>#1</span></div>
<div class="item"><span>#2</span></div>
<div class="item"><span>#3</span></div>
<div class="item"><span>#4</span></div>
<div class="item"><span>#5</span></div>
<div class="item"><span>#6</span></div>
<div class="item"><span>#7</span></div>
<div class="item"><span>#8</span></div>
<div class="item"><span>#9</span></div>
<div class="item"><span>#10</span></div>

限制滚动调用也是一个好主意 https://lodash.com/docs/4.17.4#throttle 或者你自己的实现。

导航栏＆＃39;突出显示＆＃39;功能

1 个答案: