粘性导航栏不使用 Bootstrap 4

Question

我的网站加载了一个 100vh 的背景图片作为登录页面。初始视图的正下方是导航栏，当用户向下滚动时，我不希望导航栏一旦到达顶部就粘在页面顶部。我正在使用带有 Bootstrap 4 的 React.js。这是Stackblitz 以及下面的 JS 和 SCSS。我已将粘顶类放在导航元素上，但它不起作用，我可能做错了什么？

这是 index.js

import React, { Component } from 'react';
import { render } from 'react-dom';
import './style.scss';

class App extends Component {
  render() {
    return (
      <div className='App'>
            <section id='home' className='home'>
                <div className='home__background'>
                    <div className='dark-overlay'>
                        <h1>Background Image using CSS</h1>
            <div className='home__background__content'><h3>Text</h3><button>Go To About</button></div>
                    </div>
                </div>

                <nav className='navbar user-nav sticky-top'>
                    <div className='user-nav__links'>
                        <a href='#home' className='user-nav__links__link active'>
                            Home
                        </a>
                        <a href='#section2' className='user-nav__links__link'>
              Section2
                        </a>
                        <a href='#section3' className='user-nav__links__link'>
                            Section3
                        </a>
                        <a href='#section4' className='user-nav__links__link'>
                            Section4
                        </a>
                        <a href='#section5' className='user-nav__links__link'>
                            Section5
                        </a>
                    </div>
                </nav>
            </section>
      <section id='section2' className='section2'>
      <p>section2</p>
      </section>
      <section id='section3' className='section3'>
      <p>section3</p>
      </section>
      <section id='section4' className='section4'>
      <p>section4</p>
      </section>
      <section id='section5' className='section5'>
      <p>section5</p>
      </section>
      </div>
    );
  }
}

render(<App />, document.getElementById('root'));

这里是 style.scss

* {
    margin: 0;
    padding: 0;
}

*,
*::before,
*::after {
    box-sizing: inherit;
}

html {
    font-family: 'Roboto', sans-serif;
    box-sizing: border-box;
    font-size: 62.5%; 
}

.home {
    &__background {
        height: 100vh;
        //background-image: url('./img/bg1.jpg');
        background-size: cover;
        overflow: hidden;

        &__content {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);

            width: 40%;
            height: 30%;

        }
    }
}

.user-nav {
    width: 100%;
    background-color: black;
    text-transform: uppercase;
    padding: 2rem;
    margin-right: 2rem;

    a {
        text-decoration: none;
    }

    &__links {
        height: 100%;

        &__link {
            height: 100%;
            font-size: 1.7rem;
            color: white;
            margin-right: 5rem;
            line-height: 100%;

            &:hover {
                color: lightblue;
            }
        }
    }

    .active {
        color: orange;
    }
}

.section2 {
  height: 400px;
}

.section3 {
  height: 500px;
}

.section4 {
  height: 400px;
}

.section5 {
  height: 500px;
}

Answer 1

解决了！我将导航栏从section标签中取出，放在后面。