粘性标题和内部链接

我已经使用CSS来制作一个“粘性标题”，它始终在页面顶部可见，其他内容在它下面。在标题中我有一些内部链接。问题是当单击一个链接时，页面会滚动，以便目标位于页面的顶部 - 被粘滞标题隐藏 - 而不是在其下方。粘性标题和内部链接

有关如何解决此问题的任何建议？

CSS：

#header { 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 3.5em; 
    padding:0; 
    margin: 0; 
} 

#container { 
    width: 100%; 
    margin: 3.5em 0 0 0; 
    padding: 0; 
    overflow:auto; 
} 

#content { 
    padding: 0 4em; 
    margin: 0; 
}

HTML：

<body> 

    <div id="header"> 
     <div id="content"> 
      <p> 
       <a href="#xyz">XYZ</a> 
      </p> 
     </div> <!--end content--> 
    </div> <!--end header--> 

    <div id="container"> 
     <div id="content"> 
      <p>A lot of text.</p> 
      <a name="xyz"></a> 
      <p>A lot of text</p> 
     </div><!--end content--> 
    </div><!--end container--> 

</body>

来源

2011-10-10 user635817

一件简单的事情做的是把<a name="xyz"></a>小幅上涨的文本。

这将需要一些试验和错误，但它可能是最快/最容易做的事情。

你可以做的另一件事是动态地添加margin或padding链接被点击的时候。

来源

2011-10-10 19:59:03

你也可以在你的CSS文件中设置一个与你的xyz-fragment的粘性头一样高的顶边。这可能会导致您的结果HTML页面中的空白空缺...

来源

2011-10-10 20:03:43 supertopi

开始为头部和容器内的内容部分获取唯一的ID。也许你可以把ul放在内部链接的标题中。设置包装内的内容的位置绝对，等瞧！

有什么地方可以看看你的问题吗？

来源

2011-10-10 20:08:20 oceanmountain

的JavaScript点点（jQuery的使用这里）可以做到这一点：

$('#header a').click(function (e) { 
    e.preventDefault(); 

    var offset = $('a[name=' + $(this).attr('href').substr(1) + ']').offset(); 

    $('html, body').animate({ scrollTop: offset.top - $('#header').outerHeight() }, 'fast'); 
});

这个发现与匹配链接的href属性点击的name属性的元素，然后动画滚动到元素的位置减去标题的高度。

http://jsfiddle.net/blineberry/bTa8b/

来源

2011-10-10 20:24:57 Brent