0

我有一个响应式布局，并且我使用sticky.js 作为我的标题。这似乎工作减去一些我可以忍受的小故障。但是我的锚总是关闭（我正在使用平滑滚动）。当响应式布局不断改变宽度和高度时，我不确定如何在滚动到锚点时补偿粘性标题？

4

2 回答 2

0

不幸的是，你不能用不会扭曲你的设计的直接 CSS 做很多事情。为了在之前的项目中解决这个问题，我使用 jQuery 来处理这些类型的滚动/锚点问题。

你现在拥有的： <a>在页面上寻找id's 的标签。问题是：当网站响应时，这些锚标记与您的 DOM 布局并没有很好地对齐。

我的解决方案： 为您提供高级概念 - 我使用 jQuery 即时修改 ID 位置。假设您在网站全尺寸时单击链接，一切都很好。这里不需要 jQuery。现在说，当您在站点缩放到大约 768 像素宽度范围（iPad 纵向）时单击同一个链接时：然后我的锚看起来好像它们偏离了大约 100 像素（例如）。我写了一点 jQuery 来处理这个问题：“如果宽度是_ _，则将锚点偏移ID___px。”

于 2013-04-22T20:42:20.033 回答
0

我建议使用 JS 来解释滚动时间的差异，而不是试图人为地改变锚标签的高度属性。这是一个可能对您有用的函数，使用纯 JS：

adjustScroll = function () {
  // Sticky nav selector (you'll have to provide your own selector)
  const nav = document.querySelector('header>nav');

  if (location.href.indexOf("#") >= 0) {
    // Find the name of the anchor
    let n = location.href.substr(location.href.indexOf("#")+1);

    // Find the anchor by name, if it exists
    let a = document.querySelector('a[name="'+n+'"]');
    if (!a) {
      return;
    }

    // Set y value as y-value of the anchor, offset by the header height
    let y = a.offsetTop;
    y -= nav.height + 10;

    // Scroll to the y position
    window.scrollTo(0, y);
  }
}

// Call it wherever you need to call it
adjustScroll();

在哪里调用它的示例可能是在DOMContentLoaded事件上，或者在锚标记的onclick事件上。

于 2018-06-19T16:09:25.593 回答