Dovetec.org

dovetec-org.markdown

Dovetec.org

A Pen by Dovineowuor on CodePen.

License.

index.html

<header>
  <div class="small" id="header-scroll">
    <h1><a href="#">DOVETEC.ORG</a></h1>
    <nav>
      <ul>
        <li><a href="#1">Home</a></li>
        <li><a href="#2">Portfolio</a></li>
        <li><a href="#3">Products </a></li>
        <li><a href="#4">Services</a></li>
        <li><a href="#5">About Us</a></li>
        <li><a href="#5">Our Articles</a>
        <li><a href="#5">Contact Us</a></li>
        </li>
      </ul>
    </nav>
  </div>
</header>
<section id="1">
  <h1>Home</h1>
</section>
<section id="2">
  <h1>Portfolio</h1>
</section>
<section id="3">
  <h1>Products</h1>
</section>
<section id="4">
  <h1>Services </h1>
</section>
<section id="5">
  <h1>About Us</h1>
</section>

<section id="5">
  <h1>Our Articles</h1>
</section>

<section id="5">
  <h1>Contact Us</h1>
</section>

script.js

//in case js in turned off
   $(window).on('load', function () {
        $("#header-scroll").removeClass("small")
  });

$(window).scroll(function () {
     var sc = $(window).scrollTop()
    if (sc > 1) {
        $("#header-scroll").addClass("small")
    } else {
        $("#header-scroll").removeClass("small")
    }
});

//scrollspy
$(window).on('scroll', function () {
   var sections = $('section')
    , nav = $('nav')
    , nav_height = nav.outerHeight()
    , cur_pos = $(this).scrollTop();
  sections.each(function() {
    var top = $(this).offset().top - nav_height,
        bottom = top + $(this).outerHeight();
 
    if (cur_pos >= top && cur_pos <= bottom) {
      nav.find('a').removeClass('active');
      sections.removeClass('active');
 
      $(this).addClass('active');
      nav.find('a[href="#'+$(this).attr('id')+'"]').addClass('active');
    }
  });
});

style.css

@import url(https://fonts.googleapis.com/css?family=Bitter);

 *
    margin 0
    padding 0
    box-sizing border-box
    font-family bitter
html,body
  height 100%
  min-height 100%
a
  text-decoration none
  color white
  &.active
    border-bottom 2px solid #85C2FF

.header
  height auto

#header-scroll
  position fixed
  height 100%
  background rgba(0,0,0,.4)
  left 0
  top 0
  float left
  width 100%
  -ms-transition all 0.3s ease-out
  -moz-transition all 0.3s ease-out
  -webkit-transition all 0.3s ease-out
  -o-transition all 0.3s ease-out
  transition all 0.3s ease-out
  h1
    padding 200px 0
    height 100%
    font-size: 4em
    text-align center
    line-height 40px
    -ms-transition all 0.3s ease-out
    -moz-transition all 0.3s ease-out
    -webkit-transition all 0.3s ease-out
    -o-transition all 0.3s ease-out
    transition all 0.3s ease-out
  &.small
    height auto
    display inline-block
    float left
    h1
      padding 10px 0
      height auto
      font-size 1rem
      text-decoration none
      font-weight bold
      display inline-block

body
  font-family 'Open Sans', sans-serif

nav
  width 100%
  height 60px
  position fixed
  top 0
  ul
    padding 20px
    margin 0 auto
    list-style none
    text-align center
    li
      display inline-block
      margin 0 10px
      a
        padding 10px 0
        color #fff
        font-size 1rem
        text-decoration none
        font-weight bold
        transition all 0.2s ease
        &:hover
          color #85C2FF

h1
  font-size 5rem
  color #34495E

section
  width 100%
  height 100%
  padding 200px 0
  background #fff
  border-bottom 1px solid #ccc
  text-align center
  &:nth-child(even)
    background #ecf0f1
  &:nth-child(odd)
    background #eff9ff

.sections
  section
    &:first-child
      margin-top 100px