The solution of CSS anchor location covered by top fixed navigation bar

Time:2021-6-9

Many websites have a fixed navigation bar at the top to facilitate users to search and jump to other pages.

At the same time, in order to facilitate users to browse long documents, a directory will be added. Click the paragraph title to jump to the position of the paragraph,

As shown in the figure:

If the anchor is used to jump the directory, the fixed navigation bar will cover the title.

1. Anchor positioning mechanism

If there is no scroll bar, the anchor fails.

If there is a scroll bar, scroll to the anchor element corresponding to the address hashpadding-boxTop edge position.

2. Solutions

Examples

Sample source code

Sample online preview

(1)padding+margin

Padding affects the location of anchor elements, margin does not. Therefore, padding is used to adjust the position of anchor element after jumping, and margin is used to offset the influence of padding on layout.

<h3 class="heading first" id="first">
    1. Different time and place
</h3>
.first {
    padding-top: 60px;/*  60px is the navigation bar height*/
    margin-top: -60px;
 }

advantage

This solution does not need to add additional elements, and uses CSS directly to solve the problem.

shortcoming

When the document level of the title is inconsistent with that of the paragraph, other elements will be covered.

For example, the title usesrelativePositioning improves the document level. The mouse will not be able to select the paragraph above the title which is blocked by the layout, so that the document cannot be copied.

(2) Use the span or a label as the anchor element

Properties of non replacement inline elementspaddingIt does not affect the layout, but it can affect the anchor position.

<h3 class="heading">
    <span id="second" class="title_placeholder">
    2. Require / exports is dynamically loaded at runtime and import / export is statically compiled
    </span>
</h3>

.title_placeholder {
    padding-top: 60px;
}

shortcoming

Same as scheme (1)

(3) Dark anchor

Add a blank anchor element that does not affect the layout above the element to be positioned.

Because the position of the anchor after jumping will fall on the edge of the elementpadding-boxTop edge, settingheightAffect anchor position, setmargin-topCounteract the influence of dark anchor on layout.

<div class="dark_anchor" id="third"></div>
<h3 class="heading">
    3. The output of require / exports is a copy of a value, and the output of import / export module is a reference of a value
</h3>

.dark_anchor {
    height: 60px;
    margin-top: -60px;
}

advantage

Does not affect mouse selection of other elements

shortcoming

The location elements of this scheme aremarginIt will affect the position of the anchor after jumping, which is inconsistent with the performance of setting the title as the anchor element directly.

For example: the title (positioning element) has a 20px margin, and the 20px margin remains after the anchor jump. If you want the title to stay at the top after the anchor jumpmarginStudents who are affected should use this scheme with caution.

(4) : target pseudo class

The: target CSS pseudo class represents a unique page element whose ID matches the current URL fragment

The usage is inconsistent</h3>

:target {
    padding-top: 60px;
    margin-top: -60px;
  }

This scheme is similar to scheme (1). When jumping to an anchor, the anchor element is applied:targetStyle.

:targetBrowser compatibility:

3. References

Mechanism, application and problems of URL anchor HTML location technology

Using pure CSS to realize the up and down offset of the anchor point in the web page

When anchor meets fixed positioning

So far, this article about the solution of CSS anchor location covered by the top fixed navigation bar is introduced here. For more related content of CSS anchor covered by the top fixed navigation bar, please search previous articles of developer or continue to browse the following related articles. I hope you can support developer more in the future!