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

【问题标题】：Navbar does not stick to the top (React)导航栏不粘在顶部（反应）
【发布时间】：2023-03-21 10:21:01
【问题描述】：

我正在尝试让我的导航栏向上滚动一点，然后它才会停留在主页的顶部。我已将导航栏保存为一个组件，因为我将在整个网站的不同页面上再次重复使用它。但是，我似乎无法让导航栏贴在我的主页上。有人可以帮帮我吗？


**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

**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;
}

【问题讨论】：

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

标签： javascript html css reactjs navbar

【解决方案1】：

粘性项目必须是滚动元素的直接子元素。在这种情况下，您的 navbar-scroll 是 page 的子代，不会滚动，而是 body。

.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;
    /*you'll need this so menu can have a background when above other elements*/
    background: white
}

.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;
}

<div class="body">
      
       <div class="navbar-scroll">
                   <div class="border"></div>

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

           <div class="divider3"></div>

           <div class="divider4"></div>

           <div class="divider1"></div>

           <div class="divider4"></div>

           <div class="divider1"></div>

           <div class="divider4"></div>

        </div>

【讨论】：