锚链接点击添加class_在HTML中设置自定义锚点

I have seen this topic somewhat covered in posts here and here, but they don't really help me out. The situation is fairly similar though: a scrolling page and a sticky menu bar (fixed div) at the top of the page, with anchor points scattered through the long scrolling text.

Something like this HTML:

Heading Foo

this is some text, and a lot of it

...

jump to Heading Foo

...

Heading Bla

and then there is more text

...

jump to Heading Bla

...

with some CSS that, for now, is empty because I still just stumble around this issue

.anchor {

color: green;

} ​

Take a look at this fiddle to see how it works at the moment.

Now, whenever I click on a link it takes me to the anchor. (Yay!) Alas, this also means that the anchor, now at the top of the page, is covered by the sticky menu. (Nay!) It would be great if it would show below the sticky menu.

I've tried the solutions that were given in the other posts to no avail. For example, adding padding around the anchor does actually add visible padding in the text and create empty space; which is not what I want. The text ought to appear unmodified visually.

Thanks in advance for hints and tips :-)

EDIT: I should make it a little more clear. I do not need space on top of the page. I do need every anchor point to be below the menu bar. Try my original fiddle, and click the anchors: you will see how they are positioned so that they are covered by the menu bar.

解决方案

Thanks for the input, and I found a working solution based on this discussion. The hint from there was "empty anchors"; on my original fiddle the anchors enclosed the heading and that prevented me from positioning the anchors.

Changing to empty anchors

 

Heading Bla

allows me to move the anchors on the page without affecting any of the (visible) text flow. So the CSS for the anchors now becomes

.anchor {

position: relative;

top: -35px; /* depending on the size of the sticky menu */

}

That way, the anchor for a heading is positioned above the heading, and jumping to that anchor causes the heading to show up below the menu bar.

I've updated the fiddle to work correctly. (Two things: the anchors use A1, .. text to show their position but you can empty them. Also, I had to explicitly close the

tags to ensure "position:relative" works ok.)