Я хочу, чтобы моя навигация была зафиксирована в определенной позиции при прокрутке вниз?

Question

У меня есть navbar в правой части моей страницы, теперь я устанавливаю "fixed" для свойства position nav, но это не позволяет мне видеть другие элементы в navbar при прокрутке вниз, вот фотографии, так что вымогу понять больше, вот что у меня сейчас, и когда я прокручиваю вниз

Прокручиваем вниз: (Вы видите, что я ясно вижу настройкуitem)

Но я хочу добиться чего-то вроде этого при прокрутке вниз, так как элемент настройки - последний элемент в моем списке:

Я использую ReactJS и SASS для этого, и вот мой код ReactJS:

const MenuLeft = props => {
const menuItems = [
    { id: 1, item: "Données personelles", icon: faMale, isSelected: true },
    { id: 2, item: "Synthèse", icon: faFolderOpen, isSelected: false },
    { id: 3, item: "Historique", icon: faList, isSelected: false },
    { id: 4, item: "Analyse de portefeuille", icon: faFolderOpen, isSelected: false },
    { id: 5, item: "Description", icon: faFileInvoice, isSelected: false },
    { id: 6, item: "Documents", icon: faFolderOpen, isSelected: false },
    { id: 7, item: "Opérations", icon: faCogs, isSelected: false }
];

return (
    <nav className="co-menu-left">
        {menuItems.map(item => (
            <MenuItem item={item.item} icon={item.icon} isSelected={item.isSelected} />
        ))}
    </nav>
);
};

А вот мой файл SASS:

.co-menu-left {
    width:100px;
    height: 1000px;
    position: fixed;
    left:10px;
    top:85px;
}

Вот мои вещи Код реакции (jsx):

class MenuItem extends Component {
 constructor(props) {
    super(props);
    this.state = {
        isSelected: false
    };
}

changeBackColor() {
    alert("hello");
}
render() {
    return (
        <Grid onClick={() => this.changeBackColor()} container className="co-menu__backcolor">
            <Grid item xs={12} className="co-menu__icon pb-0">
                <div className="co-menu__icon--centered">
                    <FontAwesomeIcon
                        icon={this.props.icon || ""}
                        size="3x"
                        className="co-menu__icon--color"
                    />
                </div>
            </Grid>
            <Grid item xs={12} className="co-menu__text pt-0">
                <Text content={this.props.item} className="co-menu__text--color" />
            </Grid>
            <Grid item xs={12} className="pt-0" />
        </Grid>
    );
}
}

export default MenuItem;

Вот sass, который я использовал для своих дочерних элементов:

.co-menu {

&__backcolor {
    cursor: pointer;
    background-color: $black-rock;
    &:hover {
        background: $black-russian;
    }
}


&__icon {
    margin:0 5%;
    text-align: center;
    &--color {   
        color: $mischka;
    }
    &--centered {
        display: inline-block;
        width: auto;
        margin: 0 auto; 
    }
}

&__text {
    padding:0;
    text-align: center;
    &--color {
        color: $mischka !important;
    }
    p {
        margin-top:7px;
    }
}

}

Я могу предоставитьс большим количеством кода, если это необходимо.

Я надеюсь, что смогу найти некоторую помощь, и любая помощь будет высоко ценится.

Answer 1

Вы можете попробовать использовать absolute позиционирование на навигационной панели, например,

.co-menu-left {
    width:100px;
    height: 1000px;
    position: absolute;
    left:10px;
    top:85px;
}

JSFiddle