Difference between revisions of "Template:UFlorida/Menu"

Line 22: Line 22:
 
       top: 20px;
 
       top: 20px;
 
   }
 
   }
 
 
</style>
 
</style>
  
Line 31: Line 30:
  
 
<div class="container-fluid" style="background-color:#2196F3;color:#fff;height:200px;">
 
<div class="container-fluid" style="background-color:#2196F3;color:#fff;height:200px;">
   <h1>Bootstrap affixed.bs.affix</h1>
+
   <h1>Bootstrap affix-top.bs.affix</h1>
   <p>Scroll down this page.</p>
+
   <p>Scroll this page downwards and then scroll to the top.</p>
   <p><strong>The affixed.bs.affix event occurs when the .affix-top class has been replaced with the .affix class.</strong></p>
+
   <p><strong>The affix-top.bs.affix event occurs when the .affix class is about to be replaced with the .affix-top class.</strong></p>
 
</div>
 
</div>
 
<br>
 
<br>
Line 142: Line 141:
 
$(document).ready(function(){
 
$(document).ready(function(){
 
     $('.nav').affix({offset: {top: 150} });  
 
     $('.nav').affix({offset: {top: 150} });  
     $('.nav').on('affixed.bs.affix', function(){
+
     $('.nav').on('affix-top.bs.affix', function(){
         alert('The navigation menu is about to be affixed - The .affix-top class has been replaced with the .affix class');
+
         alert('The navigation menu is about to return to its original top position - The .affix class is about to be replaced with .affix-top');
 
     });
 
     });
 
});
 
});

Revision as of 20:16, 22 October 2017

Bootstrap affix-top.bs.affix

Scroll this page downwards and then scroll to the top.

The affix-top.bs.affix event occurs when the .affix class is about to be replaced with the .affix-top class.