Difference between revisions of "Team:British Columbia/Test Page2"

m
m
Line 69: Line 69:
  
 
$(document).ready(function() {
 
$(document).ready(function() {
−
 
+
/*
 
$('#nav-wrapper').height($(".sidebar-nav").height());
 
$('#nav-wrapper').height($(".sidebar-nav").height());
 
      
 
      
 
$('.sidebar-nav').affix({
 
$('.sidebar-nav').affix({
 
   offset: { top: $('.nav-green').offset().top }
 
   offset: { top: $('.nav-green').offset().top }
 +
});*/
 +
 +
affix();
 +
 
});
 
});
  
 +
$(window).on('scroll resize', function() {
 +
  affix();
 +
});
 +
 +
 +
function affix(){
 +
// Fit affix width to its parent's width
 +
  var $affixElement = $('div[data-spy="affix"]');
 +
  $affixElement.width($affixElement.parent().width());
  
 +
  // Position of vertical scrollbar
 +
    var position = $(window).scrollTop();
 +
    if (position >= offset) {
 +
            $('.wrapper .section').each(function(i) {
 +
                // Current content block's position less body padding
 +
                var current = $(this).offset().top - offset - 1;
 +
               
 +
                // Add active class to corresponding affix menu while removing the same from siblings as per position) of current block
 +
                if (current <= position) {
 +
                    $('a', $affixElement).eq(i).addClass('active').siblings().removeClass('active');
 +
                }
 +
            });
 +
        } else {
 +
            $('a', $affixElement).find('.active').removeClass('active').end().find(":first").addClass('active');
 +
        }
 +
    };
 +
 
 +
}
  
 
</script>
 
</script>
Line 111: Line 142:
 
       </ul>
 
       </ul>
 
     </nav>
 
     </nav>
 +
 +
<div class="wrapper">
 
     <div class="col-sm-9" style="top: -14px">
 
     <div class="col-sm-9" style="top: -14px">
−
       <div id="section1">
+
       <div id="section1" class="section">
 
         <h1>Section 1</h1>
 
         <h1>Section 1</h1>
 
         <p>Try to scroll this section and look at the navigation list while scrolling!</p>
 
         <p>Try to scroll this section and look at the navigation list while scrolling!</p>
 
       </div>
 
       </div>
−
       <div id="section2">
+
       <div id="section2" class="section">
 
         <h1>Section 2</h1>
 
         <h1>Section 2</h1>
 
         <p>Try to scroll this section and look at the navigation list while scrolling!</p>
 
         <p>Try to scroll this section and look at the navigation list while scrolling!</p>
 
       </div>
 
       </div>
−
       <div id="section3">
+
       <div id="section3" class="section">
 
         <h1>Section 3</h1>
 
         <h1>Section 3</h1>
 
         <p>Try to scroll this section and look at the navigation list while scrolling!</p>
 
         <p>Try to scroll this section and look at the navigation list while scrolling!</p>
 
       </div>
 
       </div>
−
       <div id="section41">
+
       <div id="section41" class="section">
 
         <h1>Section 4-1</h1>
 
         <h1>Section 4-1</h1>
 
         <p>Try to scroll this section and look at the navigation list while scrolling!</p>
 
         <p>Try to scroll this section and look at the navigation list while scrolling!</p>
 
       </div>
 
       </div>
−
       <div id="section42">
+
       <div id="section42" class="section">
 
         <h1>Section 4-2</h1>
 
         <h1>Section 4-2</h1>
 
         <p>Try to scroll this section and look at the navigation list while scrolling!</p>
 
         <p>Try to scroll this section and look at the navigation list while scrolling!</p>
Line 134: Line 167:
 
     </div>
 
     </div>
 
   </div>
 
   </div>
 +
</div>
 
</div>
 
</div>
  
 
</body>
 
</body>
 
</html>
 
</html>

Revision as of 20:19, 16 October 2016

Main CSS Navbar CSS

Bootstrap Example

Human Practices

Section 1

Try to scroll this section and look at the navigation list while scrolling!

Section 2

Try to scroll this section and look at the navigation list while scrolling!

Section 3

Try to scroll this section and look at the navigation list while scrolling!

Section 4-1

Try to scroll this section and look at the navigation list while scrolling!

Section 4-2

Try to scroll this section and look at the navigation list while scrolling!