липкий нижний колонтитул не остается внизу после прокрутки

Question

• я пытаюсь создать липкий нижний колонтитул.
• когда вы нажимаете добавить новую кнопку спорта, открывается ящик, в котором нижний колонтитул остается внизу .
• но когда я прокручиваю страницу, нижний колонтитул движется вверх.
• Я пробовал разные позиции, но все еще не работает.Можете ли вы сказать мне, как это исправить.-представляем фрагмент кода, песочницу и скриншот ниже.

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>

Answer 1

После просмотра вашего кода кажется, что вы не применили позицию: прикрепленный к div.Если вы добавите это, вы должны заметить, что он придерживается того места, где вы его разместили.

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