.nav 
  .tab 
    ul
      li Home
      li About
      li Blog
  
.main
  .day
  .night
  .sun
  .moon
    img(src='https://upload.wikimedia.org/wikipedia/commons/thumb/c/c0/Moon_0063_Nevit.svg/1000px-Moon_0063_Nevit.svg.png' width='100px')
  .mountain1
  .mountain2
  .mountain3
  .mountain4
  

  
.footer
View Compiled
*
  margin: 0px
  font-family: 'Century Gothic'
html
  height: 1500px
  overflow-y: scroll
  
.tab
  position: fixed
  height: 50px
  line-height: 50px
  width: 240px
  background: rgba(255,193,37,1)
  margin-left: 10%
  word-spacing: 10px
  box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.3)
  border-top: 2px solid black
  z-index: 999
   
.tab li
  margin: auto
  text-align: center
  font-weight: bold
  text-shadow: 2px 2px 3px rgba(0,0,0,0.3)
  list-style-type: none
  display: inline-block
  transition: all 200ms ease-in-out
  cursor: pointer
  &:hover
    color: white

.day
  position: fixed
  width: 100%
  height: 100%
  background-image: url('http://www.publicdomainpictures.net/pictures/70000/velka/blue-sky-with-cloud-1385838696m6D.jpg')
  background-size: cover
  //background: linear-gradient(#195B99,#2B99FF,#7FC1FF,#E9F4FF)
  z-index: 0
  
.night
  position: fixed
  width: 100%
  height: 100%
  background-image: url('https://upload.wikimedia.org/wikipedia/commons/0/09/Night_stars_berlin.png')
  background-size: cover
  z-index: 0
  opacity: 0
  transition: all 1s ease-in-out
.night.time
  opacity: 1
  
.sun
  position: absolute
  width: 100px
  height: 100px
  background: #fbf8b2
  box-shadow: 0px 5px 20px rgba(255,255,255,1)
  border-radius: 50px
  top: -50px
  left: 80%
 
.moon
  position: fixed
  top: 800px
  left: 80%
 
.mountain1
  position: fixed
  bottom: 0px
  width: 400px
  height: 200px
  background: linear-gradient(#3D2237,#754D6C)
  -webkit-clip-path: polygon(45px 0, 11% 0, 100% 100%, -50% 100%)
  
.mountain2
  position: fixed
  bottom: 0px
  left: 200px
  width: 800px
  height: 300px
  background: linear-gradient(#3D2237,#663A5C)
  -webkit-clip-path: polygon(50% 0, 0 100%, 100% 100%, 50% 0)
  
.mountain3
  position: fixed
  bottom: 0px
  left: 600px
  width: 800px
  height: 250px
  background: linear-gradient(#281724,#512E49)
  -webkit-clip-path: polygon(50% 0, 0 100%, 100% 100%, 50% 0) 
  
.mountain4
  position: fixed
  bottom: 0px
  left: 1200px
  width: 800px
  height: 200px
  background: linear-gradient(#3D2237,#663A5C)
  -webkit-clip-path: polygon(50% 0, 0 100%, 100% 100%, 50% 0)

.window
  position: fixed
  height: 80%
  width: 80%
  background: rgba(0,0,0,0.7)
  margin-top: 5%
  margin-left: 10%
  z-index: 998
  font-size: 1.5em
  overflow-y: scroll
  color: white
  line-height: 1.7em
  padding: 15px
  
h1,p
  margin: 25px
  padding: 10px
  
div::-webkit-scrollbar
  width: 8px
div::-webkit-scrollbar-track
  background: black
div::-webkit-scrollbar-thumb
  height: 50%
  background: rgba(255,193,37,1)
  border-radius: 5px
  
  
View Compiled
$(window).scroll(function(){

  var wScroll = $(this).scrollTop();

  $('.sun').css({
    'transform' : 'translate(0px, '+ wScroll *3 +'%)'
  })
});
$(window).scroll(function(){
  $(".moon").css("top",Math.max(0,800-  $(this).scrollTop()));
  
});
$(window).scroll(function() {
// 100 = The point you would like to fade the nav in.
  
	if ($(window).scrollTop() > 200 ){
    
 		$('.night').addClass('time');
    
  } else {
    
    $('.night').removeClass('time');
    
 	};   	
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js