header
#header-scroll.small
h1
a(href='#') TITLE
nav
ul
li
a(href='#1') First
li
a(href='#2') Second
li
a(href='#3') Third
li
a(href='#4') Fourth
li
a(href='#5') Fifth
section#1
h1 First
section#2
h1 Second
section#3
h1 Third
section#4
h1 Fourth
section#5
h1 Fifth
View Compiled
@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
View Compiled
//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');
}
});
});
This Pen doesn't use any external CSS resources.