jquery スティッキーバーの実装について

Question

前提・実現したいこと

jqueryをつかってスティッキーメニューバーを実装したいのですが、うまくいきません。
上から順に
header
navbar
section
section
section
footer
という構成で、navbarより下に下がったときに画面上部にバーを固定したいです。
cssのposition: stickyもためしましたが、そもそも用途が違っていた為、jqueryでの実装を決めました。

スティッキーバーにしたい.navbarのhtml

<section  id="navbar">
      <ul class="globalnav">
        <li><a href="#">TOP</a></li>
        <li><a href="#about">ABOUT</a></li>
        <li><a href="#">SKILLS</a></li>
        <li><a href="#">WORKS</a></li>
        <li><a href="#">CONTACT</a></li>
      </ul>
    </section>

.navbarに適用しているcss

#navbar {
	position: absolute;
}
.globalnav {
	display: table;
	table-layout: fixed;
	margin: 0 auto;
	background-color: #8b0000;
	padding: 0;
	width: 100%;
	text-align: center;
}
.globalnav li {
	display: table-cell;
	min-width: 50px;
}
.globalnav a {
	width: 100%;
	font-size: 2.0rem;
	display: block;
  padding: 20px;
	text-decoration: none;
	color: #228b22;
	border-right: 5px solid #aa0000;
}
a:visited {
	color: #228b22;
}
.globalnav li a:hover{
	color: #adff2f;
	border-bottom: 3px solid #adff2f;
	transition: .4s;
	background-color: #aa0000
}
.sticky {
  position: fixed;
  top: 0;

実現するためのjQuery

$(function () {
      var nav = $('.navbar'),
      offset = nav.offset();
      $(window).scroll(function () {
        if($(window).scrollTop() > offset.top) {
          nav.addClass('sticky');
        } else {
          nav.removeClass('sticky');
        }
      });
    });

Comments

[yambejp]

どういった結果を想定しているかわかりません

[SpaceRange]

ありがとうございます。修正いたしました。

Answer 1

とりあえず問題と思われる部分を。。。

■　javascript

navbar　はidですが、jsで取得しようとしているnavにはクラス指定のものを入れているため、正しく取得できていないと思うので、ID指定が良いと思います。

var nav = $('.navbar'),
　　　　　　　↓
var nav = $('#navbar'),

■　CSS

スクロールした時に

<section id="navbar" class="sticky">中身は省略</section>

としたいのだと思いますが、.stickyのスタイル指定の方が優先度が低いので、クラスを追加しても見た目が変わらないと思います。

なので、.stickyのスタイルを「絶対優先」にしておくか、

.sticky {
  position: fixed !important;
  top: 0 !important;
}

あるいは、#navbarのクラスとして指定するか、

#navbar.sticky {
  position: fixed;
  top: 0;
}

のどちらかの対応が必要かと思います。

提示のHTMLとcssは一部分だけだと思いますので、
上記2点を直すだけでSpaceRangeさんの望む形になるかは分かりませんが、解決の糸口にでもなれば。。^^