时间戳

首页 > 解决方案 > 使用 scrollspy 和 jQuery 使第一个菜单项在加载时变为红色

javascript - 使用 scrollspy 和 jQuery 使第一个菜单项在加载时变为红色

问题描述

有人可以帮我写代码吗？下面的代码使我的菜单项在添加了“scrollspy”的 div 内滚动时变为红色。但是缺少一些东西，所以我的第一个菜单项（主页）在页面加载时不会变红，只有当我向下滚动一点时。我需要在加载时将第一项变为红色。我怎样才能解决这个问题？

使第一个菜单项在加载时处于活动状态的示例代码？

window.onload = function() {
      //code?
};

当在管理员的一行中添加“scrollspy”类时，这会使菜单项变为红色

var elems = $('.scrollspy');
$(window).bind('scroll', function() {
  var currentActive = null;
  var currentActiveDistance = -1;
  var currentTop = $(window).scrollTop();
  elems.each(function(index) {
    var elemTop = $(this).offset().top - 102
    var id = $(this).attr('id');
    var navElem = $('.menu a[href="#' + id + '"]');
    navElem.removeClass('active');
    if (currentTop >= elemTop) {
      var distance = currentTop - elemTop;
      if (currentActiveDistance > distance || currentActiveDistance == -1) {
        currentActive = navElem;
      }
    }
  });

  if (currentActive) {
    currentActive.addClass('active');
  }
});

标签： javascriptjquery

解决方案

为什么不只使用 CSS？

.nav li a.active { background-color: red; }

推荐阅读