LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

CSS
body {
  background: url(https://4.bp.blogspot.com/-LQV4NPu9kd4/UPItmruV0tI/AAAAAAAAUec/JyAylV7pnJ0/s1600/san+diego+-+sunset+-+sunset+sunday.JPG);
  height: 1000px;
}

header {
  font-family: sans-serif;
  position: fixed;
  width: 100%;
  height: 150px;
  top: 0;
  left: 0;
  background-color: rgba(22, 22, 22, 0.4);
  border-bottom: 3px solid rgba(0, 0, 0, 0.4);
  -webkit-transition: height 0.3s;
}
header .container {
  width: 90%;
  margin: 0 auto;
}
header h1 {
  margin-top: 0;
}
header h1, header nav {
  display: inline-block;
  position: relative;
  line-height: 150px;
  -webkit-transition: all 0.3s;
}
header a {
  text-decoration: none;
  color: #ccc;
}
header nav {
  float: right;
  line-height: 150px;
  font-size: 1.4em;
}
header nav a {
  margin-left: 10px;
}
header nav a:hover {
  border-top: 2px dotted white;
  border-bottom: 2px dotted white;
}

header.minimized {
  height: 60px;
}
header.minimized h1, header.minimized nav {
  line-height: 60px;
}
header.minimized nav {
  font-size: 1.2em;
}
header.minimized h1 {
  font-size: 1.7em;
}

.container {
  height: 2000px;
}
JS
/* 
  Description: Animates the header upon scroll
  
*/

$(function(){
  var header = $("header"),
      yOffset = 0,
      triggerPoint = 150;
  $(window).scroll(function(){
    yOffset = $(window).scrollTop();
    
    if(yOffset >= triggerPoint){
      header.addClass("minimized");
    }else{
      header.removeClass("minimized");
    }
    
  });
});
Host Instantly Drag and Drop Website Builder

 

Description

Simple header that animates and minimizes when the user scrolls down the a defined number of pixels. Inspired by: http://is.gd/uu1RLo
Term
Mon, 11/27/2017 - 21:56

Related Codes

Pen ID
Pen ID
Pen ID