jQuery fixed element plug-in scrolltofixed usage guide_jquery

I used this plug-in once some time ago, when I was changing a website. Require the top menu bar to be fixed as the scroll bar scrolls. I also wrote about it in general, but only mentioned it in the article. Article address: jQuery plug-in fixed element position. In this article, we will summarize it again.

1.scrolltofixed plug-in function

Fix the position of an element so that the element remains displayed when the page scrolls.

II.scrolltofixed official address

https://github.com/bigspotteddog/ScrollToFixed. There are instructions for use on the official address, and descriptions of the plug-in's properties and methods below. There are also detailed use cases in the demo, you can download it and take a look.

3. How to use scrolltofixed

The scrolltofixed plug-in has a wide range of uses. We can fix the top, the sidebar, or "fix any element on the page." By using it with other plug-ins, you can get very good results. If the scroll bar is detected to reach a certain position, a certain element will be displayed. In the test case, we use the scrolltofixed plug-in together with the scrollto plug-in. The specific effect can be seen in the "test file" below.

1. Reference files

The scrolltofixed plug-in is very simple to use, you only need to quote two js. One file is jquery, and the other 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. There is no need for a style file to use the plug-in, but we need to define fixed-position elements, and the elements require our own custom styles. The style file is not posted here, you can see the "test file" below.

3.js code. Initialization can be achieved in one sentence, or initialization properties can be set as needed. Such as the style of the element, the style displayed when it is fixed, which element is reached, the fixed element is no longer fixed, etc. You can watch the official demo.

//This article only tests fixed elements and uses default attributes
$('#operbox').scrollToFixed();

4. Used 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 efficiency of the test case, the scrollto plug-in is also used. The scrollto plug-in is used to scroll to the specified element.
Test environment: IE8 browser, chrome, firefox. Test results:

The above is the entire content of this article, I hope you all like it.