javascript - 所选标题位于顶部导航栏后面

Question

这是我的代码:Navigaton Bar Issue

     <header class="header">
        <div class="Topheading">
        </div>
        <div class="TopNavigation">
            <nav class="leftnav">
                <ul>
                    <li><a href="">Test1</a></li>
                    <li><a href="">Test1</a></li>
                    <li><a href="">Test1</a></li>
                    <li><a href="">Test1</a></li>
                    <li style="float:right">
                        <button class="fedbut">Send Feedback</button>
                    </li>
                </ul>
            </nav>

        </div>
    </header>

顶部导航栏是固定的，当点击右侧导航时，它会根据标题选择页面上的导航项，并且所选标题位于顶部导航栏的后面。

目前...

但所选标题应位于顶部导航栏的下方。

像这样...

提前致谢..

Answer 1

发生这种情况是因为您指向 e.x #1 anchor 并且浏览器滚动到该点。因为你的导航栏是固定的，所以它覆盖了部分内容。您可以使用 JS 解决此问题:

$(".cuntnav a").on("click", function(e){
  e.preventDefault();
  var section_id = $(this).attr("href");
  var section_offset = $(""+section_id).offset().top;

  window.scrollTo(0, section_offset-100);
});