Javascript 导航栏不粘在顶部（反应）

我试图让我的导航栏在粘到主页顶部之前向上滚动一点。我已将导航栏保存为一个组件，因为我将在整个网站的不同页面上再次重复使用它。然而，我似乎无法让导航栏粘在我的主页上。有人能帮我吗

**Navbar.js**

import React from 'react'
import './style.css';



const Navbar = (props) => {


  return(
   
        <div className="page">
            
             <div className="banner"></div>

                <div className="navbar-scroll">
                   <div className="border"></div>

                     <nav className=" navbar navbar-expand-sm navbar">  
                         <div className="nav-link collapse navbar-collapse">
                            <ul className="navbar-nav ml-auto">
                              <li className="nav-item"><a className="nav-link" href="#">Home</a></li> 
                              <li className="nav-item"><a className="nav-link" href="#">About</a></li>
                              <li className="nav-item"><a className="nav-link" href="#">Blog</a></li>
                              <li className="nav-item"><a className="nav-link" href="#">Portfolio</a></li>
                              <li className="nav-item"><a className="nav-link" href="#">Contact</a></li>
                            </ul>   
                         </div> 
                     </nav>
                     <div className="border"></div>
                     <div className="divider-below-nav"></div>
                </div>



            
       
        </div>

   )

 }


export default Navbar

---

粘性项必须是滚动元素的直接子元素。在这种情况下，您的

导航栏滚动

是

页面

的一个子项，该子项不滚动，而是

主体

.page{
位置：相对位置；
}
.边界{
左：0；
右：0；
背景色：rgb（136、133、133）；
高度：4px；
}
a、 导航链路{
填充：1rmb；
文本转换：大写；
}
.navbar展开sm.navbar导航链接{
右侧填充：3.5rem；
左侧填充：.5rem；
}
.navbar展开sm.navbar导航链接：悬停{
颜色：rgba（70,66,66,0.5）；
}
.导航栏导航.导航链接{
颜色：rgb（56,55,55）；
}
.导航下方的分隔器{
最小高度：42px；
背景颜色：橙色；
}
.横幅{
背景颜色：橙色；
高度：24.5vh；
}
.导航条滚动条{
位置：粘性；
排名：0；
/*您将需要此菜单，以便在高于其他元素时具有背景*/
背景：白色
}
.分割器1{
最小高度：42px；
背景颜色：橙色；
}
.分割器2{
最小高度：86px；
背景色：白色；
}
.分隔符3{
最小高度：42px；
背景色：rgb（221196151）；
}
.分割器4{
最小高度：255px；
背景颜色：橙色；
}

我可以给你一个主意。将侦听器创建到滚动事件中。获取用户滚动的当前位置，并与导航栏的位置进行比较。如果滚动位置超过导航栏（起始位置+导航栏高度），则修改DOM使其具有粘性。如果用户返回顶部，u也应该更新DOM，使其不再粘性

**Navbar.css**


.page {
    position: relative;
 }

.border {
    left:0;
    right:0;
    background-color:rgb(136, 133, 133);
    height: 4px;
}

a.nav-link { 
    padding: 1rmb; 
    text-transform: uppercase;
}

.navbar-expand-sm .navbar-nav .nav-link {
    padding-right: 3.5rem;
    padding-left: .5rem; 
}

.navbar-expand-sm .navbar-nav .nav-link:hover {
    color: rgba(70, 66, 66, 0.5);
}

 .navbar-nav .nav-link {
    color: rgb(56, 55, 55); 
}

.divider-below-nav {
    min-height: 42px;
    background-color: orangered;
}

.banner {
    background-color:orange;
    height: 24.5vh;    
}

.navbar-scroll {
    position: sticky;
    top: 0;
}

**Home.js**


import React from 'react';
import Navbar from '../../components/Navbar';
import './style.css';



 const Home = (props) => {


    return(
   
      
         <div className="body">
      
           <Navbar/>
        
           <div className="divider2"></div>

           <div className="divider3"></div>

           <div className="divider4"></div>

           <div className="divider1"></div>

           <div className="divider4"></div>

           <div className="divider1"></div>

           <div className="divider4"></div>

        </div>

      ) 

    }

export default Home;

**Home.css**


.divider1 {
    min-height: 42px;
    background-color: orangered;
}

.divider2 {
    min-height: 86px;
    background-color: white;
}

.divider3 {
    min-height: 42px;
    background-color: rgb(221, 196, 151);
}

.divider4 {
    min-height: 255px;
    background-color: orange;
}