Question

我试着做一个我遇到的问题的最小版本。简而言之，我正在使用导航标题，滚动时始终会粘在页面顶部。

现在的问题是，如果您尝试单击导航中的某个部分，当您滚动到该部分时，导航会阻挡顶部内容的一半。

这意味着用户必须向上滚动一点才能正确查看内容。我在那里使用lorem ipsum作为内容替代品。

当用户点击导航按钮时，我如何调整浏览器位置所在的位置，以便正确定位窗口？

https://jsbin.com/hopiqe/edit?html,css

Answer 1

利 -

仅使用HTML / CSS，你必须做一个像Kommodore建议的黑客，以使其正常工作。你真的需要JS来做这件事。

你可以用jQuery和一点远见来做到这一点：

  // Button 1 is what you click to start the interaction
  $(".button1").click(function() {
    // Using jQuery Animate and ScrollTop...
    $('html, body').animate({
        // We point user to div1
        // We have an offset from the top of the window minus 50px
        // `-50` should match the height of your header
        scrollTop: $("#div1").offset().top-50
    // 500 is milliseconds to do the `Animate` interaction
    }, 500); 
  });

您还可以使用名为ScrollTo和LocalScroll的jQuery插件组合。

我连接了一个可以构建您提供的代码的CodePen。 JS可能需要更多紧缩，但你应该明白这一点。

Answer 2

最简单的方法应该是在每个div前添加另一个div作为占位符height: 140px（然后必须调用div而不是div）或者为每个div使用margin-top: 140px。

阻止我的内容的一页导航

2 个答案: