如何创建词缀或粘性导航栏？

要创建词缀或粘性导航栏，您需要使用 HTML、CSS 和 JavaScript。 HTML 将使正文的结构，CSS 将使它看起来不错。这种粘性导航栏在网站上看起来很有吸引力。通过使用 JavaScript，您可以轻松地使导航栏在用户向下滚动时具有粘性。

创建结构：在本节中，我们将为粘性导航栏创建一个基本的网站结构，当用户向下滚动页面时，它将显示效果。

• 用于制作结构的 HTML 代码：

  
  
    
  
      
        
      
            
          
      
  
    
  
      
  
          
      
    
      
  
          GeeksforGeeks
          Contact us
          Careers
          Our Product
          About us
          Home
      
    
      
  
            
          BLACK FRIDAY
            
          
  
              Want to get huge discounts on GeeksforGeeks
              Courses? This Black Friday, we are bringing
              the shopping festival to you!!! GeeksforGeeks
              is celebrating Black Friday on 29th November
              2019 by providing you huge discounts on all
              its courses for the entire day! This will be
              a great opportunity for you to learn and
              enhance your skills. And that’s not all we
              are offering!
          
            
          
  
              There will also be Flash Sales that will go
              live for a particular duration of time where
              you can expect heavy discounts over a few 
              courses in addition to the existing discounts.
              These Flash Sales will go live for 4 times
              during the entire day with different courses
              in each flash sale. Want to know more about
              Black Friday? Read on to find out!
          
            
          
  
              Black Friday is the Friday immediately after
              Thanksgiving in the United States, which is
              on 29th November this time. This Black Friday
              Sale is intended to provide you with the best
              courses along with great deals where the
              investment of your time and money will surely
              pay off. So Grab this opportunity, Grab the
              deals and celebrate this Black Friday in the
              most amazing way possible!!!
          
    
          
              
  Black Friday Sale Highlights
          
            
          
  
              This Black Friday, GeeksforGeeks is here with
              some Red Hot new deals on online and offline
              courses. Unbelievable offers will also be back
              in Flash Sales but you need to be quick to get
              them. Here’s everything you need to know about
              the Black Friday sale by GeeksforGeeks:
          
            
          
  All Day Super Sale On All Courses:
   
          
  
              There will be a Super Sale on all the available
              courses for the whole day of Black Friday. So
              you can buy your favorite courses at premium
              prices and learn a lot!
          
    
          
  4 Flash Sales On Selected Courses:
   
          
  
              There will be In Between Flash Sales on different
              courses for 1 hour each on Black Friday. These
              sales will reduce the prices of already discounted
              courses even further. Stay tuned to find out the
              times for different courses on the Flash Sale!
              There are Limited seats so the discount will be
              available on First Come First Serve basis.
          
            
          
  Social Media Contest:
          
  
              There will also be a Social Media Contest about
              “Guessing the Price of a Course” on the Black
              Friday Sale. Try your Luck!! Hefty discounts will
              be live on the following courses for the complete
              day. Grab them and pave the way to your dream
              product-based company!
          
  
            
          
              All the details you will get by clicking this 
              
              link
          
      
   
  
    
  
  

设计结构：在上一节中，我们已经创建了基本网站的结构。在本节中，我们将设计导航栏的结构，并使用 JavaScript 在导航栏上制作向下滚动效果。

• 看起来不错的 CSS 代码结构：

• 粘性导航栏的 JavaScript 代码：

      window.onscroll = function() {myFunction()};
     
      var navlist = document.getElementById("navlist");
      var sticky = navlist.offsetTop;
     
      /* Function to stick the nav bar */
      function myFunction() {
          if (window.pageYOffset >= sticky) {
              navlist.classList.add("sticky")
          } 
          else {
              navlist.classList.remove("sticky");
          }
      }

结合 HTML、CSS 和 JavaScript 代码：这个例子结合了上述部分来制作一个粘性导航栏网站。

   

    How To Create a Affix Navbar
       
    
           
        
    
          
    
        body {
            margin: 0;
        }
          
        .header {
            text-align: center;
            width: 100%;
        }
          
        #navlist {
            overflow: hidden;
            background-color: #0074D9;
        }
          
        /* navlist designing */
        #navlist a {
            float: right;
            display: block;
            color: #f2f2f2;
            text-align: center;
            padding: 14px 16px;
            text-decoration: none;
            font-size: 17px;
        }
          
        /* navlist link hover effect */
        #navlist a:hover {
            background-color: #ddd;
            color: black;
        }
          
        #navlist b{
            margin-top: 4px;
            padding: 8px 12px;
            color:lime;
            float: left;
            font-size: 22px;
        }
          
        /* scroll portion desing */
        .scrollable b {
            font-family: 'Special Elite', cursive;
            font-size: 28px;
        }
          
        .content {
            padding: 16px;
        }
          
        .sticky {
            position: fixed;
            top: 0;
            width: 100%;
        }
    

   

    
        
    
   
    
        GeeksforGeeks
        Contact us
        Careers
        Our Product
        About us
        Home
    
   
    
           
        BLACK FRIDAY
           
        
            Want to get huge discounts on GeeksforGeeks
            Courses? This Black Friday, we are bringing
            the shopping festival to you!!! GeeksforGeeks
            is celebrating Black Friday on 29th November
            2019 by providing you huge discounts on all
            its courses for the entire day! This will be
            a great opportunity for you to learn and
            enhance your skills. And that’s not all we
            are offering!
        
           
        
            There will also be Flash Sales that will go
            live for a particular duration of time where
            you can expect heavy discounts over a few 
            courses in addition to the existing discounts.
            These Flash Sales will go live for 4 times
            during the entire day with different courses
            in each flash sale. Want to know more about
            Black Friday? Read on to find out!
        
           
        
            Black Friday is the Friday immediately after
            Thanksgiving in the United States, which is
            on 29th November this time. This Black Friday
            Sale is intended to provide you with the best
            courses along with great deals where the
            investment of your time and money will surely
            pay off. So Grab this opportunity, Grab the
            deals and celebrate this Black Friday in the
            most amazing way possible!!!
        
   
        
            Black Friday Sale Highlights
        
           
        
            This Black Friday, GeeksforGeeks is here with
            some Red Hot new deals on online and offline
            courses. Unbelievable offers will also be back
            in Flash Sales but you need to be quick to get
            them. Here’s everything you need to know about
            the Black Friday sale by GeeksforGeeks:
        
           
        All Day Super Sale On All Courses: 
        
            There will be a Super Sale on all the available
            courses for the whole day of Black Friday. So
            you can buy your favorite courses at premium
            prices and learn a lot!
        
   
        4 Flash Sales On Selected Courses: 
        
            There will be In Between Flash Sales on different
            courses for 1 hour each on Black Friday. These
            sales will reduce the prices of already discounted
            courses even further. Stay tuned to find out the
            times for different courses on the Flash Sale!
            There are Limited seats so the discount will be
            available on First Come First Serve basis.
        
           
        Social Media Contest:
        
            There will also be a Social Media Contest about
            “Guessing the Price of a Course” on the Black
            Friday Sale. Try your Luck!! Hefty discounts will
            be live on the following courses for the complete
            day. Grab them and pave the way to your dream
            product-based company!
        
           
        
            All the details you will get by clicking this 
            
            link
        
     
      
    
        window.onscroll = function() {myFunction()};
  
        var navlist = document.getElementById("navlist");
        var sticky = navlist.offsetTop;
  
        /* Function to stick the nav bar */
        function myFunction() {
            if (window.pageYOffset >= sticky) {
                navlist.classList.add("sticky")
            } 
            else {
                navlist.classList.remove("sticky");
            }
        }
    

   

输出：