Home > Article > Web Front-end > How to set fixed positioning in bootstrap
In bootstrap, you can use the Affix plug-in to set fixed positioning. The plug-in can fix the positioning of any element through the custom attribute data. The syntax is "fe7a2b3292eef932f8cbb7f568732a0a".
The operating environment of this tutorial: Windows 10 system, bootstrap version 3.3.7, DELL G3 computer
Fixed positioning--Declarative triggering of fixed positioning
The Affix plug-in can perform fixed positioning on any element. The simpler method is to trigger it through the custom attribute data. It mainly includes two parameters:
1. data-spy: value affix, indicating that the element is fixed.
2. data-offset: an integer value, such as 90, means that the values of the top and bottom elements are both 90px, which includes two methods: data-offset-top and data-offset-bottom.
data-offset-top is used to set the distance of the element from the top. For example, 90 means that the element is 90px from the top. When the user drags the scroll bar down from the top, when the scrolling distance is greater than 90px, the affix element will no longer scroll and will be fixed at the top of the browser window.
data-offset-bottom is just the opposite of data-offset-top.
The specific usage is as follows:
<div data-spy="affix" data-offset="90">affix元素</div>
Separately set the data-offset value method:
<div data-spy="affix" data-offset-top="90" data-offset-bottom="150">affix元素</div>
Note that scrolling monitoring must be declared in the body.
<body data-spy="scroll" data-target="sidebarMenu">
Note, please view the effect in widescreen mode. According to my tests, using declarative style, even if the value of data-offset-top is set, it will be invalid. You need to set a top value for affix in the style, which is equal to the value of data-offset-top. Same as data-offset-bottom.
Related recommendations: bootstrap tutorial
The above is the detailed content of How to set fixed positioning in bootstrap. For more information, please follow other related articles on the PHP Chinese website!