Question

css我用标题来修复它

.site-header {
 position: fixed;
    background-color:#ffffff;
    width:1020px;
    top:-20px;
    z-index:1;
}

我的身体部位包含两个div

这是在左侧

<div id="sidebar" style="float:left" class="affix-top">
<div id="nav-anchor"></div>
<nav class="indexnav">
<ul id="indexlist">
<li id="one"><a href="#AdolescentGynecology">Adolescent gynecology</a></li>
<li><a href="#BreastEvaluation">Breast evaluation</a></li>
<li><a href="#BirthControl">Birth control/emergency contraception</a></li>

</ul>
</nav></div>

这是在右侧

    <div id="indexcontent">
<section id="AdolescentGynecology" tabindex="-1">
                <span class="indexcontent-title">Adolescent gynecology</span><p></p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce placerat est egestas, pretium tellus id, egestas mauris. Vestibulum porttitor, massa tristique sodales rutrum, ex elit pulvinar urna, at suscipit quam arcu a turpis. Suspendisse ut hendrerit ligula. Mauris at diam accumsan, mollis risus a, venenatis magna. Phasellus sem arcu, lobortis id sapien quis, fringilla faucibus nulla. Ut fermentum gravida sem non malesuada. Suspendisse potenti. Fusce ullamcorper elit at ornare lacinia. Curabitur sed feugiat magna. Nulla quis libero dignissim, maximus leo consectetur, laoreet massa. Maecenas et malesuada lacus. Morbi at condimentum ipsum. Morbi suscipit leo eros, vel hendrerit felis molestie nec. In nec maximus est.</p>
</section>
<section id="BreastEvaluation" tabindex="-1">
            <span class="indexcontent-title">Breast evaluation</span><p></p>
<p>Vivamus vitae quam ut nulla gravida sollicitudin. Integer congue mauris lectus, cursus ornare nulla scelerisque in. Suspendisse consectetur egestas pellentesque. Maecenas vulputate elit quis nunc iaculis, in malesuada nulla condimentum. Maecenas auctor quam libero, a condimentum purus eleifend ac. Donec vestibulum lectus quis risus condimentum suscipit. In hac habitasse platea dictumst. Etiam libero leo, molestie vel purus non, semper sagittis mi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mi orci, aliquam sed velit non, vulputate scelerisque metus. Sed vel libero quis nibh placerat bibendum.</p>
</section>
<section id="BirthControl">
             <span class="indexcontent-title">Birth control/emergency contraception</span><p></p>
<p>Vivamus vitae quam ut nulla gravida sollicitudin. Integer congue mauris lectus, cursus ornare nulla scelerisque in. Suspendisse consectetur egestas pellentesque. Maecenas vulputate elit quis nunc iaculis, in malesuada nulla condimentum. Maecenas auctor quam libero, a condimentum purus eleifend ac. Donec vestibulum lectus quis risus condimentum suscipit. In hac habitasse platea dictumst. Etiam libero leo, molestie vel purus non, semper sagittis mi. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mi orci, aliquam sed velit non, vulputate scelerisque metus. Sed vel libero quis nibh placerat bibendum.</p>
</section>

现在，当我点击div id =“sidebar”中的一个

元素时，它应该导航到href位置。在这里，将引用的元素加载到窗口的顶部。我需要在浏览器中加载到给定的高度。我该如何完成它？

Answer 1

我认为问题在于您的固定位置标头与div.content2的顶部重叠。我注意到.content1的css中有一个拼写错误，我认为你的意思是float:left而不是float;left。

要将每个部分放在标题下方，而不是在标题隐藏其中一部分的页面顶部，您可以将页面的scrollTop设置为相对于div.content2减去该部分的垂直偏移量标题的高度。使用单击处理程序可以轻松处理。

//set the page scrollTop so the selected element appears just
//below the bottom of the fixed header
function scrollTo(contentEl) {

    //assume the href of the anchor is '#id'
    var el = $(contentEl.attr("href"));

    //don't do anything if the ID isn't found
    if (el.length > 0) {

      //height of the header may change if the window is resized
      //so recheck it with each scrollTo call
      var HeaderHeight = $(".header")[0].clientHeight;

      //set the top margin on content2 so the first element
      //displays properly on page load
      $(".content2").css({"margin-top":HeaderHeight+"px"});

      var pos = el.position();
      var newtop = pos.top - HeaderHeight;

      //scrolling above the top is probably silly  
      if (newtop < 0) newtop = 0;

        console.log($(".content2").position().top+ ". "+el.attr("id")+ ": "+$("html").scrollTop()+" - "+pos.top+" - "+newtop);
      $("html").scrollTop(newtop)

      //return false to cancel the href if we scrolled
      return(false);
    }
}

$(document).ready(function(){

    $(".content1").affix();

    //use scrollTo to handle click events on nav anchors
    $(".content1 ul").on("click","a",function(){return scrollTo($(this))})

    //set top margin of .content2 so first element appears below the header
    $(".content2").css({"margin-top":$(".header")[0].clientHeight+"px"})

});

更新jsfiddle

如何自定义来自<a href="#link"> with respect to the top of the page after clicking?</a>的内部链接的位置

1 个答案: