时间戳

首页 > 解决方案 > 窗口调整大小问题以检测锚点

jquery - 窗口调整大小问题以检测锚点

问题描述

在我的 HTML 页面上，我有多个部分创建垂直滚动效果。这些部分中的每一个都具有屏幕窗口 100% 的宽度和高度。在页面顶部，我还设置了一个菜单position: fixed。当固定菜单到达并通过滚动页面检测到锚点时，菜单的文本颜色会发生变化。

我的问题是当我调整浏览器窗口的大小时，我失去了对锚点的检测。因此，当菜单滚动悬停锚点时，菜单颜色不会改变。

<header id="masthead" class="site-header"> Menu text </header>

<section id="section-1" class="hero"> Section 1 </section>
<section id="section-2" class="hero"> Section 2 </section>

<div class="anchor switch-menu-color"></div>

<section id="section-3" class="hero"> Section 3 </section>
<section id="section-4" class="hero"> Section 4 </section>

var anchor = $('.switch-menu-color').offset().top - 40,
  $window = $(window);

$window.on('load scroll resize', function() {
  if ($window.scrollTop() >= anchor) {
    $("#masthead").addClass("black-text");
  } else {
    $("#masthead").removeClass("black-text");
  }
});

谢谢你的帮助！

标签： jqueryscrollresizeanchordetect

解决方案

问题是因为您只在页面加载时阅读过offset()元素.switch-menu-color的。您还需要在调整页面大小时执行此操作，如下所示：

var anchor = $('.switch-menu-color').offset().top - 40,
  $window = $(window);

$window.on({
  'load scroll': setLinkColour,
  'resize': function() {
    anchor = $('.switch-menu-color').offset().top - 40;
    setLinkColour();
  }
});

function setLinkColour() {
  $('#masthead').toggleClass('black-text', $window.scrollTop() >= anchor);
}

请注意，出于性能原因，我将load scroll和事件分开。resize无需重新计算offset()页面滚动的时间，只需调整大小即可。

还要注意使用toggleClass()带有布尔参数以使代码更简洁。

推荐阅读