2016-11-30 29 views
0

我有一個標題,當我向下滾動頁面時,標題應該縮小,並且菜單應該保持原樣。如何使我的菜單保持使用滾動功能?

當我向下滾動頁面時,我的菜單不會保留。我如何讓菜單保持不變?

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! 

回答

0

添加position:fixed;header類,它可以讓你的菜單停留在相同的位置。希望有所幫助。

0

爲了讓您的菜單留在其位置滾動時,您只需要使用CSS position: fixed

觀看演示: https://jsfiddle.net/1vfLub67/2/

而且你應該總是縮進代碼就像我在演示做。這樣人們很容易找到問題並調整代碼。

+0

沒關係,祝你工作順利! – Konekoya

相關問題