Липкий Навбар не придерживается, используя Bootstrap 4 - PullRequest
Новая
       6

Липкий Навбар не придерживается, используя Bootstrap 4

0 голосов
/ 11 января 2020

Мой сайт загружает фоновое изображение с 100vh в качестве целевой страницы. Справа внизу от начального вида находится панель навигации, и когда пользователь прокручивает страницу вниз, я не хочу, чтобы панель навигации придерживалась верхней части страницы, как только она достигает вершины. Я использую React. js с Bootstrap 4. Вот Stackblitz , а также JS и S CSS ниже. Я поместил класс sticky-top в элемент nav, но он не работает, что я могу сделать неправильно?

Это индекс. 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'));

Вот Стиль.s css

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

1 Ответ

0 голосов
/ 11 января 2020

Решено! Я вынул navbar из тега section и поставил его после.

...