LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code


Hero Section!

Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.

Content Section!

A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life.

Footer area

CSS
body {
  padding-top: 150px;
}

#global-nav {
  position: fixed;
  top: 0;
  z-index: 9999;
  height: 150px;
  width: 100%;
  background: #324c5f;
  color: #fff;
  line-height: 150px;
    -webkit-transition: height .5s, line-height .5s; /* Safari */
    transition: height .5s, line-height .5s;
}

.site-title {
  display: inline-block;
  -webkit-transition: all .5s;
    transition: all .5s;
}

.scrolled-nav .site-title  {
  font-size: 16px;
}

.nav-list {
  list-style: none;
}

.nav-list li {
  list-style: none;
  display: inline-block;
  padding-left: 20px;
}

.hero-section,
.content-section {
  height: 500px;
  padding: 100px;
}

.hero-text,
.content-text {
  max-width: 550px;
}

.hero-section h1 {
  color: #333;
}

.hero-section p {
  color: #333;
}

.content-section {
  background: aqua;
}

.scrolled-nav {
  height: 60px !important;
  line-height: 60px !important;
}

.counter {
  width: 20px;
  height: 20px;
  background: black;
  color: #fff;
  position: fixed;
  top: 120px;
  right: 0;
}

footer {
  height: 200px;
  background: #333;
  color: #fff;
  padding-top: 40px;
}
JS
$(document).ready(function(){
  var scrollTop = 0;
  $(window).scroll(function(){
    scrollTop = $(window).scrollTop();
     $('.counter').html(scrollTop);
    
    if (scrollTop >= 100) {
      $('#global-nav').addClass('scrolled-nav');
    } else if (scrollTop < 100) {
      $('#global-nav').removeClass('scrolled-nav');
    } 
    
  }); 
  
});
Host Instantly Drag and Drop Website Builder

 

Description

Shrink the size of the navigation bar after the user scrolls down the page. Makes use of CSS animation properties to animate the resize.
Term
Mon, 11/27/2017 - 21:37

Related Codes

Pen ID
Pen ID
Pen ID