FixSidebar introduction and correction log, fixsidebar correction log

FixSidebar introduction and correction log, fixsidebar correction log

FixSidebar is a self-written small component with fixed sidebar. It is mainly used to keep the sidebar Displayed For A Long Time of the main content, depending on jQuery.

Github addressHttps://github.com/iRuxu/iRuxu.ui/tree/master/fixSidebar

Example addressHttp://www.jx3pve.com/macro

The reason for the entire writing is that the Yuan Ren wants to write a course in MOOC, but the function is refined.

Usage

fixSidebar(selector,top,bottom,triggerScroll)

For example

fixSidebar('sidebar',30,80,100)

Parameter description

SelectorIt is a selector and will be passed into jQuery. If not, exit the function. Therefore, if you are lazy, load it directly in the global JS file.

TopIt is the passed-in distance from the top position. This is used if the fixed panel navigation or user bar exists, if the value is not passed, it is 0.

BottomIt is the input base-to-base position. This value should be set if you have global bottom navigation, etc, the margin can be slightly larger than the bottom column height. If the value is not set, the margin is 0.

TriggerScrollIt was added at v0.3. At that time, because the page in your private project had a header banner, you can set the value when triggering the fix if necessary, for example, this page is triggered after 250.

Built-in Automatic determination of the actual horizontal coordinates of the default page. When the length of the sidebar is smaller than the page length, the position is calculated based on the top by default. when the length of the sidebar is greater than the page length, the position is still calculated at the bottom.

In the recent application of the copy column, due to the existence of the magic lamp rolling, I found that a rolling exception occurred. For a long time, I found it was caused by the BFC management of the magic lamp overflow, the final solution is to set overflow: hidden for the input selector, which must manage itself. This item is automatically added to the function in v0.4, and no additional css settings are required.

 

Okay. At last, if you have better suggestions, you can give me feedback ~