How to use pure CSS to achieve header fixing effect 01/19 Update SLTechnology News&Howtos

How to use pure CSS to achieve header fixing effect

2025-01-19 Update From: SLTechnology News&Howtos shulou NAV: SLTechnology News&Howtos > Development >

Shulou(Shulou.com)06/01 Report--

This article is about how to use pure CSS to achieve header fixing. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

There are two main reasons why it is difficult to fix the header in pure CSS:

1. IE6, which has the largest market share, does not support position:fixed.

2. If people want to break their heads, they all want to achieve this effect in a table.

However, foreign people really use pure CSS to achieve this effect, using a staggering number of CSShacks. In my opinion, if the code is so difficult to understand and difficult to extend, you might as well use javascript. Coincidentally, I also encountered this kind of demand today. From a different perspective, I really came up with it.

We know that CSS is responsible for performance, HTML is responsible for the structure, the same structure, change the style, give people a completely different feeling, which also shows that people's eyes are very gullible. Therefore, in the days of fanatical advocacy of p+CSS, people always want to remove table from the page and use p+span to make a "table" one by one.

Although this kind of thing is not advisable, it also tells us that we can do what table does through some combinations. To put it another way, since one table can't do it, just two.

The table simulation header above and the table simulation section with scroll bars below. Before we go on, let's clarify our needs, or it will be too abstract. First of all, the table is 4: 9, each column width 170px, always 680px, scroll bar in each browser default to 16px, do not forget, width does not include border, four columns have 5 vertical border, the total width of 701px.

Then we split the table in two, with the first table as the header and the second table with a scroll bar indicating that we want to apply the overflow style to its parent element, so it needs to coat a p. This p should be the same length as the first table.

But don't bother, let's set a p outside them, set its width to 701px, and then set the width of both child elements to 100%. Note that we explicitly add tbody to table to improve the rendering efficiency of the table.

Name

Grammar.

Description

Exampl

SimpleattributeSelector

[attr]

Select the element with this attribute

Blockquote [title] {color:red}

AttributeValueSelector

[attr= "value"]

Select the element whose attribute value is exactly equal to the given value.

H3 [align= "left"] {cursor:hand}

"Begins-with" attributeValueSelector

[attr^ = "value"]

Select the element whose attribute value begins with a given value

H3 [Align^ = "right"] {cursor:hand}

"Ends-with" attributeValueSelector

[attr$= "value"]

Select the element whose attribute value ends with a given value

P [class$= "vml"] {cursor:hand}

Substring-matchattributeValueSelector

[attr*= "value"]

Select the element whose attribute value contains the given value

P [class*= "grid"] {float:left}

One-Of-ManyAttributeValueSelector

[attr~= "value"]

The attribute value of the original element is multiple words, and the value given is one of them.

Li [class~= "last"] {padding-left:2em}

HyphenAttributeValueSelector

[attr | = "value"]

The attribute value of the original element is equal to the given value, or begins with the given value plus "-"

Span [lang | = "en"] {color:green}

Invert attribute value selector

[attractively = "value"]

Non-standard, appearing in jQuery

Span [classrooms = "red"] {color:green}

Presentation layer section:

# scrollTable {

Width:701px

Border:1pxsolid#EB8;/*table has no peripheral border, only internal td or th has border*/

Background:#FF8C00

}

# scrollTabletable {

Border-collapse:collapse;/* uniformly sets two table to thin line table * /

}

# scrollTabletable.thead {/ * header * /

The first child element of / * p * /

Width:100%

}

# scrollTabletable.theadth {/ * header * /

Border:1pxsolid#EB8

Border-right:#C96

Color:#fff

Background:#FF8C00;/* bright orange * /

}

# scrollTablep {/ * body with scroll bar * /

The second child element of / * p * /

Width:100%

Height:200px

Overflow:auto;/* required * /

}

# scrollTabletable.tbody {/ * body with scroll bar * /

Width:100%

Border:1pxsolid#C96

Border-right:#B74

Color:#666666

Background:#ECE9D8

}

# scrollTabletable.tbodytd {/ * the grid of the body with scroll bars * /

Border:1pxsolid#C96

}

Run the code:

Realization of header fixing by pure CSS

# scrollTable {

Width:701px

Border:1pxsolid#EB8;/*table has no peripheral border, only internal td or th has border*/

Background:#FF8C00

}

# scrollTabletable {

Border-collapse:collapse;/* uniformly sets two table to thin line table * /

}

# scrollTabletable.thead {/ * header * /

The first child element of / * p * /

Width:100%

}

# scrollTabletable.theadth {/ * header * /

Border:1pxsolid#EB8

Border-right:#C96

Color:#fff

Background:#FF8C00;/* bright orange * /

}

# scrollTablep {/ * body with scroll bar * /

The second child element of / * p * /

Width:100%

Height:200px

Overflow:auto;/* required * /

}

# scrollTabletable.tbody {/ * body with scroll bar * /

Width:100%

Border:1pxsolid#C96

Border-right:#B74

Color:#666666

Background:#ECE9D8

}

# scrollTabletable.tbodytd {/ * the grid of the body with scroll bars * /

Border:1pxsolid#C96

}

Name

Grammar.

Description

Exampl

SimpleattributeSelector

[attr]

Select the element with this attribute

Blockquote [title] {color:red}

AttributeValueSelector

[attr= "value"]

Select the element whose attribute value is exactly equal to the given value.

H3 [align= "left"] {cursor:hand}

"Begins-with" attributeValueSelector

[attr^ = "value"]

Select the element whose attribute value begins with a given value

H3 [Align^ = "right"] {cursor:hand}

"Ends-with" attributeValueSelector

[attr$= "value"]

Select the element whose attribute value ends with a given value

P [class$= "vml"] {cursor:hand}

Substring-matchattributeValueSelector

[attr*= "value"]

Select the element whose attribute value contains the given value

P [class*= "grid"] {float:left}

One-Of-ManyAttributeValueSelector

[attr~= "value"]

The attribute value of the original element is multiple words, and the value given is one of them.

Li [class~= "last"] {padding-left:2em}

HyphenAttributeValueSelector

[attr | = "value"]

The attribute value of the original element is equal to the given value, or begins with the given value plus "-"

Span [lang | = "en"] {color:green}

Invert attribute value selector

[attractively = "value"]

Non-standard, appearing in jQuery

Span [classrooms = "red"] {color:green}

It was found that the grid of the watch head was not aligned with that of the watch body. At this point, we need to use the col tag, col allows us to uniformly set the background color, text alignment and width of td or th with the same index value in tbody. Although CSS2.1 's neighbor selector and CSS3's subelement filter pseudo-classes allow us to set them in a more concise way, and they are the kind of style and structure separation, unfortunately the IE family is always a drag. Let's look at their length again, because the last table may be shortened by the scroll bar, we can make sure that the first three columns are equal in length, and the rest are assigned to the last one, in other words, the last one is not set. In addition, you can set the style of the scroll bar under IE, so let's flip it over.

/ / * slightly *

Presentation layer section:

# scrollTable {

Width:701px

Border:1pxsolid#EB8;/*table has no peripheral border, only internal td or th has border*/

Background:#FF8C00

}

# scrollTabletable {

Border-collapse:collapse;/* uniformly sets two table to thin line table * /

}

/ * the first child element of header p * /

# scrollTabletable.thead {

Width:100%

}

/ * header * /

# scrollTabletable.theadth {

Border:1pxsolid#EB8

Border-right:#C96

Color:#fff

Background:#FF8C00;/* bright orange * /

}

/ * body with scroll bar * /

The second child element of / * p * /

# scrollTablep {

Width:100%

Height:200px

Overflow:auto;/* required * /

The background color of the three small rectangles of scrollbar-face-color:#EB8;/* * /

The foreground color of the three small rectangles of scrollbar-base-color:#ece9d8;/* * /

The color of the triangular arrow in the scrollbar-arrow-color:#FF8C00;/* up and down button * /

The background color of the rectangle where the active block of the scrollbar-track-color:#ece9d8;/* scroll bar is located * /

The color of padding on the top left of the three small rectangles of scrollbar-highlight-color:#800040;/* * /

The color of padding at the bottom right of the three small rectangles of scrollbar-shadow-color:#800040;/* * /

The color of border on the top left of the three small rectangles of scrollbar-3dlight-color:#EB8;/* * /

The color of border at the bottom right of the three small rectangles of scrollbar-darkshadow-Color:#EB8;/* * /

}

/ * the body of the watch body with a scroll bar * /

# scrollTabletable.tbody {

Width:100%

Border:1pxsolid#C96

Border-right:#B74

Color:#666666

Background:#ECE9D8

}

/ * the grid of the body with a scroll bar * /

# scrollTabletable.tbodytd {