Difference between revisions of "Team:KU Leuven/HP/Silver"

Line 2: Line 2:
 
<html>
 
<html>
 
<style type="text/css">
 
<style type="text/css">
         .sidenavcontainer{
+
         #page-wrap {  
             float:left;
+
             width: 600px;
 +
            margin: 15px auto;
 +
            position: relative;  
 
         }
 
         }
/* The side navigation menu */
 
        .sidenav {
 
         
 
            width: 200px; /* 0 width - change this with JavaScript */
 
            position: fixed; /* Stay in place */
 
            z-index: 1; /* Stay on top */
 
            margin-top: 275px;
 
            margin-left: -155px;
 
            top:0;
 
            background-color: #cc3333; /* red */
 
            cursor:pointer;
 
        }
 
 
        /* The navigation menu links */
 
        .sidenav a {
 
            padding: 8px 8px 8px 32px;
 
            text-decoration: none;
 
            font-size: 25px;
 
            color: #818181;
 
            display: block;
 
            transition: 0.3s
 
        }
 
 
        /* When you mouse over the navigation links, change their color */
 
        .sidenav a:hover, .offcanvas a:focus{
 
            color: #f1f1f1;
 
        }
 
 
  
         /* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
+
         #sidebar {
        @media screen and (max-height: 450px) {
+
            width: 190px;
             .sidenav {padding-top: 15px;}
+
             position: fixed;  
             .sidenav a {font-size: 18px;}
+
             margin-left: 410px;  
 
         }
 
         }
 
         .question {
 
         .question {
Line 147: Line 121:
 
<div class="sidenav"></div>
 
<div class="sidenav"></div>
 
</div>
 
</div>
 +
<div id="pagewrap">
 +
    <div id="sidebar">
 
         <div id="grad">
 
         <div id="grad">
 
         <br>
 
         <br>
Line 390: Line 366:
 
                 </object>
 
                 </object>
 
         </div>
 
         </div>
 +
    </div>
 +
</div>
 +
<script>
 +
    $(function() {
  
 +
    var $sidebar  = $("#sidebar"),
 +
        $window    = $(window),
 +
        offset    = $sidebar.offset(),
 +
        topPadding = 15;
  
 
+
    $window.scroll(function() {
 
+
        if ($window.scrollTop() > offset.top) {
 
+
            $sidebar.stop().animate({
 
+
                marginTop: $window.scrollTop() - offset.top + topPadding
 
+
            });
 
+
        } else {
 
+
            $sidebar.stop().animate({
 
+
                marginTop: 0
 
+
            });
 
+
        }
 
+
    });
 
+
   
 
+
     });
 
+
</script>
 
+
 
+
 
+
 
+
        </div>
+
     </div>
+
    </div>
+
 
     <script type="text/javascript">
 
     <script type="text/javascript">
 
     $(document).ready(function() { /* to make sure the script runs after page load */
 
     $(document).ready(function() { /* to make sure the script runs after page load */

Revision as of 21:37, 29 October 2017