آموزش پلاگین Affix در بوت استرپ

4 سال پیش

امتیاز دهید post

آموزش پلاگین Affix در بوت استرپ

در این درس از مجموعه آموزش برنامه نویسی سایت سورس باران، به آموزش پلاگین Affix در بوت استرپ خواهیم پرداخت.

پلاگین Affix اجازه می دهد تا یک <div> در مکانی در صفحه پیوست شود. همچنین می توانید با استفاده از این افزونه پین کردن آن را روشن و خاموش کنید. نمونه متداول این نمادهای اجتماعی است. آنها از یک مکان شروع می شوند ، اما وقتی صفحه به علامت خاصی برخورد می کند ، <div> در جای خود قفل می شود و پیمایش با بقیه صفحه را متوقف می کند.

اگر می خواهید این قابلیت پلاگین را به صورت جداگانه در آن بگنجانید، به affix.js نیاز خواهید داشت. در غیر این صورت ، همانطور که در فصل بررسی اجمالی افزونه های بوت استرپ ذکر شد ، می توانید bootstrap.js یا minst bootstrap.min.js را در آن بگنجانید.

کاربردهای پلاگین Affix در بوت استرپ

می توانید از طریق ویژگی های داده یا به صورت دستی با جاوا اسکریپت خود از پلاگین Affix استفاده کنید همانطور که در زیر بحث شده است

از طریق ویژگی های داده – برای اینکه رفتار پیوست را به راحتی به هر عنصری اضافه کنید ، کافیست data-spy = “affix” را به عنصری که می خواهید جاسوسی کنید اضافه کنید. برای تعیین زمان تغییر وضعیت پین کردن یک عنصر ، از جبران ها استفاده کنید.

مثال

مثال زیر استفاده از ویژگی های داده را نشان می دهد –

&lt;div class = "container"&gt;
   &lt;div class = "jumbotron"&gt;
      &lt;h1&gt;Bootstrap Affix Plugin example&lt;/h1&gt;
   &lt;/div&gt;
   
   &lt;div id = "myNav"  data-spy = "affix" data-offset-top = "60" data-offset-bottom = "200"&gt;
    
      &lt;div class = "col-md-3"&gt;
         &lt;ul class = "nav nav-tabs nav-stacked affix" data-spy = "affix" data-offset-top = "190"&gt;
            &lt;li class = "active"&gt;&lt;a href = "#one"&gt;Tutorial One&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href = "#two"&gt;Tutorial Two&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href = "#three"&gt;Tutorial Three&lt;/a&gt;&lt;/li&gt;
         &lt;/ul&gt;
      &lt;/div&gt;
      
      &lt;div class = "col-md-9"&gt;
         &lt;h2 id = "one"&gt;Tutorial One&lt;/h2&gt;
         
         &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
            Nam eu sem tempor, varius quam at, luctus dui. Mauris magna metus,
            dapibus nec turpis vel, semper malesuada ante. Vestibulum 
            id metus ac nisl bibendum scelerisque non non purus. Suspendisse 
            varius nibh non aliquet sagittis. In tincidunt orci sit amet 
            elementum vestibulum. Vivamus fermentum in arcu in aliquam. Quisque 
            aliquam porta odio in fringilla. Vivamus nisl leo, blandit at bibendum 
            eu, tristique eget risus. Integer aliquet quam ut elit suscipit, 
            id interdum neque porttitor. Integer faucibus ligula.&lt;/p&gt;
                
         &lt;p&gt;Vestibulum quis quam ut magna consequat faucibus. 
            Pellentesque eget nisi a mi suscipit tincidunt. Ut tempus dictum 
            risus. Pellentesque viverra sagittis quam at mattis. Suspendisse
            potenti. Aliquam sit amet gravida nibh, facilisis gravida odio.
            Phasellus auctor velit at lacus blandit, commodo iaculis justo
            viverra. Etiam vitae est arcu. Mauris vel congue dolor. Aliquam eget
            mi mi. Fusce quam tortor, commodo ac dui quis, bibendum viverra erat.
            Maecenas mattis lectus enim, quis tincidunt dui molestie euismod.
            Curabitur et diam tristique, accumsan nunc eu, hendrerit tellus.&lt;/p&gt;
                
         &lt;hr&gt;
         
         &lt;h2 id = "two"&gt;Tutorial Two&lt;/h2&gt;
            
         &lt;p&gt;Nullam hendrerit justo non leo aliquet imperdiet. Etiam in 
            sagittis lectus. Suspendisse ultrices placerat accumsan. Mauris quis 
            dapibus orci. In dapibus velit blandit pharetra tincidunt. 
            Quisque non sapien nec lacus condimentum facilisis ut iaculis enim.
            Sed viverra interdum bibendum. Donec ac sollicitudin dolor. Sed 
            fringilla vitae lacus at rutrum. Phasellus congue vestibulum ligula sed consequat.&lt;/p&gt;
                
         &lt;p&gt;Vestibulum consectetur scelerisque lacus, ac fermentum lorem 
            convallis sed. Nam odio tortor, dictum quis malesuada at, 
            pellentesque vitae orci. Vivamus elementum, felis eu auctor lobortis,
            diam velit egestas lacus, quis fermentum metus ante quis urna. Sed at 
            facilisis libero. Cum sociis natoque penatibus et magnis dis
            parturient montes, nascetur ridiculus mus. Vestibulum bibendum 
            blandit dolor. Nunc orci dolor, molestie nec nibh in, hendrerit
            tincidunt ante. Vivamus sem augue, hendrerit non sapien in, 
            mollis ornare augue.&lt;/p&gt;
                
         &lt;hr&gt;
         
         &lt;h2 id = "three"&gt;Tutorial Three&lt;/h2&gt;
            
         &lt;p&gt;Integer pulvinar leo id risus pellentesque vestibulum. 
            Sed diam libero, sodales eget sapien vel, porttitor bibendum enim. 
            Donec sed nibh vitae lorem porttitor blandit in nec ante. 
            Pellentesque vitae metus ipsum. Phasellus sed nunc ac sem malesuada 
            condimentum. Etiam in aliquam lectus. Nam vel sapien diam. Donec
            pharetra id arcu eget blandit. Proin imperdiet mattis augue in
            porttitor. Quisque tempus enim id lobortis feugiat. Suspendisse 
            tincidunt risus quis dolor fringilla blandit. Ut sed sapien at purus
            lacinia porttitor. Nullam iaculis, felis a pretium ornare, dolor nisl
            semper tortor, vel sagittis lacus est consequat eros. Sed id pretium
            nisl. Curabitur dolor nisl, laoreet vitae aliquam id, tincidunt sit 
            amet mauris. &lt;/p&gt;
                
         &lt;p&gt;Phasellus vitae suscipit justo. Mauris pharetra feugiat ante 
            id lacinia. Etiam faucibus mauris id tempor egestas. Duis luctus
            turpis at accumsan tincidunt. Phasellus risus risus,
            volutpat vel tellus ac, tincidunt fringilla massa. Etiam hendrerit 
            dolor eget ante rutrum adipiscing. Cras interdum ipsum mattis, 
            tempus mauris vel, semper ipsum. Duis sed dolor ut enim lobortis 
            pellentesque ultricies ac ligula. Pellentesque convallis  elit nisi, id 
            vulputate ipsum ullamcorper ut. Cras ac pulvinar purus, ac viverra est. Suspendisse 
            potenti. Integer pellentesque neque et elementum tempus. 
            Curabitur bibendum in ligula ut rhoncus.&lt;/p&gt;
                
         &lt;p&gt;Quisque pharetra velit id velit iaculis pretium. Nullam a justo 
            sed ligula porta semper eu quis enim. Pellentesque pellentesque,
            metus at facilisis hendrerit, lectus velit facilisis leo, quis
            volutpat turpis arcu quis enim. Nulla viverra lorem elementum
            interdum ultricies. Suspendisse accumsan quam nec ante mollis tempus.
            Morbi vel accumsan diam, eget convallis tellus. Suspendisse potenti.&lt;/p&gt;
      &lt;/div&gt;
      
   &lt;/div&gt;
&lt;/div&gt;

<h1>Bootstrap Affix Plugin example</h1>

</div>

<li class = "active"><a href = "#one">Tutorial One</a></li>

<li><a href = "#two">Tutorial Two</a></li>

<li><a href = "#three">Tutorial Three</a></li>

</ul>

</div>

<h2 id = "one">Tutorial One</h2>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Nam eu sem tempor, varius quam at, luctus dui. Mauris magna metus,

dapibus nec turpis vel, semper malesuada ante. Vestibulum

id metus ac nisl bibendum scelerisque non non purus. Suspendisse

varius nibh non aliquet sagittis. In tincidunt orci sit amet

elementum vestibulum. Vivamus fermentum in arcu in aliquam. Quisque

aliquam porta odio in fringilla. Vivamus nisl leo, blandit at bibendum

eu, tristique eget risus. Integer aliquet quam ut elit suscipit,

id interdum neque porttitor. Integer faucibus ligula.</p>

<p>Vestibulum quis quam ut magna consequat faucibus.

Pellentesque eget nisi a mi suscipit tincidunt. Ut tempus dictum

risus. Pellentesque viverra sagittis quam at mattis. Suspendisse

potenti. Aliquam sit amet gravida nibh, facilisis gravida odio.

Phasellus auctor velit at lacus blandit, commodo iaculis justo

viverra. Etiam vitae est arcu. Mauris vel congue dolor. Aliquam eget

mi mi. Fusce quam tortor, commodo ac dui quis, bibendum viverra erat.

Maecenas mattis lectus enim, quis tincidunt dui molestie euismod.

Curabitur et diam tristique, accumsan nunc eu, hendrerit tellus.</p>

<hr>

<h2 id = "two">Tutorial Two</h2>

<p>Nullam hendrerit justo non leo aliquet imperdiet. Etiam in

sagittis lectus. Suspendisse ultrices placerat accumsan. Mauris quis

dapibus orci. In dapibus velit blandit pharetra tincidunt.

Quisque non sapien nec lacus condimentum facilisis ut iaculis enim.

Sed viverra interdum bibendum. Donec ac sollicitudin dolor. Sed

fringilla vitae lacus at rutrum. Phasellus congue vestibulum ligula sed consequat.</p>

<p>Vestibulum consectetur scelerisque lacus, ac fermentum lorem

convallis sed. Nam odio tortor, dictum quis malesuada at,

pellentesque vitae orci. Vivamus elementum, felis eu auctor lobortis,

diam velit egestas lacus, quis fermentum metus ante quis urna. Sed at

facilisis libero. Cum sociis natoque penatibus et magnis dis

parturient montes, nascetur ridiculus mus. Vestibulum bibendum

blandit dolor. Nunc orci dolor, molestie nec nibh in, hendrerit

tincidunt ante. Vivamus sem augue, hendrerit non sapien in,

mollis ornare augue.</p>

<hr>

<h2 id = "three">Tutorial Three</h2>

<p>Integer pulvinar leo id risus pellentesque vestibulum.

Sed diam libero, sodales eget sapien vel, porttitor bibendum enim.

Donec sed nibh vitae lorem porttitor blandit in nec ante.

Pellentesque vitae metus ipsum. Phasellus sed nunc ac sem malesuada

condimentum. Etiam in aliquam lectus. Nam vel sapien diam. Donec

pharetra id arcu eget blandit. Proin imperdiet mattis augue in

porttitor. Quisque tempus enim id lobortis feugiat. Suspendisse

tincidunt risus quis dolor fringilla blandit. Ut sed sapien at purus

lacinia porttitor. Nullam iaculis, felis a pretium ornare, dolor nisl

semper tortor, vel sagittis lacus est consequat eros. Sed id pretium

nisl. Curabitur dolor nisl, laoreet vitae aliquam id, tincidunt sit

amet mauris. </p>

<p>Phasellus vitae suscipit justo. Mauris pharetra feugiat ante

id lacinia. Etiam faucibus mauris id tempor egestas. Duis luctus

turpis at accumsan tincidunt. Phasellus risus risus,

volutpat vel tellus ac, tincidunt fringilla massa. Etiam hendrerit

dolor eget ante rutrum adipiscing. Cras interdum ipsum mattis,

tempus mauris vel, semper ipsum. Duis sed dolor ut enim lobortis

pellentesque ultricies ac ligula. Pellentesque convallis elit nisi, id

vulputate ipsum ullamcorper ut. Cras ac pulvinar purus, ac viverra est. Suspendisse

potenti. Integer pellentesque neque et elementum tempus.

Curabitur bibendum in ligula ut rhoncus.</p>

<p>Quisque pharetra velit id velit iaculis pretium. Nullam a justo

sed ligula porta semper eu quis enim. Pellentesque pellentesque,

metus at facilisis hendrerit, lectus velit facilisis leo, quis

volutpat turpis arcu quis enim. Nulla viverra lorem elementum

interdum ultricies. Suspendisse accumsan quam nec ante mollis tempus.

Morbi vel accumsan diam, eget convallis tellus. Suspendisse potenti.</p>

</div>

خروجی

Bootstrap Affix Plugin example

Tutorial One

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at, luctus dui. Mauris magna metus, dapibus nec turpis vel, semper malesuada ante. Vestibulum id metus ac nisl bibendum scelerisque non non purus. Suspendisse varius nibh non aliquet sagittis. In tincidunt orci sit amet elementum vestibulum. Vivamus fermentum in arcu in aliquam. Quisque aliquam porta odio in fringilla. Vivamus nisl leo, blandit at bibendum eu, tristique eget risus. Integer aliquet quam ut elit suscipit, id interdum neque porttitor. Integer faucibus ligula.

Vestibulum quis quam ut magna consequat faucibus. Pellentesque eget nisi a mi suscipit tincidunt. Ut tempus dictum risus. Pellentesque viverra sagittis quam at mattis. Suspendisse potenti. Aliquam sit amet gravida nibh, facilisis gravida odio. Phasellus auctor velit at lacus blandit, commodo iaculis justo viverra. Etiam vitae est arcu. Mauris vel congue dolor. Aliquam eget mi mi. Fusce quam tortor, commodo ac dui quis, bibendum viverra erat. Maecenas mattis lectus enim, quis tincidunt dui molestie euismod. Curabitur et diam tristique, accumsan nunc eu, hendrerit tellus.

Tutorial Two

Nullam hendrerit justo non leo aliquet imperdiet. Etiam in sagittis lectus. Suspendisse ultrices placerat accumsan. Mauris quis dapibus orci. In dapibus velit blandit pharetra tincidunt. Quisque non sapien nec lacus condimentum facilisis ut iaculis enim. Sed viverra interdum bibendum. Donec ac sollicitudin dolor. Sed fringilla vitae lacus at rutrum. Phasellus congue vestibulum ligula sed consequat.

Vestibulum consectetur scelerisque lacus, ac fermentum lorem convallis sed. Nam odio tortor, dictum quis malesuada at, pellentesque vitae orci. Vivamus elementum, felis eu auctor lobortis, diam velit egestas lacus, quis fermentum metus ante quis urna. Sed at facilisis libero. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum bibendum blandit dolor. Nunc orci dolor, molestie nec nibh in, hendrerit tincidunt ante. Vivamus sem augue, hendrerit non sapien in, mollis ornare augue.

Tutorial Three

Integer pulvinar leo id risus pellentesque vestibulum. Sed diam libero, sodales eget sapien vel, porttitor bibendum enim. Donec sed nibh vitae lorem porttitor blandit in nec ante. Pellentesque vitae metus ipsum. Phasellus sed nunc ac sem malesuada condimentum. Etiam in aliquam lectus. Nam vel sapien diam. Donec pharetra id arcu eget blandit. Proin imperdiet mattis augue in porttitor. Quisque tempus enim id lobortis feugiat. Suspendisse tincidunt risus quis dolor fringilla blandit. Ut sed sapien at purus lacinia porttitor. Nullam iaculis, felis a pretium ornare, dolor nisl semper tortor, vel sagittis lacus est consequat eros. Sed id pretium nisl. Curabitur dolor nisl, laoreet vitae aliquam id, tincidunt sit amet mauris.

Phasellus vitae suscipit justo. Mauris pharetra feugiat ante id lacinia. Etiam faucibus mauris id tempor egestas. Duis luctus turpis at accumsan tincidunt. Phasellus risus risus, volutpat vel tellus ac, tincidunt fringilla massa. Etiam hendrerit dolor eget ante rutrum adipiscing. Cras interdum ipsum mattis, tempus mauris vel, semper ipsum. Duis sed dolor ut enim lobortis pellentesque ultricies ac ligula. Pellentesque convallis elit nisi, id vulputate ipsum ullamcorper ut. Cras ac pulvinar purus, ac viverra est. Suspendisse potenti. Integer pellentesque neque et elementum tempus. Curabitur bibendum in ligula ut rhoncus.

Quisque pharetra velit id velit iaculis pretium. Nullam a justo sed ligula porta semper eu quis enim. Pellentesque pellentesque, metus at facilisis hendrerit, lectus velit facilisis leo, quis volutpat turpis arcu quis enim. Nulla viverra lorem elementum interdum ultricies. Suspendisse accumsan quam nec ante mollis tempus. Morbi vel accumsan diam, eget convallis tellus. Suspendisse potenti.

از طریق JavaScript – می توانید عنصری را به صورت دستی با JavaScript پیوست کنید که در زیر نشان داده شده است

$('#myAffix').affix({
   offset: {
      top: 100, bottom: function () {
         return (this.bottom = $('.bs-footer').outerHeight(true))
      }
   }
})

$('#myAffix').affix({

offset: {

top: 100, bottom: function () {

return (this.bottom = $('.bs-footer').outerHeight(true))

}

})

مثال

مثال زیر استفاده از ویژگی های داده را نشان می دهد –

&lt;div class = "container"&gt;
   &lt;div class = "jumbotron"&gt;
      &lt;h1&gt;Bootstrap Affix Plugin example&lt;/h1&gt;
   &lt;/div&gt;
   
   &lt;div&gt;
    
      &lt;div class = "col-md-3"&gt;
         &lt;ul class = "nav nav-tabs nav-stacked affix" id = "myNav"&gt;
            &lt;li class = "active"&gt;&lt;a href = "#one"&gt;Tutorial One&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href = "#two"&gt;Tutorial Two&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href = "#three"&gt;Tutorial Three&lt;/a&gt;&lt;/li&gt;
         &lt;/ul&gt;
      &lt;/div&gt;
      
      &lt;div class = "col-md-9"&gt;
         &lt;h2 id = "one"&gt;Tutorial One&lt;/h2&gt;
            
         &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
            Nam eu sem tempor, varius quam at, luctus dui. Mauris magna metus, 
            dapibus nec turpis vel, semper malesuada ante. Vestibulum id metus
            ac nisl bibendum scelerisque non non purus. Suspendisse varius nibh 
            non aliquet sagittis. In tincidunt orci sit amet elementum vestibulum. 
            Vivamus fermentum in arcu in aliquam. Quisque aliquam porta odio 
            in fringilla. Vivamus nisl leo, blandit at bibendum eu, tristique 
            eget risus. Integer aliquet quam ut elit suscipit, id interdum 
            neque porttitor. Integer faucibus ligula.&lt;/p&gt;
                
         &lt;p&gt;Vestibulum quis quam ut magna consequat faucibus. 
            Pellentesque eget nisi a mi suscipit tincidunt. Ut tempus dictum
            risus. Pellentesque viverra sagittis quam at mattis. Suspendisse
            potenti. Aliquam sit amet gravida nibh, facilisis gravida odio.
            Phasellus auctor velit at lacus blandit, commodo iaculis justo
            viverra. Etiam vitae est arcu. Mauris vel congue dolor. 
            Aliquam eget mi mi. Fusce quam tortor, commodo ac dui quis,
            bibendum viverra erat. Maecenas mattis lectus enim, quis tincidunt
            dui molestie euismod. Curabitur et diam tristique, accumsan nunc eu,
            hendrerit tellus.&lt;/p&gt;
                
         &lt;hr&gt;
         
         &lt;h2 id = "two"&gt;Tutorial Two&lt;/h2&gt;
            
         &lt;p&gt;Nullam hendrerit justo non leo aliquet imperdiet. Etiam in
            sagittis lectus. Suspendisse ultrices placerat accumsan. Mauris 
            quis dapibus orci. In dapibus velit blandit pharetra tincidunt.
            Quisque non sapien nec lacus condimentum facilisis ut iaculis enim.
            Sed viverra interdum bibendum. Donec ac sollicitudin dolor. 
            Sed fringilla vitae lacus at rutrum. Phasellus congue vestibulum 
            ligula sed consequat.&lt;/p&gt;
                
         &lt;p&gt;Vestibulum consectetur scelerisque lacus, ac fermentum lorem 
            convallis sed. Nam odio tortor, dictum quis malesuada at, 
            pellentesque vitae orci. Vivamus elementum, felis eu auctor lobortis,
            diam velit egestas lacus, quis fermentum metus ante quis urna. 
            Sed at facilisis libero. Cum sociis natoque penatibus et magnis dis 
            parturient montes, nascetur ridiculus mus. Vestibulum bibendum 
            blandit dolor. Nunc orci dolor, molestie nec nibh in, hendrerit
            tincidunt ante. Vivamus sem augue, hendrerit non sapien in, 
            mollis ornare augue.&lt;/p&gt;
                
         &lt;hr&gt;
         
         &lt;h2 id = "three"&gt;Tutorial Three&lt;/h2&gt;
            
         &lt;p&gt;Integer pulvinar leo id risus pellentesque vestibulum. 
            Sed diam libero, sodales eget sapien vel, porttitor bibendum enim. 
            Donec sed nibh vitae lorem porttitor blandit in nec ante. 
            Pellentesque vitae metus ipsum. Phasellus sed nunc ac sem malesuada
            condimentum. Etiam in aliquam lectus. Nam vel sapien diam. 
            Donec pharetra id arcu eget blandit. Proin imperdiet mattis augue in 
            porttitor. Quisque tempus enim id lobortis feugiat. Suspendisse 
            tincidunt risus quis dolor fringilla blandit. Ut sed sapien at
            purus lacinia porttitor. Nullam iaculis, felis a pretium ornare,
            dolor nisl semper tortor, vel sagittis lacus est consequat eros. 
            Sed id pretium nisl. Curabitur dolor nisl, laoreet vitae aliquam id, 
            tincidunt sit amet mauris.&lt;/p&gt;
                
         &lt;p&gt;Phasellus vitae suscipit justo. Mauris pharetra feugiat ante id
            lacinia. Etiam faucibus mauris id tempor egestas. Duis luctus turpis
            at accumsan tincidunt. Phasellus risus risus, volutpat vel tellus ac,
            tincidunt fringilla massa. Etiam hendrerit dolor eget ante 
            rutrum adipiscing. Cras interdum ipsum mattis, tempus mauris vel,
            semper ipsum. Duis sed dolor ut enim lobortis pellentesque ultricies
            ac ligula. Pellentesque convallis  elit nisi, id vulputate ipsum
            ullamcorper ut. Cras ac pulvinar purus, ac viverra est. Suspendisse 
            potenti. Integer pellentesque neque et elementum tempus. 
            Curabitur bibendum in ligula ut rhoncus.&lt;/p&gt;
                
         &lt;p&gt;Quisque pharetra velit id velit iaculis pretium. Nullam a justo
            sed ligula porta semper eu quis enim. Pellentesque pellentesque,
            metus at facilisis hendrerit, lectus velit facilisis leo, quis 
            volutpat turpis arcu quis enim. Nulla viverra lorem elementum 
            interdum ultricies. Suspendisse accumsan quam nec ante mollis tempus.
            Morbi vel accumsan diam, eget convallis tellus. Suspendisse potenti.&lt;/p&gt;
      &lt;/div&gt;
      
   &lt;/div&gt;
&lt;/div&gt;

&lt;script type = "text/javascript"&gt;
   $(function () {
      $('#myNav').affix({
         offset: {
            top: 60  
         }
      });
   });
&lt;/script&gt;

100

101

102

103

104

105

106

107

108

109

<h1>Bootstrap Affix Plugin example</h1>

</div>

<div>

<li class = "active"><a href = "#one">Tutorial One</a></li>

<li><a href = "#two">Tutorial Two</a></li>

<li><a href = "#three">Tutorial Three</a></li>

</ul>

</div>

<h2 id = "one">Tutorial One</h2>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Nam eu sem tempor, varius quam at, luctus dui. Mauris magna metus,

dapibus nec turpis vel, semper malesuada ante. Vestibulum id metus

ac nisl bibendum scelerisque non non purus. Suspendisse varius nibh

non aliquet sagittis. In tincidunt orci sit amet elementum vestibulum.

Vivamus fermentum in arcu in aliquam. Quisque aliquam porta odio

in fringilla. Vivamus nisl leo, blandit at bibendum eu, tristique

eget risus. Integer aliquet quam ut elit suscipit, id interdum

neque porttitor. Integer faucibus ligula.</p>

<p>Vestibulum quis quam ut magna consequat faucibus.

Pellentesque eget nisi a mi suscipit tincidunt. Ut tempus dictum

risus. Pellentesque viverra sagittis quam at mattis. Suspendisse

potenti. Aliquam sit amet gravida nibh, facilisis gravida odio.

Phasellus auctor velit at lacus blandit, commodo iaculis justo

viverra. Etiam vitae est arcu. Mauris vel congue dolor.

Aliquam eget mi mi. Fusce quam tortor, commodo ac dui quis,

bibendum viverra erat. Maecenas mattis lectus enim, quis tincidunt

dui molestie euismod. Curabitur et diam tristique, accumsan nunc eu,

hendrerit tellus.</p>

<hr>

<h2 id = "two">Tutorial Two</h2>

<p>Nullam hendrerit justo non leo aliquet imperdiet. Etiam in

sagittis lectus. Suspendisse ultrices placerat accumsan. Mauris

quis dapibus orci. In dapibus velit blandit pharetra tincidunt.

Quisque non sapien nec lacus condimentum facilisis ut iaculis enim.

Sed viverra interdum bibendum. Donec ac sollicitudin dolor.

Sed fringilla vitae lacus at rutrum. Phasellus congue vestibulum

ligula sed consequat.</p>

<p>Vestibulum consectetur scelerisque lacus, ac fermentum lorem

convallis sed. Nam odio tortor, dictum quis malesuada at,

pellentesque vitae orci. Vivamus elementum, felis eu auctor lobortis,

diam velit egestas lacus, quis fermentum metus ante quis urna.

Sed at facilisis libero. Cum sociis natoque penatibus et magnis dis

parturient montes, nascetur ridiculus mus. Vestibulum bibendum

blandit dolor. Nunc orci dolor, molestie nec nibh in, hendrerit

tincidunt ante. Vivamus sem augue, hendrerit non sapien in,

mollis ornare augue.</p>

<hr>

<h2 id = "three">Tutorial Three</h2>

<p>Integer pulvinar leo id risus pellentesque vestibulum.

Sed diam libero, sodales eget sapien vel, porttitor bibendum enim.

Donec sed nibh vitae lorem porttitor blandit in nec ante.

Pellentesque vitae metus ipsum. Phasellus sed nunc ac sem malesuada

condimentum. Etiam in aliquam lectus. Nam vel sapien diam.

Donec pharetra id arcu eget blandit. Proin imperdiet mattis augue in

porttitor. Quisque tempus enim id lobortis feugiat. Suspendisse

tincidunt risus quis dolor fringilla blandit. Ut sed sapien at

purus lacinia porttitor. Nullam iaculis, felis a pretium ornare,

dolor nisl semper tortor, vel sagittis lacus est consequat eros.

Sed id pretium nisl. Curabitur dolor nisl, laoreet vitae aliquam id,

tincidunt sit amet mauris.</p>

<p>Phasellus vitae suscipit justo. Mauris pharetra feugiat ante id

lacinia. Etiam faucibus mauris id tempor egestas. Duis luctus turpis

at accumsan tincidunt. Phasellus risus risus, volutpat vel tellus ac,

tincidunt fringilla massa. Etiam hendrerit dolor eget ante

rutrum adipiscing. Cras interdum ipsum mattis, tempus mauris vel,

semper ipsum. Duis sed dolor ut enim lobortis pellentesque ultricies

ac ligula. Pellentesque convallis elit nisi, id vulputate ipsum

ullamcorper ut. Cras ac pulvinar purus, ac viverra est. Suspendisse

potenti. Integer pellentesque neque et elementum tempus.

Curabitur bibendum in ligula ut rhoncus.</p>

<p>Quisque pharetra velit id velit iaculis pretium. Nullam a justo

sed ligula porta semper eu quis enim. Pellentesque pellentesque,

metus at facilisis hendrerit, lectus velit facilisis leo, quis

volutpat turpis arcu quis enim. Nulla viverra lorem elementum

interdum ultricies. Suspendisse accumsan quam nec ante mollis tempus.

Morbi vel accumsan diam, eget convallis tellus. Suspendisse potenti.</p>

</div>

$(function () {

$('#myNav').affix({

offset: {

top: 60

}

});

</script>

خروجی

Bootstrap Affix Plugin example

Tutorial One

Tutorial Two

Tutorial Three

موقعیت یابی از طریق CSS

در هر دو حالت فوق، شما باید CSS را برای موقعیت یابی محتوای خود ارائه دهید. پلاگین affix بین سه کلاس جابجا می شود ، که هر کدام نمایانگر حالت خاصی هستند – .affix ، .affix-top و .affix-bottom. مراحل زیر را دنبال کنید تا CSS خود را برای هر یک از گزینه های استفاده بالا تنظیم کنید.

برای شروع، پلاگین .affix-top را اضافه می کند تا نشان دهد که این عنصر در بالاترین موقعیت خود قرار دارد. در این مرحله به موقعیت CSS نیازی نیست.

پیمایش در کنار عنصری که می خواهید چسبانده شود این جایی است که affix. جایگزین affix-top. می شود و موقعیت را تنظیم می کند: fixed؛ (ارائه شده توسط کد CSS بوت استرپ).

اگر یک bottom offset تعریف شده باشد ، گذشته را پیمایش کنید که باید affix. را با affix-bottom. جایگزین کند. از آنجا که جابجایی اختیاری است ، برای تنظیم آن باید CSS مناسب تنظیم کنید. در این حالت ، موقعیت را اضافه کنید: مطلق؛ در صورت لزوم.

گزینه ها

گزینه های خاصی وجود دارد که می تواند از طریق ویژگی های داده یا JavaScript منتقل شود همانطور که در جدول زیر ذکر شده است

نام گزینه	مقدار پیش فرض	نام ویژگی داده	توضیح
offset	number \| function \| object Default: 10	data-offset	پیکسل برای جابجایی از صفحه هنگام محاسبه موقعیت پیمایش اگر یک عدد منفرد ارائه شود، جابجایی در دو جهت بالا و پایین اعمال می شود. برای تهیه یک جابجایی منحصر به فرد، پایین و بالا فقط یک جابجایی شی ارائه دهید: {top: 10} یا offset: {top: 10، bottom: 5}. درصورت نیاز به محاسبه پویا جبران، از یک تابع استفاده کنید.

نام

گزینه

مقدار پیش فرض

نام ویژگی داده

توضیح

offset

number | function | object Default: 10

data-offset

پیکسل برای جابجایی از صفحه هنگام محاسبه موقعیت پیمایش اگر یک عدد منفرد ارائه شود، جابجایی در دو جهت بالا و پایین اعمال می شود. برای تهیه یک جابجایی منحصر به فرد، پایین و بالا فقط یک جابجایی شی ارائه دهید: {top: 10} یا offset: {top: 10، bottom: 5}. درصورت نیاز به محاسبه پویا جبران، از یک تابع استفاده کنید.

منبع.

لیست جلسات قبل آموزش بوت استرپ

امتیاز دهید post

برچسب ها : آموزش بوت استرپ آموزش طراحی وب سایت

نویسنده مطلب saber

آموزش پلاگین Affix در بوت استرپ

آموزش پلاگین Affix در بوت استرپ

کاربردهای پلاگین Affix در بوت استرپ

مثال

خروجی

Bootstrap Affix Plugin example

Tutorial One

Tutorial Two

Tutorial Three

مثال

خروجی

Bootstrap Affix Plugin example

Tutorial One

Tutorial Two

Tutorial Three

موقعیت یابی از طریق CSS

گزینه ها

لیست جلسات قبل آموزش بوت استرپ

دیدگاه شما

بدون دیدگاه

آموزش پلاگین Affix در بوت استرپ

کاربردهای پلاگین Affix در بوت استرپ

مثال

خروجی

Bootstrap Affix Plugin example

Tutorial One

Tutorial Two

Tutorial Three

مثال

خروجی

Bootstrap Affix Plugin example

Tutorial One

Tutorial Two

Tutorial Three

موقعیت یابی از طریق CSS

گزینه ها

لیست جلسات قبل آموزش بوت استرپ

دیدگاه شما

برای صرف‌نظر کردن از پاسخ‌گویی اینجا را کلیک نمایید.

بدون دیدگاه