Simply position: fixed, rather than pinning a site header or navigation in a style, the headers that appear in response to the scroll fade away and the screen is much better. The header that reacts to the scroll is a site logo, menu, navigation bar, etc. that can provide a more efficient and pleasant user experience.
Why you should write headers that respond to scrolling
There are many people who want to always show the header and navigation bar to the user, the top of the screen 100px less than a lot of space, the logo and menu of the blog on your site, etc. This may not matter much on desktop screens. However, on average, mobile users who do not 600px the vertical size are always obscured by a minimum of one-sixth of the screen (considering the navigation of their own browser, but also about 1/3 ~ 1/4), the user can not hide or control is quite violent (?) Discomfort.
Because of that, you should answer for your convenience or navigation (with subjective thought) and always keep the header at the top of the screen. If you want a header that is always implemented, the header disappears when the user scrolls or touches the content if you want to read the content or write a menu, or use the navigation function to scroll up or touch the screen, then you need to implement a header that appears again (of course, this approach may be inconvenient for users who want to see the above again). If you're not going to implement this personally, we recommend that you don't just use position: fixed.
3 steps to create a header that reacts to scrolling
There are several ways to create headers that respond to scrolling. But consider the web standards that are expressed in any environment, I recommend using jquery rather than use methods such as CSS. Gkkmon (Awake) but also try not to use JavaScript or jQuery (because it is more likely to lag in terms of speed or resources than using basic functions). The header that reacts to the scroll is because the JQuery method has shown great web standards without sacrificing performance significantly.
To use jquery
1. Import the JQuery plugin.
2. You declare a script to be used by the imported JQuery plug-in.
3. You need to touch HTML, PHP, and CSS.
Loading JQuery plug-in
The plugin for creating headers that respond to scrolling is the jquery-2.2.2 version. To load this plugin
<script src="https://code.jquery.com/jquery-2.2.2.js"></script>
.
<script src="https://code.jquery.com/jquery-2.2.2.min.js"></script>
, you can use this method because the version has a min behind it, which is the same code, but allows you to load more quickly by removing space and so on.
Declaring scripts in the imported JQuery plug-in
Once you've called the plug-in, you need to declare which script you want to use.
<script></script>
$ (function {) {
var lastscrolltop = 0,
Delta = 15;
$ (window). Scroll (function (event) {
var st = $ (this). ScrollTop ();
if (Math.Abs (Lastscrolltop-ST)<= delta) return; delta)=""></= delta) return;>
if ((St > Lastscrolltop) & & (Lastscrolltop-0)) {
$ ("element name"). CSS ("Top", "-hide height");
Else
$ ("element name"). CSS ("Top", "0px");
}
Lastscrolltop = st;
});
});
Put the class or ID of the element you want to control in the element name. Usually put said. header. You should set the height or higher of the element to hide, because it will blow up the screen with the-px light when hidden. Height: If you want to control the 50px class name. Header
<script></script>
$ (function {) {
var lastscrolltop = 0,
Delta = 15;
$ (window). Scroll (function (event) {
var st = $ (this). ScrollTop ();
if (Math.Abs (Lastscrolltop-ST)<= delta) return; delta)=""></= delta) return;>
if ((St > Lastscrolltop) & & (Lastscrolltop-0)) {
$ (". Header"). CSS ("Top", "-50px");
Else
$ (". Header"). CSS ("Top", "0px");
}
Lastscrolltop = st;
});
});
. The content of this script is, "if touch or mouse scrolling detects that the screen is down, it means to change the CSS top of the. Header to-50px, and change the CSS top of the. Header to 0px when scrolling is up."
CSS Specifies the style of elements, and top specifies the position from the top of the screen of the element specified by the Position property. In other words, the top of the screen 0px and-50px to go back and forth.
Change CSS to match the script with jquery
Finally, you can change the CSS according to the jQuery settings.
<style></style> Header Position: fixed; /* Position: fix with fixed */ Z-index: 20; /* Set appropriate z-index because it can be obscured by other elements */ Width: 100%; /* Screen 100% horizontal size and */ Height: 50px; /* Make a header of 50px vertically */ Box-sizing: Border-box; Transition: All 0.2 s ease; /* Disappears when it appears and gives the effect that it looks smooth, no need to put */ -Webkit-transition: All 0.2 s ease; -Moz-transition: All 0.2 s ease; -O-transition: All 0.2 s ease; }
With all three, we can respond to the scroll and create a great header that looks like it disappears.
The finished code
<script src="https://code.jquery.com/jquery-2.2.2.min.js"></script>
<script></script>
$ (function {) {
var lastscrolltop = 0,
Delta = 15;
$ (window). Scroll (function (event) {
var st = $ (this). ScrollTop ();
if (Math.Abs (Lastscrolltop-ST)<= delta) return; delta)=""></= delta) return;>
if ((St > Lastscrolltop) & & (Lastscrolltop-0)) {
$ (". Header"). CSS ("Top", "-50px");
Else
$ (". Header"). CSS ("Top", "0px");
}
Lastscrolltop = st;
});
});
<style></style>
Header
Position: fixed;
Z-index: 20;
Width: 100%;
Height: 50px;
Box-sizing: Border-box;
Transition: All 0.2 s ease;
-Webkit-transition: All 0.2 s ease;
-Moz-transition: All 0.2 s ease;
-O-transition: All 0.2 s ease;
}
If you set it as described, you can easily have a high quality header that provides a great user experience. It's not a big deal, so let's fix it for your site or blog 24/7, always for a floating header. I know that I'm familiar with the site, the header is always fixed and screen-like ' toolbar ', because it gives the user the worst user experience.