如何仅为页面的第一部分设置粘性导航栏？

早期的 Bootstrap 提供了在Affix jQuery 插件中为某些部分设置固定导航栏和为其他部分设置绝对导航栏的选项，但新的 Bootstrap 4.0 删除了这个选项并建议使用 javascript。

我们可以使用 Javascript 将导航栏设置为第一部分的粘性和其余部分的绝对。
为此，您只需使用window.onscroll函数，该函数将确定屏幕所在的位置，然后根据它应用粘性或绝对位置。

方法：
这里我们设置了一个window.onscroll函数，在该函数中我们将变量navbarConst设置为 id 为“navbarSection”的元素，然后变量stickyConst使用“offsetTop”返回 navbarConst 相对于文档的偏移坐标。

句法
让我们来看看如何使用它：
最后在 HTML 的body标签内的script标签中输入以下代码。

window.onscroll = function() {myFunction()};

var navbar = document.getElementById("nav_bar");
var sticky = navbar.offsetTop;

function myFunction() {
  if (window.pageYOffset >= sticky) {
    navbar.classList.remove("sticky");
  } else {
    navbar.classList.add("sticky");
  }
}

例子：
让我们看下面的例子，以便更好地理解 HTML：

    
        GeeksforGeeks
        
        
            body {
                margin: 0;
                font-size: 26px;
                font-family: sans-serif;
            }
  
            .firstSection {
                background-color: #fa8072;
                padding: 30px;
                text-align: left;
            }
  
            #navbarSection {
                overflow: hidden;
                background-color: #c71585;
            }
  
            #navbarSection a {
                float: left;
                display: block;
                color: #f2f2f2;
                text-align: center;
                padding: 16px 16px;
                text-decoration: none;
                font-size: 16px;
            }
  
            #navbarSection a:hover {
                background-color: #ffe4b5;
                color: black;
            }
  
            #navbarSection a.active {
                background-color: red;
                color: white;
            }
  
            #secondSection {
                padding: 16px 35px;
                padding-top: 0;
                background-color: #66cdaa;
            }
  
            .stickyNavbar {
                position: sticky;
                top: 0;
                width: 100%;
            }
  
            .stickyNavbar,
            #secondSection {
                padding-top: 30px;
            }
        
    
    
        
            Home
            Page 1
            Page 2
        
  
        
            This is the first section. Scroll down 
              to see the effects of sticky navbar on
              first section and absolute on other 
              section.
             Some texts to fill the section 
            
                HTML stands for Hyper Text Markup
              Language. It is used to design web pages
              using markup language. HTML is the 
              combination of Hypertext and Markup 
              language. Hypertext defines the link
              between the web pages. Markup language is
                used to define the text document 
              within tag which defines the structure
              of web pages. HTML is a markup language
              which is used by the browser to manipulate
              text, images and other content to display 
              it in required format.
            
        
  
        
            
            
            
            From here First section ends and second
              start in which navbar should not be sticky.
          
            
             Some texts to fill the section 
            
                HTML stands for Hyper Text Markup Language.
              It is used to design web pages using markup
              language. HTML is the combination of Hypertext
              and Markup language. Hypertext defines the
              link between the web pages. Markup language is
                used to define the text document within 
              tag which defines the structure of web pages.
              HTML is a markup language which is used by 
              the browser to manipulate text, images and 
              other content to display it in required format.
            
        
  
        
            window.onscroll = function () {
                myFunction();
            };
  
            var navbarConst = 
                document.getElementById("navbarSection");
            var stickyConst = navbarConst.offsetTop;
            var navbarOther = 
                document.getElementById("secondSection");
            var stickyOther = navbarOther.offsetTop;
  
            function myFunction() {
                if (window.pageYOffset >= stickyOther) {
                    navbarSection.classList.remove(
                      "stickyNavbar");
                } else {
                    navbarSection.classList.add(
                      "stickyNavbar");
                }
            }
        
    

解释：
这里我们设置了一个window.onscroll函数，在该函数中我们将变量navbarConst设置为 id 为“navbarSection”的元素，然后变量stickyConst使用“offsetTop”返回 navbarConst 相对于文档的偏移坐标。

然后根据屏幕的Y坐标，设置它的位置。当屏幕的 Y 坐标大于第一部分的 Y 坐标时，我们移除stickyNavbar 类。这里stickyNavbar 是我们将位置设置为粘性的类。

输出：