滚动后粘性页脚不停留在底部

时间:2018-11-20 21:42:12

标签: javascript html css reactjs material-ui

  • 我正在尝试开发粘性页脚。
  • 当您点击添加新的运动按钮时,一个抽屉打开,该页脚位于底部
  • 但是当我滚动页面时,页脚就会向上移动。
  • 我尝试过担任各种职务,但仍然无法正常工作。你能告诉我如何解决它。 -在下面提供我的代码段,沙箱和屏幕截图。

enter image description here

https://codesandbox.io/s/jp82jl853v

 sportsEditTabContentFooter: {
    position: "fixed",
    left: 0,
    bottom: 0,
    width: "100 %",
    backgroundColor: "red",
    color: "white",
    textAlign: "center"
  },


  <div className={classes.sportsEditTabContentFooter}>
              <div>sports Status</div>
              <div>
                <Button variant="outlined" className={classes.button}>
                  Cancel
                </Button>
                <Button
                  variant="outlined"
                  onClick={this.savesports}
                  className={classes.button}
                >
                  Save sports test
                </Button>
              </div>
            </div>

1 个答案:

答案 0 :(得分:2)

查看代码后,您似乎尚未对div应用position:sticky。如果添加的话,您应该注意到它粘在您放置的位置。

.RecipeReviewCard-sportsEditTabContentFooter-649 {
    left: 0;
    width: 100%;
    color: white;
    bottom: 0;
    text-align: center;
    background-color: red;
    position: sticky;
}