javascript - 如何让我的菜单保持使用滚动功能？

Question

我有一个标题，当我向下滚动页面时，标题应该缩小，而菜单应该保持原样。

当我向下滚动页面时，我的菜单不会停留。如何让菜单保持不变？

Here is my jsfiddle:


https://jsfiddle.net/1vfLub67/1/

    <style>
    header{
        text-align: center;
        font-size: 72px;
        line-height: 165px;
        height: 165px;
        background: #FFF380;
        color: #fff;



        -webkit-transition: all 0.4s ease;
        transition: all 0.4s ease;
    }
       header #check1
      {
      display:none;
      visibility: hidden;

    }
    #headerdog
    {
     font-family: 'Baskerville Old Face';
    }

    header.sticky {
        position: fixed;
        font-size: 24px;
        line-height: 48px;
        height: 80px; 
        width: 100%;
        background: #FFA625;
        text-align: left;
        padding-left: 20px;



    }
    header.sticky #check1
    {
        visibility:visible;
        display:normal;

    }
    header.sticky #headerdog{
        display:none;
    }


</style>

 <header><h1 id="headerdog">

        </h1></header>


        <div class="sixteen columns" id="check1">

            <ul class="menu"> 

                <li><a href="#">Home</a></li>
                <li><a href="#">Room Featured</a></li>

                <li>
                    <a href="#">Members</a>

                    <ul style="z-index:1">
                        <li><a href="#" class="documents">Register</a></li>
                        <li><a href="#" class="messages">Feedback</a></li>
                        <li><a href="#" class="messages">Statistics</a></li>
                    </ul>

                </li>
                <li><a href="#">Deco Ideas</a></li>
                <li><a href="#">Shopping</a></li>
                <li><a href="#">Contact Us</a></li>

            </ul>

        </div>



    <img src="large-image.jpg" width="782" height="2000" alt="Big Image" /> 

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>


    <script>
        $(window).scroll(function () {
            if ($(this).scrollTop() > 1) {
                $('header').addClass("sticky");
            }
            else {
                $('header').removeClass("sticky");
            }
        });
    </script>

Please advise thank you!

Answer 1

将 position:fixed; 添加到您的 header 类，它可以让您的菜单保持在相同的位置。希望对您有所帮助。