Question

我对此非常陌生，我试图让我的导航栏在滚动时收缩 - 如果它是粘性的并且在滚动超过某个点时可以拾取身体标题徽标将是一个加号，但没有必要。

问题在于我尝试了几种jquery脚本方法;有些已完全调整了内部div的大小，其中包含徽标和介绍文本，这应该是整页（单页导航）。无论如何，没有一个脚本实际调整了导航栏的大小。

我希望有人可以提供帮助。

<body class="homepage">
    <!-- Header -->
        <div class id="header">

            <!-- Inner -->
                <div class="inner">
                    <header>
                        <h1><a href="#" id="logo"><img src="../../Desktop/YourCare-White.png"></a></h1>
                        <hr />
                        <span class="byline">Take Back Your Health.</span>
                    </header>
                    <footer>
                        <a href="#banner" class="button circled scrolly">it's time</a>
                    </footer>
                </div>

            <!-- Nav -->
          <header class="navheader">
            <div class="nav-container">
                <p class="logo">
                <a href="index.html"><img src="../YourCare-White-Logo.png"></a>
              </p>
                <nav id="nav">
                    <ul>
                        <li>
                            <span>Dropdown</span>
                            <ul>
                                <li><a href="#">Lorem ipsum dolor</a></li>
                                <li><a href="#">Magna phasellus</a></li>
                                <li><a href="#">Etiam dolore nisl</a></li>
                                <li>
                                    <span>And a submenu &hellip;</span>
                                    <ul>
                                        <li><a href="#">Lorem ipsum dolor</a></li>
                                        <li><a href="#">Phasellus consequat</a></li>
                                        <li><a href="#">Magna phasellus</a></li>
                                        <li><a href="#">Etiam dolore nisl</a></li>
                                    </ul>
                                </li>
                                <li><a href="#">Veroeros feugiat</a></li>
                            </ul>
                        </li>
                        <li><a href="left-sidebar.html">Left Sidebar</a></li>
                        <li><a href="right-sidebar.html">Right Sidebar</a></li>
                        <li><a href="http://yourcare.me/join"></a>+ the Movement</li>
                    </ul>
                </nav>
            </div>
          </header>
        </div>

    #header
{
    position: relative;
    background-image: url('../images/header.jpg');
    background-size: cover;
    background-position: center center;
    background-attachment: fixed;
    color: #fff;
    text-align: center;
    padding: 2.5em 0 2em 0;
    cursor: default;
}

    .homepage #header
    {
        padding: 4em 0 4em 0;
    }

        .homepage #header .overlay
        {
            content: '';
            background: #1C0920;
            display: block;
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            opacity: 1.0;
            -moz-transition: opacity 2s ease-in-out;
            -webkit-transition: opacity 2s ease-in-out;
            -o-transition: opacity 2s ease-in-out;
            -ms-transition: opacity 2s ease-in-out;
            transition: opacity 2s ease-in-out;
        }

        .homepage #header.ready .overlay
        {
            opacity: 0;
        }

    #header .inner
    {
        position: relative;
        z-index: 1;
        margin: 0;
        padding: 4em 0 0 0;
    }

    #header h1
    {
        color: #fff;
        font-size: 3em;
        line-height: 1em;
    }

        .homepage #header h1
        {
            font-size: 4em;
        }

        #header h1 a
        {
            color: inherit;
        }

    #header .byline
    {
        font-size: 1.25em;
        margin: 0;
    }

    #header .button
    {
        border-radius: 100%;
        width: 4.5em;
        height: 4.5em;
        line-height: 4.5em;
        text-align: center;
        font-size: 1.25em;
        padding: 0;
        border: 1px solid #fff;
    }

    #header .button:hover{
        border:3px solid #35bdb2;
        -moz-transition: opacity 2s ease-in-out;
        -webkit-transition: opacity 2s ease-in-out;
        -o-transition: opacity 2s ease-in-out;
        -ms-transition: opacity 2s ease-in-out;
        transition: opacity 2s ease-in-out;
    }

    #header header
    {
        display: inline-block;
    }

    #header footer
    {
        margin: 1em 0 0 0;
    }

    #header hr
    {
        top: 1.5em;
        margin-bottom: 3em;

        border-bottom-color: rgba(192,192,192,0.35);
        box-shadow: inset 0 1px 0 0 rgba(192,192,192,0.35);
    }

        #header hr:before,
        #header hr:after
        {
            background: rgba(192,192,192,0.35);
        }

/*********************************************************************************/
/* Nav                                                                           */
/*********************************************************************************/
.navheader{
    background:#35bdb2;
    opacity: 0.7;
    padding:20px 0;
    position:fixed;
    left:0;
    top:0;
    width:100%;
    transition: all 350ms ease;
    display:block;
    box-sizing:border-box;
    z-index:20;
    border-bottom: 2px solid #fff;
}

.nav-container{
    padding-bottom: 40px;
    transition: all 350ms ease;
    position: relative;
    width:88%;
    max-width: 960px;
    margin: 0 auto;
    display:block;
    clear:both;
    padding:0;
    border: 0;
    font-size:100%;
    font:inherit;
    vertical-align:baseline;
    box-sizing:border-box;
    display:block;
}
.nav-container:before{
    content:"";
    display: table;
}

.logo{
    float:left;
    display:block;
    vertical-align: baseline;
    margin:0;
    padding:0;
    border:0;
    box-sizing:border-box;
}

#nav{
    display:block;
    float: right;
}

    #nav > ul
    {
        line-height: 0px;
        border-left: solid 1px rgba(192,192,192,0.35);
        border-right: solid 1px rgba(192,192,192,0.35);
    }

#nav > ul > li{
    display: inline-block;
    margin: 20px 0.5em 0 20px;
    border-radius: 0.5em;
    border: solid 1px transparent;
    -moz-transition: color 0.35s ease-in-out, border-color 0.35s ease-in-out;
    -webkit-transition: color 0.35s ease-in-out, border-color 0.35s ease-in-out;
    -o-transition: color 0.35s ease-in-out, border-color 0.35s ease-in-out;
    -ms-transition: color 0.35s ease-in-out, border-color 0.35s ease-in-out;
    transition: color 0.35s ease-in-out, border-color 0.35s ease-in-out;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

            #nav > ul > li.active
            {
                border-color: rgba(192,192,192,0.35);
            }

            #nav > ul > li > a,
            #nav > ul > li > span
            {
                display: block;
                color: inherit;
                text-decoration: none;
                border: 0;
                outline: 0;
            }

            #nav > ul > li > ul
            {
                display: none;
            }

.dropotron
{
    background: rgba(255,255,255,0.975);
    padding: 1em 1.25em 1em 1.25em;
    line-height: 1em;
    height: auto;
    text-align: left;
    border-radius: 0.5em;
    box-shadow: 0 0.15em 0.25em 0 rgba(0,0,0,0.25);
    min-width: 12em;
}

    .dropotron li
    {
        border-top: solid 1px rgba(128,128,128,0.2);
        color: #5b5b5b;
    }

        .dropotron li:first-child
        {
            border-top: 0;
        }

        .dropotron li:hover
        {
            color: #ef8376;
        }

        .dropotron li a,
        .dropotron li span
        {
            display: block;
            border: 0;
            padding: 0.5em 0 0.5em 0;
            -moz-transition: color 0.35s ease-in-out;
            -webkit-transition: color 0.35s ease-in-out;
            -o-transition: color 0.35s ease-in-out;
            -ms-transition: color 0.35s ease-in-out;
            transition: color 0.35s ease-in-out;
        }

    .dropotron.level-0
    {
        margin-top: 2em;
        font-size: 0.9em;
    }

        .dropotron.level-0:before
        {
            content: '';
            position: absolute;
            left: 50%;
            top: -0.7em;
            margin-left: -0.75em;
            border-bottom: solid 0.75em rgba(255,255,255,0.975);
            border-left: solid 0.75em rgba(64,64,64,0);
            border-right: solid 0.75em rgba(64,64,64,0);
        }

Answer 1

使用jQuery。

$(document).ready(function() {
    $(window).scroll(function() {
        if($(window).scrollTop() > 7)
        {
         document.getElementById("topp").className += " resizeing";
        }
        else
        {
            document.getElementById("topp").className = "navheader";
        }
    });
});

我编辑了你的代码。查看：jsfiddle

但是需要一些改变，但我没有机会！

Answer 2

我不确定如何做到这一点，因为你不能分享你的所有代码，但基本的想法是：

<head>
<script src="code.jquery.com/jquery.min.js"></script>
<style> ... </style>
<script>
//approximate, edit to your specification
pos=up
$("#content").scroll(function(){
     if($(this).scrollTop() > 5 /*or some comparably small number*/ && pos == up) {
          $("#old").fadeOut(100,function() {
               $("#new").fadeIn(100)
               pos=down
          });
          $("#header").animate({
               //new css
          },100);
     } else if ($(this).scrollTop() < 5 && pos == down) {
          $("#new").fadeOut(100,function() {
               $("#old").fadeIn(100)
               pos=up
          });
          $("#header").animate({
               //old css
          },100);
     }
});
</script>
</head>
<body class="homepage">
<div id="header">
     <div id="old"> ... </div> <!--The bigger header-->
     <div id="new" style="display:none;"> ... </div> <!--What you want on scroll-->
</div>
<div id="content"> ... </div>
</body>

我使用pos变量，因此它不会尝试同时最大化和最小化标题。

导航在滚动时调整大小

2 个答案: