mise en œuvre Bootstrap Affix

Question

J'ai une page avec h1 et contenu dans la balise <p>, comme ceci:

<h1>Content1</h1> 
<p>Blablablalbal</p> 

<h1>Content2</h1> 
<p>Blablablalbal</p> 

<h1>Content3</h1> 
<p>Blablablalbal</p> 

<h1>Content4</h1> 
<p>Blablablalbal</p> 

<h1>Content5</h1> 
<p>Blablablalbal</p> 

Je veux mettre en œuvre float Bootstrap Affix à droite, comme page officielle Bootstrap: http://getbootstrap.com/javascript/#affix

Mais Je ne sais pas comment, je ne comprends pas les instructions, je dois mettre ceci:

<div data-spy="affix" data-offset-top="60" data-offset-bottom="200"> 
    ... 
</div> 

Et ceci:

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

Comment puis-je faire?

Merci.

Answer 1

Vous pourriez vouloir essayer un générateur de menu Affix appelé Appizy. Vous n'avez qu'à créer une feuille de calcul avec votre titre (h1) dans une colonne et le contenu (p) dans une deuxième colonne, Appizy crée les bons tags et javascript pour vous. Ici vous avez a tutorial video.

Answer 2

Comme je l'ai dit, vous ne pouvez utiliser les balises HTML:

<div data-spy="affix" data-offset-top="60" data-offset-bottom="200"> 
    <ul class="nav"> 
    <li><a href="#title-1">Title 1</a></li> 
    <li><a href="#title-2">Title 2</a></li> 
    .... 
    </ul> 
</div> 

Et pour votre contenu:

<h1 id="title-1">Content1</h1> 
<p>Blablablalbal</p> 

<h1 id="title-2">Content2</h1> 
<p>Blablablalbal</p> 
...