<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <title>Fixed Header</title>
    <style>
      body {
        margin: 0px;
        padding: 0px;
      }
      .Title {
        text-align: center;
      }
      .Menu {
        text-align: center;
        background-color: yellow;
        padding: 10px 0px;
        width: 100%;
      }
      .Content {
        height: 2000px;
      }
      .Fixed {
        position: fixed;
        top: 0px;
      }
    </style>
    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    <script>
      $( document ).ready( function() {
        var Offset = $( '.Menu' ).offset();
        $( window ).scroll( function() {
          if ( $( document ).scrollTop() > Offset.top ) {
            $( '.Menu' ).addClass( 'Fixed' );
          }
          else {
            $( '.Menu' ).removeClass( 'Fixed' );
          }
        });
      } );
    </script>
  </head>
  <body>
    <div class="Title">
      <h1>Site Title</h1>
    </div>
    <div class="Menu">
      <p>
        First Menu
        Second Menu
        Third Menu
        Fourth Menu
      </p>
    </div>
    <div class="Content">
    </div>
  </body>
</html>