Навигация по прокрутке

Question

Навигация по прокрутке

0

Я новичок в этом, и я стараюсь, чтобы мой навигатор сжимался после прокрутки - это было бы плюсом, если бы оно было липким и могло подхватить логотип заголовка тела, когда он прокручивается мимо определенного момента, но это не обязательно.

Проблема в том, что я пробовал несколько методов jquery script; некоторые из них полностью изменили размер внутреннего 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 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);
        }

Smcner12 25 май 2014, в 16:18

Источник

0

Хотите ли вы использовать липкую панель навигации, или панель навигации с измененным размером, пройденную определенную точку, или обе?
Blunderfest 25 май 2014, в 14:12
0

Я на самом деле искал и то и другое - навигационная панель изменяла размеры, а затем подбирала логотип во внутреннем div, изменяла размеры и перемещалась влево при прокрутке.
Smcner12 27 май 2014, в 13:17

Теги:

jquery

html

css

2 ответа

Ещё вопросы

Хотите ли вы использовать липкую панель навигации, или панель навигации с измененным размером, пройденную определенную точку, или обе?
Я на самом деле искал и то и другое - навигационная панель изменяла размеры, а затем подбирала логотип во внутреннем div, изменяла размеры и перемещалась влево при прокрутке.

mghhgm · Answer 1 · 2014-05-25T13-20-00.000Z

используйте jQuery.

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

Я редактировал ваш код. посмотреть это: jsfiddle

Но нужно немного изменить, но у меня нет возможности!

Зачем использовать document.getElementById с jQuery?
@RichardA Я думаю, что jQuery нужно scrollTop()
Это сработало отлично, спасибо! Возможно, мне придется добавить некоторые отступы, так как логотип плавает внизу, но он определенно хорошо работает во всех браузерах
Извините - что такое jquery, чтобы скрыть навигационную панель вообще в мобильной среде?
@ Smcner12 Я думаю, что $('#id').hide(); или $('#id').fadeOut();

Scelesto · Answer 2 · 2014-05-25T12-49-00.000Z

Я точно не знаю, как это сделать, потому что вы не разделяете весь свой код, но основная идея такова:

<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 поэтому она не будет пытаться максимизировать и минимизировать заголовок одновременно.