बूटस्ट्रैप JS Affix
जेएस एफ़िक्स (affix.js)
Affix प्लगइन एक तत्व को पृष्ठ पर एक क्षेत्र में चिपका (लॉक) होने की अनुमति देता है। इसका उपयोग अक्सर नेविगेशन मेनू या सामाजिक आइकन बटन के साथ किया जाता है, ताकि पृष्ठ को ऊपर और नीचे स्क्रॉल करते समय उन्हें एक विशिष्ट क्षेत्र में "छड़ी" बनाया जा सके।
स्क्रॉल स्थिति के आधार पर प्लगइन इस व्यवहार को चालू और बंद करता है (सीएसएस स्थिति के मूल्य को स्थिर से स्थिर में बदलता है)।
affix प्लगइन तीन वर्गों के बीच टॉगल करता है: .affix, .affix-top, और
.affix-bottom। प्रत्येक वर्ग एक विशेष राज्य का प्रतिनिधित्व करता है। कक्षा position:fixed
के अपवाद के साथ, वास्तविक स्थिति को संभालने के लिए आपको सीएसएस गुण जोड़ना होगा ।.affix
अधिक जानकारी के लिए हमारा बूटस्ट्रैप एफ़िक्स ट्यूटोरियल पढ़ें ।
युक्ति: एफ़िक्स प्लगइन अक्सर स्क्रॉलस्पी प्लगइन के साथ प्रयोग किया जाता है।
डेटा के माध्यम से-* विशेषताएँ
data-spy="affix"उस तत्व में जोड़ें जिसकी आप जासूसी करना चाहते हैं, और
विशेषता स्क्रॉल की स्थिति की गणना करने के लिए।data-offset-top|bottom="number"
उदाहरण
<ul class="nav nav-pills nav-stacked" data-spy="affix" data-offset-top="205">
जावास्क्रिप्ट के माध्यम से
इसके साथ मैन्युअल रूप से सक्षम करें:
उदाहरण
$('.nav').affix({offset: {top: 150} });
प्रत्यय विकल्प
विकल्प डेटा विशेषताओं या जावास्क्रिप्ट के माध्यम से पारित किए जा सकते हैं। डेटा विशेषताओं के लिए, विकल्प नाम को डेटा में जोड़ें- जैसा कि डेटा-ऑफ़सेट = "" में है।
| Name | Type | Default | Description |
|---|---|---|---|
| offset | number | object | function | 10 |
Specifies the number of pixels to offset from screen when calculating position of scroll. When using a single number, the offset is added to both top and bottom directions. If you only want to control the top or the bottom, use an object, like offset: {top:25}For multiple offsets, use offset: {top:25, bottom:50}Tip: Use a function to dynamically provide an offset (can be useful for responsive designs) |
| target | selector | node | element | the window object | Specifies the target element of the affix |
Affix Events
निम्न तालिका सभी उपलब्ध प्रत्यय घटनाओं को सूचीबद्ध करती है।
| Event | Description | Try it |
|---|---|---|
| affix.bs.affix | Occurs before fixed positioning is added to the element (e.g, when the .affix-top class is about to be replaced with the .affix class) |
|
| affixed.bs.affix | Occurs after fixed positioning is added to the element (e.g., after the .affix-top class is replaced with the .affix class) |
|
| affix-top.bs.affix | Occurs before the top element returns to its original (non-fixed) position (e.g., the .affix class is about to be replaced with .affix-top) |
|
| affixed-top.bs.affix | Occurs after the top element returns to its original (non-fixed) position (e.g., the .affix class has been replaced with .affix-top) |
|
| affix-bottom.bs.affix | Occurs before the bottom element returns to its original (non-fixed) position (e.g., the .affix class is about to be replaced with .affix-bottom) |
|
| affixed-bottom.bs.affix | Occurs after the bottom element returns to its original (non-fixed) position (e.g., the .affix class has been replaced with .affix-bottom) |
और ज्यादा उदाहरण
चिपका हुआ नवबार
एक क्षैतिज चिपका हुआ नेविगेशन मेनू बनाएं:
उदाहरण
<nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="197">
स्वचालित रूप से एक नेवबार चिपकाने के लिए jQuery का उपयोग करना
उपयोगकर्ता द्वारा एक निर्दिष्ट तत्व (<हेडर>) को स्क्रॉल करने के बाद नेवबार को चिपकाने के लिए jQuery की बाहरी हाइट () विधि का उपयोग करें:
उदाहरण
$(".navbar").affix({offset: {top: $("header").outerHeight(true)}
});
स्क्रॉलस्पी और एफिक्स
स्क्रॉलस्पाई प्लगइन के साथ एफिक्स प्लगइन का उपयोग करना :
क्षैतिज मेनू (नवबार)
<body data-spy="scroll" data-target=".navbar" data-offset="50">
<nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="197">
...
</nav>
</body>
लंबवत मेनू (सिडनेव)
<body data-spy="scroll" data-target="#myScrollspy" data-offset="15">
<nav class="col-sm-3" id="myScrollspy">
<ul class="nav nav-pills nav-stacked" data-spy="affix" data-offset-top="205">
...
</nav>
</body>
एफिक्स पर एनिमेटेड नेवबार
विभिन्न .affix वर्गों में हेरफेर करने के लिए CSS का उपयोग करें:
उदाहरण - स्क्रॉल पर नेवबार की पृष्ठभूमि का रंग और पैडिंग बदलें
.affix {
top: 0;
width: 100%;
-webkit-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
background-color: #F44336;
border-color: #F44336;
}
.affix a {
color: #fff !important;
padding: 15px !important;
-webkit-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
}
.affix-top a {
padding: 25px !important;
}
उदाहरण - नेवबार में स्लाइड करें
.affix {
top: 0;
width: 100%;
-webkit-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
}
.affix-top {
position: static;
top: -35px;
}