选定标题位于顶部导航栏后面

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锚点和浏览器滚动到那一点。并且因为您的导航栏已修复，所以它涵盖了部分内容。您可以使用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);
});