Как изменить Bootstrap цвет навигационной панели при прокрутке в React. js? - PullRequest
Новая
       11

Как изменить Bootstrap цвет навигационной панели при прокрутке в React. js?

0 голосов
/ 15 марта 2020

Я ищу способ изменить цвет навигационной панели (.bg-light в CSS) при прокрутке, но я не смог найти способ сделать это. Я хочу реализовать код так, чтобы всякий раз, когда пользователь прокручивал вниз от определенной точки y, стиль навигационных панелей изменялся; и всякий раз, когда пользователь прокручивает до этой точки, он возвращается к своему старому стилю.

Вот мой компонент navbar. Какие-либо предложения? 

import React, { useState} from 'react';
import './Navbar.css';
import Navbar from 'react-bootstrap/Navbar'
import Nav from 'react-bootstrap/Nav'
import { Link, animateScroll as scroll } from "react-scroll";

const navbar = (props) =>  {

    return (
        <div>
        <Navbar bg="light" expand="sm" fixed="top">
            <Navbar.Brand href="#home">
                KuGPA
            </Navbar.Brand>
            <Navbar.Toggle aria-controls="basic-navbar-nav" />
            <Navbar.Collapse id="basic-navbar-nav ">
                    <Nav.Link className="ml-auto"/>
                    <Link to="HOME" smooth={true} duration= {500}>
                        <Nav.Link  href="#HOME">Home</Nav.Link>
                    </Link>

                    <Link to="KUGPA" smooth={true} duration= {500}>
                    <Nav.Link  href="#KUGPA">KuGPA</Nav.Link>
                    </Link>


                    <Link to="ABOUT" smooth={true} duration= {500}>
                    <Nav.Link href="#ABOUT">About</Nav.Link>
                    </Link>


                    <Link to="CONTACT" smooth={true} duration= {500}>
                    <Nav.Link  href="#CONTACT">Contact</Nav.Link>
                    </Link>
            </Navbar.Collapse>
        </Navbar>
        </div>

    );
  }


export default navbar;

Спасибо

1 Ответ

0 голосов
/ 27 марта 2020

Итак, я обнаружил, что вам не нужно ничего писать на вашем компоненте. Просто go в ваш индекс. html и вставьте: 

<script>
  $(window).scroll(function() {
    $('nav').toggleClass('scrolled', $(this).scrollTop() > 0);
  })
</script>

После этого, go в ваш файл CSS и добавьте .scrolled в конец класса, который вы хотите изменение. В моем случае я добавил это к своему CSS: 

.bg-light.scrolled {
    background-color: white!important;
    transition:500ms ease;
}

И это сработало !. (Вам не нужно transition, это выглядит более гладко.)

...