📌  相关文章
📜  如何只为页面的第一部分设置粘性导航栏?

📅  最后修改于: 2021-05-25 17:51:19             🧑  作者: Mango

较早的Bootstrap在Affix jQuery插件中为某些部分设置了固定的导航栏,而对其他部分则设置了绝对导航,但是新的Bootstrap 4.0放弃了此选项,建议为此使用javascript。

我们可以使用Javascript将导航栏的第一部分设置为粘滞,其余部分设置为绝对。
为此,您只需要使用window.onscroll函数确定屏幕所处的位置,然后根据其施加粘滞或绝对位置。

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

句法
让我们看一下如何使用它:
最后,在body标签内的HTML的脚本标签中键入以下代码。

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
        
        
    
    
        
  
        
            

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函数,其中将变量navbarConst设置为其id为“ navbarSection”的元素,然后变量stickyConst使用“ offsetTop”返回navbarConst相对于文档的偏移坐标。

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

输出: