0

所以我正在制作一个投资组合网站，部分原因是为了练习反应，部分原因是它是保存我的项目的好地方。我想使用 react-scroll 因为它的功能符合我想要的设计主题，但我遇到了一个非常小的障碍。无论出于何种原因，当我滚动 .active 功能时都可以正常工作，但是当我单击按钮时，它仅在某些时候有效。

这似乎是因为它跳转到页面上实际部分之前，但我不知道如何修复它。我尝试弄乱偏移量，但这只会产生其他问题/问题仍然存在于不同的位置。我确信我可以通过创建自己的滚动对象来解决它，但我觉得必须有一种方法可以只使用 Link 对象来做到这一点，因为它的布局并不太复杂。

所涉及组件的代码如下

应用程序.js

import './App.css';
import SideBar from './Components/Sidebar';
import Home from "./Pages/Home";
import About from './Pages/About';
import styled from 'styled-components';
import Projects from './Pages/Projects';

const WrapperDiv = styled.div`
  display: flex;
  flex-wrap: wrap;
`;

const PageSpace = styled.div`
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
`;

function App() {
  return (
    <div className="App">
      <WrapperDiv>
        <SideBar/>
        <PageSpace>
          <Home/>
          <About/>
          <Projects />
        </PageSpace>
      </WrapperDiv>
    </div>
  );
}

export default App;

应用程序.css

.NavWrap {
    width: 10rem;
    justify-content: center;
    align-items: center;
    display: flex;
    flex-direction: column;
    grid-area: 2 / 1 / 5 / 2;
}

.NavWrap > .active {
    transition: background-color 0.5s ease, color .5s;
    background: #3A3736;
    color: #e1e9fc;
}

.home {
    background-color: #423F3D;
    height: 100vh;
    align-items: center;
    display: flex;
    justify-content: center;
}

.about {
    background-color: #54504D;
    height: 100vh;
}

.project {
    background-color: #423F3D;
    height: 100vh;
}

.bruh {
    fill: white;
    align-items: center;
}

.logo-scaled{
    fill: white;
    align-items: center;
    width: 75%;
    height: 75vh;
}

.main-heading{
    font-family: "Libre Baskerville", Times, serif;
    font-size: 8em;
}

边栏.js

import React, { Component } from 'react';
import styled from 'styled-components';
import Logo from '../Components/Logo';
import '../App.css';
import { Link, animateScroll as scroll, Button } from "react-scroll";

const SideBarNav = styled.nav`
    width: 10rem;
    background: #242221;
    justify-content: center;
    height: 100vh;
    top: 0;
    z-index: 10;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(5, 1fr);
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    position: sticky;
`;

const SideBarHomeIcon = styled(Link)`
    background: #121110;
    grid-area: 1 / 1 / 2 / 2;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
`;

const SocialBox = styled.div`
    grid-area: 5 / 1 / 6 / 2;
`;

const SideBarLink = styled(Link)`
    display: flex;
    color: #e1e9fc;
    justify-content: space-between;
    align-items: center;
    list-style: none;
    height: 8vh;
    text-decoration: none;
    font-size: 18px;
    width: 100%;
    transition: background-color 0.5s ease, color .5s ease;

    &:hover{
        background: #3A3736;
        color: #e1e9fc;
        cursor: pointer;
        transition: background-color 0.5s ease, color .5s ease;
    }
`;

const ButtonText = styled.p`
    padding: 1rem;
`;

export default class Sidebar extends Component {
    scrollToTop = () => {
        scroll.scrollToTop();
    };

    render() {
        return (
            <>
                <SideBarNav>
                    <SideBarHomeIcon
                        to="home-section"
                        spy={true}
                        smooth={true}
                        duration={500}>
                        <Logo classText="bruh" />
                    </SideBarHomeIcon>
                    <div className='NavWrap'>
                        <SideBarLink
                            activeClass="active"
                            to="about-section"
                            spy={true}
                            smooth={true}
                            duration={500}>
                            <ButtonText>About</ButtonText>
                        </SideBarLink>
                        <SideBarLink
                            activeClass="active"
                            to="project-section"
                            spy={true}
                            smooth={true}
                            duration={500}>
                            <ButtonText>Projects</ButtonText>
                        </SideBarLink>
                    </div>
                    <SocialBox />
                </SideBarNav>
            </>
        );
    }
}

如果您想查看其余部分，这是 github 存储库： https ://github.com/jtlaughton/Portfolio

编辑：这似乎只在全屏时发生。也更新了一个更明智的

4

0 回答 0