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
blockorinline-blockdisplay and apadding-topon 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 theastill 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 thea.Example: http://jsfiddle.net/6zAYw/6/