Nav在滾動上調整大小

我對此很新，我試圖讓我的導航欄縮小一次滾動 - 這將是一個加號，如果它是粘性的，並且可以在滾動過某個點時拾取車身標題徽標，但沒有必要。Nav在滾動上調整大小

問題是我已經嘗試了幾個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); 
     }

來源

2014-05-25 Smcner12

你想要一個粘滯的導航欄，或者調整大小的導航欄通過某個點，或兩者？ – Blunderfest

我實際上是在尋找兩者 - 導航欄會調整大小，然後在內部div中選取徽標，調整大小並在滾動時向左浮動 – Smcner12

使用jQuery。

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

我編輯了你的代碼。查看這個：jsfiddle

但需要一點改變，但我沒有機會！

來源

2014-05-25 14:31:24 mghhgm

爲什麼在jQuery中使用'document.getElementById'？ – MisterBla

@RichardA我認爲jQuery需要'scrollTop（）' – mghhgm

'$（'＃topp'）。addClass（'resizeing'）'？ – MisterBla

我不知道究竟是如何做到這一點，因爲你不分享所有的代碼，但基本的思路是這樣的：

<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變量，所以它不會嘗試同時最大化和最小化標題。

來源

2014-05-25 14:46:05 Scelesto

Nav在滾動上調整大小

回答

相關問題