Untitled

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta http-equiv="Content-Style-Type" content="text/css">
  <title></title>
  <link rel="stylesheet" type="text/css" href="./fullPage/jquery.fullPage.css" />
  <script src="./jquery/1.11.1/jquery.min.js"></script>
  <script type="text/javascript" src="./fullPage/jquery.fullPage.js"></script>
  <style type="text/css">
        body, h1
        { margin: 0; }

        #menu.fixed
        { position: fixed; top: 0; left: 0; }

        #menu, #menuplaceholder
        {height:100px;}

        #menu a.active{color:red}

        #pageTitle { height: 100px;}
  </style>
</head>
<body>
    <div id="fullpage">
        <section data-anchor="section1" class="section" class="fixed">
            <h1 id="pageTitle">TAEA</h1>
            <div id="menu">
                <a data-menuanchor="section1" href="#section1">page 1</a>
                <a data-menuanchor="section2" href="#section2">page 2</a>
                <a data-menuanchor="section3" href="#section3">page 3</a>
                <a data-menuanchor="section4" href="#section4">page 4</a>
            </div
            <p>jkl</p>
        </section>
        <section data-anchor="section2" class="section">
            <h2>title</h2>
            <p>A</p>
            <p>B</p>
            <p>C</p>
            <p>D</p>
            <p>E</p>
            <p>F</p>
            <p>G</p>
            <p>H</p>
            <p>I</p>
            <p>J</p>
            <p>K</p>
            <p>L</p>
            <p>M</p>
            <p>N</p>
            <p>O</p>
            <p>P</p>
            <p>Q</p>
            <p>R</p>
            <p>S</p>
            <p>T</p>
            <p>U</p>
            <p>V</p>
            <p>W</p>
            <p>X</p>
            <p>Y</p>
            <p>Z</p>
            <p>A</p>
            <p>B</p>
            <p>C</p>
            <p>D</p>
            <p>E</p>
            <p>F</p>
            <p>G</p>
            <p>H</p>
            <p>I</p>
            <p>J</p>
            <p>K</p>
            <p>L</p>
            <p>M</p>
            <p>N</p>
            <p>O</p>
            <p>P</p>
            <p>Q</p>
            <p>R</p>
            <p>S</p>
            <p>T</p>
            <p>U</p>
            <p>V</p>
            <p>W</p>
            <p>X</p>
            <p>Y</p>
            <p>Z</p>
        </section>
        <section data-anchor="section3" class="section">
            <h2>title</h2>
            <p>content</p>
        </section>
        <section data-anchor="section4" class="section">
            <h2>title</h2>
            <p>content</p>
        </section>
    </div>

    <script type="text/javascript">
        $(document).ready(function() {
            $('#fullpage').fullpage({
                sectionsColor: ['#f2f2f2', '#4BBFC3', '#7BAABE', 'whitesmoke'],
                                    anchors:['section1','section2','section3','section4'],
                                    //verticalCentered: false,
                                    autoScrolling:false,
                                    menu:'#menu'
                                    });
            reset_scroll();
        });
        function onScroll() {
            var title_bottom = $('#pageTitle').offset().top + $('#pageTitle').outerHeight();
            var target_fixed = $(window).scrollTop() >= title_bottom;
            var is_fixed = $('#menu').parent()[0] == document.body && $('#menu').hasClass('fixed');

            if ( target_fixed && !is_fixed )
            {
                console.log('change to fix');
                $('body').append($('#menu'));
                $('#pageTitle').after("<div id='menuplaceholder'>&nbsp;</div>");
                $('#menu').addClass('fixed');
            }
            else if ( !target_fixed && is_fixed )
            {
                console.log( 'change to normal');
                $('#menuplaceholder').detach();
                $('#pageTitle').after($('#menu'));
                $('#menu').removeClass('fixed');
            }
            else console.log('do nothing');
        }
        function reset_scroll()
        {
            $('#menuplaceholder').detach();
            $('#pageTitle').after($('#menu'));
            $('#menu').removeClass('fixed');
            onScroll();
        }
        $(window).on('scroll', onScroll);
    </script>
</body>
</html>