Липкая позиция не работает в Action App?

Question 1

Немного новичок в реакции, но основы изучены - крючки и т. Д.

Я пытаюсь создать простое приложение для блога, которое использует липкий заголовок - предполагая, что это простое место «позиции»: «Sticky» CSS Styling. Однако я попробовал это, но элемент не является липким. Поиск в Интернете, я наткнулся на общую проблему в отношении «переполнения».

Header.js

const Header = () => (
<div className='header'>
    <Nav>
        <div className='logo'>
            <NavLink exact to='/'>
                <h1>Logo</h1>
            </NavLink>
        </div>
        <div className="forinput">
            <InputWithLabel
                id="search"
                isFocused
                className='input'
            />
        </div>
        <NavMenu>
            <NavLink className='button' exact to='/' activeStyle>
                Home
            </NavLink>
            <NavLink className='button' exact to='/' activeStyle>
                Designers
            </NavLink>
            <NavLink className='button' exact to='/detail' activeStyle>
                Items
            </NavLink>
            <NavLink className='button' exact to='/' activeStyle>
                Saveds
            </NavLink>
            <NavLink className='button' exact to='/' activeStyle>
                Profile
            </NavLink>
        </NavMenu>
    </Nav>
    <hr/>
</div> );

HeaderElements.js

import { NavLink as Link } from 'react-router-dom';

export const Nav = styled.nav
    background: #fff;
    height: 30px;
    display: flex;
    justify-content: space-between;
    padding: 0.5rem calc((100vw - 1000px) / 2);
    position: sticky;
    top: 0px;
    z-index: 1;


export const NavLink = styled(Link)
    colour: #000;
    display: flex;
    align-items: center;
    text-decoration: none;
    padding: 0 10px;
    padding-top: 3px;
    height: 100%;
    cursor: pointer;

    &.active {
        colour: #15cdfc;
    }

export const NavMenu = styled.div
    display: flex;
    align-items: centre;

    @media screen and (max-wdith: 768px) {
        display: none
    }

Layout.js

const Layout = (props) => (
    <body>    
        <div>
            <Header />
            {props.children}
        </div>
    </body>
);

App.js

const App = () => (
  <Router>
    <Layout className='App'>
      <Switch>
        <Route exact path='/' component={Home} />
        <Route exact path='/p/:id' component={Detail} />
      </Switch>
    </Layout>
  </Router>
);

html css reactjs jsx

1

peterpeter5 24 Мар 2021 в 01:23

Answer

Я веду себя глупо ... Оказывается, потому что «страница» или тело было недостаточно длинным, оно, естественно, не прокручивалось. После настройки высоты страницы липкая навигация работает как надо.

1

peterpeter5 24 Мар 2021 в 13:32

Question 2

Я веду себя глупо ... Оказывается, потому что «страница» или тело было недостаточно длинным, оно, естественно, не прокручивалось. После настройки высоты страницы липкая навигация работает как надо.

1

peterpeter5 24 Мар 2021 в 13:32

Липкая позиция не работает в Action App?

1 ответ

Похожие вопросы

Новые вопросы

html