Question

我在页面的右侧有导航栏，现在我将“固定”设置为导航的position属性，但是这阻止了我向下滚动时看到导航栏中的其他项目，因此这些是您的照片可以了解更多，这就是我现在拥有的内容，当我向下滚动时

向下滚动：（您会看到我可以清楚看到设置项）

但是我要实现的功能是向下滚动，因为设置项是列表中的最后一项：

我正在使用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;
}

这是我的项目React代码（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;

这是我用于子元素的无礼：

.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

我想在向下滚动时将导航固定在某个位置吗？

1 个答案: