jquery fixed Element Plug-in scrolltofixed usage Guide _jquery

The plugin was used once in the previous period, when it was changed to a website. Requires the top menu bar to be fixed as the scroll bar scrolls. Also generally write a bit, but in the article also just mention, article address: jquery plugin fixed element position. In this article, a summary.

A. scrolltofixed plug-in function

Fixed the position of an element that is still displayed when the page scrolls.

Two. Scrolltofixed official address

Https://github.com/bigspotteddog/ScrollToFixed. There is a description of the usage on the official address, and a description of the plugin's property method below. Demo also has a detailed use case, you can download the next look.

Three. Scrolltofixed Use method

The use of scrolltofixed Plug-ins is still relatively wide, we can fix the top, you can also fix the sidebar, you can also say "fixed page of any element." With the use of other plug-ins, you can get very good results. If a scroll bar is detected to a location, an element is displayed. In the test case, we will use the Scrolltofixed plug-in with the Scrollto plug-in, the effect can be seen below the "test file."

1. Reference file

Scrolltofixed plug-in use is very simple, only need to refer to two JS on it. One file is jquery, one is the JS file required by the Scrolltofixed plug-in.

<script type= "Text/javascript" src= "jquery.min.js" ></script>
<script type= "Text/javascript" src = "Jquery-scrolltofixed.js" ></script>

2.css style file. The use of Plug-ins does not require a style file, but we need to define the elements in a fixed position, and the elements require our custom style. The style file is not posted here and you can look at the "test file" below.

3.js code. You can initialize it in a word, or you can set initialization properties as needed. such as the style of the element, the style that is displayed when it is fixed, and to which element the fixed element is no longer fixed. Can see the official demo.

This article tests only fixed elements, using default properties
$ (' #operbox '). scrolltofixed ();

4. Use of HTML. Fixed-position elements need to use HTML. You can see the "Test file" below.

When testing the Scrolltofixed plug-in, in order to improve the effectiveness of the test case, the Scrollto plug-in is used, and the Scrollto plug-in is used to scroll to the specified element.
Test environment: IE8 Browser, Chrome,firefox. Test results:

The above mentioned is the entire content of this article, I hope you can enjoy.