jquery fixed Element plug-in scrolltofixed usage Guide

Source: Internet
Author: User
Tags require

jquery Fixed Element plug-in scrolltofixed usage Guide

The scrolltofixed (jquery fixed plugin) makes it easy for users to manipulate or view information by keeping the navigation or table top of the Web page fixed at the front or bottom. In addition to navigation and table headers, you can also fix other content, such as advertising, returning to the top, and so on.

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.


1 2 <script type= "Text/javascript" src= "jquery.min.js" ></script> <script type= "Text/javascript" 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:

Related Article

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.