Difference between revisions of "Team:York/Notebook"

Line 36: Line 36:
 
}
 
}
 
</style-->
 
</style-->
−
 
−
<style>
 
−
 
−
html, body
 
−
  height: 100%
 
−
 
−
html
 
−
  background-color: #222
 
−
 
−
body
 
−
  position: relative
 
−
  max-width: 1024px
 
−
  min-width: 768px
 
−
  margin: 0 auto
 
−
 
 
−
header
 
−
  color: #fff
 
−
  background-color: #000
 
−
  overflow: hidden
 
−
 
−
h1
 
−
  font-weight: normal
 
−
  margin: 0
 
−
  padding: 0 20px
 
−
  line-height: 2
 
−
  position: relative
 
−
  transition: all .3s ease-out
 
−
 
−
.sidebar, .main
 
−
  transition: all .3s ease-out
 
−
  overflow: scroll
 
−
  -webkit-overflow-scrolling: touch
 
−
  position: absolute
 
−
  top: 64px
 
−
  bottom: 0
 
−
 
−
.sidebar
 
−
  width: 260px
 
−
  background-color: #333
 
−
  left: 0
 
−
 
−
.main
 
−
  background-color: #f5f5f5
 
−
  position: absolute
 
−
  left: 260px
 
−
  right: 0
 
−
  padding: 20px
 
−
 
−
h2
 
−
  margin: 0 0 1em 0
 
−
 
−
h3
 
−
  background-color: #555
 
−
  color: #ccc
 
−
  margin: 0
 
−
  padding: 0 20px
 
−
  font-weight: normal
 
−
  line-height: 2
 
−
  text-transform: uppercase
 
−
  font-size: 90%
 
−
 
 
−
.toggle-menu
 
−
  color: #ccc
 
−
  text-decoration: none
 
−
  font-size: 50px
 
−
  float: left
 
−
  display: block
 
−
  position: absolute
 
−
  left: 0
 
−
  z-index: -1
 
−
  opacity: 0
 
−
  transition: opacity .3s ease-out
 
−
  &:hover
 
−
    color: #fff
 
−
  &:before
 
−
    height: 64px
 
−
    width: 64px
 
−
    display: block
 
−
    text-align: center
 
−
    line-height: 64px
 
−
    font-size: 24px
 
−
 
−
nav ul
 
−
  list-style: none
 
−
  padding: 0
 
−
  margin: 0
 
−
  background-color: #444
 
−
  li
 
−
    padding: 20px
 
−
    color: #ccc
 
−
    background-color: #333
 
−
    margin-bottom: 1px
 
−
    border-left: 10px solid transparent
 
−
    &.active
 
−
      border-color: #e35205
 
−
   
 
−
@media all and (max-width: 1024px)
 
−
  .sidebar.toggled
 
−
    left: 0
 
−
    z-index: 10
 
−
    box-shadow: 3px 1px 10px rgba(0,0,0,.8)
 
−
    + .main
 
−
      overflow: hidden
 
−
  .sidebar
 
−
    left: -260px
 
−
  .main
 
−
    left: 0
 
−
  .toggle-menu
 
−
    z-index: 1
 
−
    opacity: 1
 
−
  h1
 
−
    left: 40px
 
−
   
 
−
 
−
</style>
 
−
 
−
<aside class="sidebar">
 
−
  <nav>
 
−
    <ul>
 
−
      <li class="active">Chapter 1</li>
 
−
      <li>Chapter 2</li>
 
−
      <li>Chapter 3</li>
 
−
      <li>Chapter 4</li>
 
−
      <li>Chapter 5</li>
 
−
      <li>Chapter 6</li>
 
−
      <li>Chapter 7</li>
 
−
      <li>Chapter 8</li>
 
−
      <li>Chapter 9</li>
 
−
      <li>Chapter 10</li>
 
−
    </ul>
 
−
  </nav>
 
−
</aside>
 
  
 
<!--div class="vertical-menu">
 
<!--div class="vertical-menu">
Line 181: Line 49:
 
   <a href="#week10">Week 10</a>
 
   <a href="#week10">Week 10</a>
 
</div-->
 
</div-->
 +
 +
 +
$(function() {
 +
var $sidebar  = $("#sidebar"),
 +
$window    = $(window),
 +
offset    = $sidebar.offset(),
 +
topPadding = 15;
 +
$window.scroll(function() {
 +
if ($window.scrollTop() > offset.top) {
 +
    if (($window.scrollTop())> ($("#following").offset().top + $("#following").height() - $sidebar.height())) {
 +
        ;
 +
    } else {
 +
        $sidebar.stop().animate({
 +
            marginTop: $window.scrollTop() - offset.top + topPadding
 +
        }, 400);
 +
    }
 +
 +
} else {
 +
    $sidebar.stop().animate({
 +
        marginTop: 0
 +
    }, 400);
 +
}
 +
});
 +
});
  
  

Revision as of 08:03, 11 September 2017

<

YORK
>

Notebook

$(function() { var $sidebar = $("#sidebar"), $window = $(window), offset = $sidebar.offset(), topPadding = 15; $window.scroll(function() { if ($window.scrollTop() > offset.top) { if (($window.scrollTop())> ($("#following").offset().top + $("#following").height() - $sidebar.height())) { ; } else { $sidebar.stop().animate({ marginTop: $window.scrollTop() - offset.top + topPadding }, 400); } } else { $sidebar.stop().animate({ marginTop: 0 }, 400); } }); });

Week 1 (June 2 - June 8)

  • Wet Lab Overview

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eu vulputate dolor. Ut euismod nulla a efficitur placerat. Quisque eget nisl in eros mollis sagittis. Aliquam pretium feugiat nulla, quis aliquam lorem suscipit bibendum. Interdum et malesuada fames ac ante ipsum primis in faucibus.

  • Dry Lab Overview

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eu vulputate dolor. Ut euismod nulla a efficitur placerat. Quisque eget nisl in eros mollis sagittis. Aliquam pretium feugiat nulla, quis aliquam lorem suscipit bibendum. Interdum et malesuada fames ac ante ipsum primis in faucibus.



Week 2 (June 9 - June 15)

  • Wet Lab Overview

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eu vulputate dolor. Ut euismod nulla a efficitur placerat. Quisque eget nisl in eros mollis sagittis. Aliquam pretium feugiat nulla, quis aliquam lorem suscipit bibendum. Interdum et malesuada fames ac ante ipsum primis in faucibus.

  • Dry Lab Overview

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eu vulputate dolor. Ut euismod nulla a efficitur placerat. Quisque eget nisl in eros mollis sagittis. Aliquam pretium feugiat nulla, quis aliquam lorem suscipit bibendum. Interdum et malesuada fames ac ante ipsum primis in faucibus.