Bottom menu only initial position

Bottom menu only initial position.markdown

Bottom menu only initial position

A Pen by TOBY on CodePen.

License.

index.html

header
  .view
    #logo 
      h1 面長
  
  nav
    ul#menu.nav.nav-pills.nav-justified
      li 
        a 部長
      li
        a 課長
      li 
        a 所長
      li 
        a 次長

.container
  h2 1. ビリーブユア鳥肌
  p foo bar
  p foo bar

  h3 1.1. ビリーブユア鳥肌 
  p foo bar
  p foo bar

  h2 2. ビリーブユア鳥肌
  p foo bar
  p foo bar

  p foo bar
  p foo bar
  
  h3 2.1. ビリーブユア鳥肌 
  .row
    .col-xs-6
      ビリーブ
    .col-xs-6
      ユア
    .col-xs-6
      ビリーブ
    .col-xs-6
      鳥肌

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

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

script.js

(function($){
  $(document).ready(() => {
    let $menu = $("#menu");
    let originalOffset = $menu.offset().top;
    
    // Fix navigation menu on scroll 
    $(window).on("scroll", () => {
      console.log($(window).scrollTop());
      console.log(originalOffset);
      
      if (originalOffset < $(window).scrollTop()){
        $menu.addClass("fixed");
      } else {
        $menu.removeClass("fixed");
      }
    });
    
  })
})(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

html,body,.view
  height: 100%
  
header
  position: relative
  width: 100%
  height: 100%

.view
  position: relative
  height: 100%
  background-color: #e3e0cf
  
nav
  position: relative
  margin-top: -60px
  height: 60px
  background-color: #b3c2bf
  
#menu
  background-color: #c5d5cb
  padding: 10px 0
  
.fixed
  position: fixed
  top: 0
  
#logo
  position: absolute
  top: 50%
  left: 50%
  width: 140px
  height: 140px
  margin-left: -70px
  margin-top: -70px
  background: #9fa8a3

  
// --- decorations ---
header
  background-color: #ffffff

#logo
  text-align: center

styles

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