Question

我在使用自适应网页设计时遇到了一个小问题，发生的事情是我将左菜单设置为固定位置，当我调整浏览器大小时，左菜单仍然固定，但是在切换设备工具栏，我将提供图片来解释我的情况。

当我单击切换设备工具栏并选择iPhone时，会得到以下内容

但是当我调整浏览器大小时，我得到的是：

第二个结果就是我想要的，因为我的菜单中有一个滚动条，所以当我调整浏览器的大小时，一切都很好。这是实现此操作的代码。

我的React组件：

class MenuLeft extends Component {
// a code here ( my state and constructor and methods )
render() {
    return (
        <div>
            {this.state.isDisplayed && (
                <nav
                    className={
                        this.state.isPropositionsClicked
                            ? "co-menu-left co-menu-left--big"
                            : "co-menu-left co-menu-left--small"
                    }
                >
                    {!this.state.isPropositionsClicked && (
                        <div
                            className={
                                this.state.isPropositionsClicked
                                    ? "co-contrat-propositions"
                                    : "co-contrat-propositions"
                            }
                        >
                            <div className="co-contrat-propositions__list">
                                {this.renderContrats(this.state.contratItems)}
                            </div>
                        </div>
                    )}

                    {this.state.isPropositionsClicked && (
                        <div className="co-contrat-propositions__list">
                            <ContratProposition
                                id={this.state.activeContrat.id}
                                isSelected
                                allContratDeselected={() => this.handle}
                            />
                        </div>
                    )}

                    <div
                        role="button"
                        tabIndex={0}
                        className="co-menu-left__toggle"
                        onClick={() => this.handleContratsView()}
                        onKeyDown={() => this.handleContratsView()}
                    >
                        <FontAwesomeIcon
                            role="presentation"
                            icon={!this.state.isPropositionsClicked ? faAngleUp : faAngleDown}
                            size="2x"
                        />
                    </div>

                    <PerfectScrollbar>
                        {this.renderItems(this.state.menuItems)}
                    </PerfectScrollbar>
                </nav>
            )}
            {!this.state.isDisplayed && (
                <div className="co-menu-left__show">
                    <div
                        onKeyDown={this.displayMenuLeft}
                        className="co-menu-left__show--center"
                        onClick={this.displayMenuLeft}
                        role="button"
                        tabIndex={0}
                    >
                        <FontAwesomeIcon icon={faAngleDoubleUp} size="4x" />
                    </div>
                </div>
                //
            )}
        </div>
    );
}
}

}

在此代码中重要的只是我相信的导航，因为内部内容与我的问题无关。

这是我的sass文件：

.co-menu-left {

  width:110px;
  height: 63%; // 83%
  position: fixed;
  top: 70px;
  left:0px;
  transition: 0.4s all ease;
  z-index: 5;

  @include responsive(desktop){
    top:0;
    height: 65%;
  }

/* ------------------ this is the code needed in my problem -------------- */
  @include responsive(phone){
    width:100vw;
    top:0px;
    height: 100%;
    z-index:1500000;
  }
}

我称之为响应式“方法”是我使用的mixin，电话等于或小于600px。

任何帮助将不胜感激。

位置在响应模式下不固定？

0 个答案: