Narrowing top fixed menu with animation on scroll

index.html

header.fixed
  h1
    img#logo(src='http://www.nicenicejpg.com/200',alt="族長")
  nav
    .container
      ul#menu.nav.nav-pills.nav-justified
        li 
          a 
            img(src='http://www.nicenicejpg.com/300/160',alt="部長")
        li
          a
            img(src='http://www.nicenicejpg.com/300/160',alt="次長")
        li 
          a 
            img(src='http://www.nicenicejpg.com/300/160',alt="課長")
        li 
          a 
            img(src='http://www.nicenicejpg.com/300/160',alt="酋長")


// ----- Body -----
main.container
  h2 1. ビリーブユア鳥肌
  
  ul
    li くるしさは、忍従の夜。あきらめの朝。
    li この世とは、あきらめの努めか。わびしさの堪えか。
    li わかさ、かくて、日に虫食われゆき、仕合せも、巷の内に、見つけし、となむ。
    li わが歌、声を失い、
    li しばらく東京で無為徒食して、そのうちに、
    li 何か、歌でなく、謂わば「生活のつぶき」とでもいったようなものを、
    li ぼそぼそ書きはじめて、
    li 自分の文学のすすむべき路すこしずつ、
    li そのおのれの作品に依って知らされ、ま、こんなところかな？　と多少、自信に似たものを得て、
    li まえから腹案していた長い小説に取りかかった。
    
  h3 1.1. ビリーブユア鳥肌 

  h2 2. ビリーブユア鳥肌 
  
  p 　くるしさは、忍従の夜。あきらめの朝。
  p この世とは、あきらめの努めか。わびしさの堪えか。
  p わかさ、かくて、日に虫食われゆき、仕合せも、巷の内に、見つけし、となむ。
  p わが歌、声を失い、しばらく東京で無為徒食して、そのうちに、何か、歌でなく、謂わば「生活のつぶき」とでもいったようなものを、ぼそぼそ書きはじめて、自分の文学のすすむべき路すこしずつ、そのおのれの作品に依って知らされ、ま、こんなところかな？　と多少、自信に似たものを得て、まえから腹案していた長い小説に取りかかった。
  
  p 昨年、九月、甲州の御坂峠頂上の天下茶屋という茶店の二階を借りて、そこで少しずつ、その仕事をすめて、どうやら百枚ちかくなって、読みかえしてみても、そんなに悪い出来ではない。
  p あたらしく力を得て、とにかくこれを完成させぬうちは、東京へ帰るまい、と御坂の木枯つよい日に、勝手にひとりで約束した。
  
  h3 2.3. ビリーブユア鳥肌
  
  p ばかな約束をしたものである。
  p 九月、十月、十一月、御坂の寒気堪えがたくなった。
  p あのころは、心細夜がつづいた。どうしようかと、さんざ迷った。
  p 自分で勝手に、自分に約束して、いまさら、それを破れず、東京へ飛んで帰りたくても、何かそれは破のような気がして、峠のうえで、途方に暮れた。
  p 甲府へ降りようと思った。
  p 甲府なら、東京よりも温いほどで、この冬も大丈夫すごせると思った

  h2 3. ビリーブユア鳥肌
  
  p 鳥肌

Narrowing top fixed menu with animation on scroll.markdown

Narrowing top fixed menu with animation on scroll

More small menu on scrool

A Pen by TOBY on CodePen.

License.

script.js

(function($){
  $(document).ready(() => {
    let thresholdToReduce = 100;
    let $target = $('header');
    
    // Toggle small or not on scroll 
    $(window).on('scroll', () => {
      console.log($(window).scrollTop());
      
      let isSmall = thresholdToReduce < $(window).scrollTop();
      $target.toggleClass('small', isSmall);
    });

/*    // For debugging
    $taregetForSmaller.hover((event) => {
      $(event.currentTarget).addClass('small');
    }, (event) => {
      $(event.currentTarget).removeClass('small');
    });
*/    
  })
})(jQuery);

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

style.css

// animations
.small #logo,
.small nav .container
  transition-duration: 0.4s
  transition-property: all
  transition-timing-function: ease

#logo,
nav .container
  // For returning to a original position
  transition-duration: 0.2s

/* Smalled Size */
// Todo: support multiple devices with media query
.small #logo
  width: 100px
  
.small nav .container
  width: 60%

.small h1
  padding: 0



// --- decorations ---
main
  padding-top: 400px

#logo
  width: 200px
  height: auto

#menu li img
  width: 100%
  height: auto

.fixed
  position: fixed
  top: 0
  width: 100%

header
  background-color: #ffffe1

h1
  margin: 0
  padding: 16px 
  text-align: center

nav
  background-color: #b3c2bf
  
#menu
  background-color: #c5d5cb

.nav ul, .nav li, .nav li a
  margin: 0
  padding: 0

styles

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />