JQuery Hide-Nav на прокрутки в реакции - PullRequest
Новая
       32

JQuery Hide-Nav на прокрутки в реакции

0 голосов
/ 09 июня 2018

Мой обычный jquery-код отлично работает в реакции.

Когда я пытаюсь выполнить этот отлично работающий jquery-код в реакции, он просто не работает.

1) Navigation.js

import React, { Component } from 'react';
import $ from 'jquery';
import './Navigation.scss';

class nav extends Component {

    componentDidMount = () => {
        // Hide Header on on scroll down
        var didScroll;
        var lastScrollTop = 0;
        var delta = 5;
        var navbarHeight = $('header').outerHeight();

        $(window).scroll(function(event){
            didScroll = true;
        });

    setInterval(function() {
        if (didScroll) {
            hasScrolled();
            didScroll = false;
        }
    }, 250);

    function hasScrolled() {
        var st = $(this).scrollTop();

        // Make sure they scroll more than delta
        if(Math.abs(lastScrollTop - st) <= delta) {
            return;
        }

        // If they scrolled down and are past the navbar, add class .nav-up.
        // This is necessary so you never see what is "behind" the navbar.
        if (st > lastScrollTop && st > navbarHeight){
            // Scroll Down
            $("header").removeClass("nav-down").addClass("nav-up");
        } else {
            // Scroll Up
            if(st + $(window).height() < $(document).height()) {
                $("header").removeClass("nav-up").addClass("nav-down");
            }
        }

        lastScrollTop = st;
    }

}

render() {

    return (
        <header className="fixed-top">
            <nav id="small-top-nav" className="nav navbar navbar-expand-lg nav-down">

                /* ALL LINKS CODE */

            </nav>

        </header>
    );
}

export default nav;

2) Navigation.scss 

.nav-up {
    top: -2.5rem;
}

.nav-down {
    down: 2.5rem;
}

Я пробовал этот код jquery в обычном загрузчике и работает нормально.

Вы также можете найти этот рабочий код jquery здесь на коде.

1 Ответ

0 голосов
/ 10 июня 2018

Это не способ реагировать.Если вы даже импортировали JQuery, вы, вероятно, делаете это неправильно.
Вы не хотите манипулировать фактическим DOM здесь, который упускает смысл использования реакции.Не следует также изменять видимость элементов, чтобы определить, какие элементы видны клиенту.
Вместо этого у вас должно быть состояние, определяющее, должен ли компонент отображаться, - функция для установки соответствующего состояния (в вашем случае, когда клиентсвитки) и троичное выражение внутри вашего метода рендеринга ({ this.state.showNav ? <Nav /> : null })

...