Имейте «липкую» кнопку прямо под другим «липким» navbar - PullRequest
Новая
       23

Имейте «липкую» кнопку прямо под другим «липким» navbar

0 голосов
/ 07 октября 2018

У меня есть файл приложения, который содержит мою собственную панель приложений и различные компоненты страницы: 

const styles = theme => ({
  appBar: {
          width:'100%',
  },
});

class App extends Component {

  render() {
    const {classes} = this.props;
    return (
      <React.Fragment>
      <CssBaseline />
      <AppBar position="sticky" className={classes.appBar} />
      <Page1 show={someCondition} />
      <Page2 show={someCondition} />
      .
      .
      <Page99 show={someCondition} />
     </React.Fragment>
    );
  }
}

Панель приложений липкая, поэтому она всегда отображается сверху.У каждого компонента страницы есть кнопка, которая всегда находится вверху этой страницы: 

const styles = theme => ({
      button: {
              width:'100%',
      },
    });

class Page99 extends Component {

  render() {
    const {classes} = this.props;
    return (
      <React.Fragment>
         <div>
            <Button variant="contained" className= {classes.button}>
              Action Button
            </Button>
         </div>
        {/* Some other stuff */>
     </React.Fragment>
    );
  }
}

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

Ответы [ 2 ]

0 голосов
/ 08 октября 2018

Поместите кнопку в панель приложения и установите ее в положение абсолютное и добавьте верх: 100%, чтобы переместить ее точно внизу панели приложения.

0 голосов
/ 07 октября 2018

Вы можете установить положение контейнера страницы как относительное и установить кнопку как абсолютную.Вы можете выровнять его по верхнему правому краю страницы или где угодно.

Проверьте эту скрипку, это то, что вам нужно 

.componentparent {
  position: relative;
  height:100px;
  max-height: 50px;
  overflow: auto;
}

.button {
  position: fixed;
  top: 30px;
}

.otherelements{
  top: 70px;
  position: relative;
}
<div id="parent-container">
  <div> your app bar </div>
  <div class='componentparent'>
    <button class='button'>my button</button>
    <div class='otherelements'>your component</div>
  </div> 
</div>
...