Difference between revisions of "Template:UFlorida/Menu"

Line 8: Line 8:
 
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
 
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
 
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
 
   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
−
 
−
<script>
 
−
$('#topnavbar').affix({
 
−
    offset: {
 
−
        top: $('#banner').height()
 
−
    } 
 
−
});
 
−
</script>
 
  
 
</head>
 
</head>
Line 27: Line 19:
 
#bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px;  
 
#bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px;  
  
−
#topnavbar {
+
.affix {
−
    margin: 0;
+
      top: 20px;
−
}
+
  }
−
#topnavbar.affix {
+
−
    position: fixed;
+
−
    top: 0;
+
−
    width: 100%;
+
−
}
+
  
−
#banner {
 
−
    background-color: yellow; 
 
−
}
 
 
</style>
 
</style>
  
Line 46: Line 30:
 
<body>
 
<body>
  
−
<div class="container" id="banner">
+
<div class="container-fluid" style="background-color:#2196F3;color:#fff;height:200px;">
−
   <div class="row">
+
   <h1>Bootstrap affixed.bs.affix</h1>
−
      <h1> Your banner </h1>
+
  <p>Scroll down this page.</p>
−
   </div>
+
   <p><strong>The affixed.bs.affix event occurs when the .affix-top class has been replaced with the .affix class.</strong></p>
 
</div>
 
</div>
 +
<br>
  
 
<div style="margin-top:100px"></div>
 
<div style="margin-top:100px"></div>
Line 153: Line 138:
 
</div> <!--END container-->
 
</div> <!--END container-->
 
</body>
 
</body>
 +
 +
<script>
 +
$(document).ready(function(){
 +
    $('.nav').affix({offset: {top: 150} });
 +
    $('.nav').on('affixed.bs.affix', function(){
 +
        alert('The navigation menu is about to be affixed - The .affix-top class has been replaced with the .affix class');
 +
    });
 +
});
 +
</script>
 +
 +
</html>

Revision as of 20:15, 22 October 2017

Bootstrap affixed.bs.affix

Scroll down this page.

The affixed.bs.affix event occurs when the .affix-top class has been replaced with the .affix class.