锚点定位 [英] Anchor point positionings

问题描述

我有一个长垂直网站，使用Wordpress垂直滚动视差类型主题创建。所有的内容区域都是通过posts创建的 - 帖子标题是H1。

我已经在页面顶部创建了一个粘性菜单，调用我在帖子标题中设置的锚点，以试图获得最准确的定位。 如下。

 < a name =ebook> 
  

这没有工作，因为现在滚动到显示只有一半的内容作为我的粘菜单覆盖我设置锚点的标题区域。

所以，我想如果我给一个类赋值给我的锚点，并将它加上约200px，锚滚动到正确的内容。这也没有工作。

 < a name =ebookclass =anchor> / a>电子书
  

任何人都可以指导我解决这个问题吗？

（我已经在使用 smoothscroll.js 在锚点之间创建一个平滑的过渡，而不是看看实现额外的或不同的JS /我在寻找一个CSS解决方案。）

解决方案

这有点不清楚（一个例子本来不错），但如果我正确理解你我自己在过去有一个类似的问题。 < a> 将总是跳转到页面的顶部，因此如果你有一个粘性导航，它将覆盖 a> 信息（我认为这是你在第一个例子中说的一部分）。我不知道为什么你觉得你需要200px（这是不清楚）。

但是，这里是我会做的：设置阻止或标记的<-c $ c>< a> 显示和 padding-top 至少等于你的粘性导航的高度。这会做的是将 a的顶部仍然放在页面顶部，但允许文本被碰撞。然后，您可以从 a底部

$ p $底部将您的内容放置到任何距离。例如： http://jsfiddle.net/6zAYw/6/

I have a long vertical website created using a Wordpress vertical scrolling 'parallax' type theme. All the content areas are created via 'posts' - with the post titles being the H1s.

I've created a sticky menu at the top of the page calling anchor points I've set within the post titles in attempt to have the most accuracy with positioning. Eg below.

<a name="ebook"></a>Ebook

This didn't work as now it scrolled to the point displaying only half of the content as my sticky menu is covering the title area where I set the anchor. So it scrolls down with the menu covering half of the content.

So, I thought what if I assigned a class to my anchors and margined it up about 200px to have the anchor scroll to the content just right. This didn't work either. Eg below

 <a name="ebook" class="anchor"></a>Ebook

Could anyone guide me with a solution to this? I need to position my anchors about 200px above my Wordpress posts / content areas, for the content to appear nicely.

(I'm already using smoothscroll.js to create a smooth transitions between the anchors, and would rather not look at implementing an additional or different JS / I'm looking for a CSS solution. )

解决方案

It is a little unclear (an example would have been nice), but if I understand you correctly I think I've had a similar issue myself in the past. An <a> will always jump to the top of the page, so if you have a sticky nav, it is going to cover the <a> info (which I think is part of what you were saying in the first instance). I'm not sure why you feel you need 200px (that is unclear).

However, here is what I would do: set a block or inline-block display and a padding-top on your <a> tag's that is at least equal to the height of your sticky nav. What this will do is put the top of the a still at the top of the page, but allow the text to get bumped down. You can then position your content whatever distance you want from the bottom of the a.

Example: http://jsfiddle.net/6zAYw/6/

这篇关于锚点定位的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！