Блог

Главная - Вопросы по программированию - Sticky не работает в столбце начальной загрузки

Sticky не работает в столбце начальной загрузки

#css #bootstrap-4

#css — файл #начальная загрузка-4 #css

Вопрос:

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

Я использовал этот метод много раз, и в прошлом он всегда срабатывал. Это сводит меня с ума, кто-нибудь знает, почему моя форма не прилипает в данном случае?

 .sticky-top {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 1020;
}  
 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />


<div class="container">
  <div class="row justify-content-around">
    <div class="col-5">
      <!-- sticky -->
      <div class="sticky-top">
        <div class="card card__body box-shadow" style="background-color:green;">
          <div class="row">
            <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12 ">
              <div class="form-group service-form-group">
                <label class="control-label sr-only" for="name"></label>
                <input id="name" type="text" placeholder="First Name" class="form-control" required>
                <div class="form-icon"><i class="fa fa-user"></i></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="col-lg-5 col-12">
      <h2>Placeholder</h2>
      <h2>Placeholder</h2>
      <h2>Placeholder</h2>
      <h2>Placeholder</h2>
      <h2>Placeholder</h2>
      <h2>Placeholder</h2>
      <h2>Placeholder</h2>
      <h2>Placeholder</h2>
      <h2>Placeholder</h2>
      <h2>Placeholder</h2>
      <h2>Placeholder</h2>
      <h2>Placeholder</h2>
      <h2>Placeholder</h2>
      <h2>Placeholder</h2>
      <h2>Placeholder</h2>
      <h2>Placeholder</h2>
      <h2>Placeholder</h2>
      <h2>Placeholder</h2>
      <h2>Placeholder</h2>
      <h2>Placeholder</h2>
      <h2>Placeholder</h2>
      <h2>Placeholder</h2>
      <h2>Placeholder</h2>
      <h2>Placeholder</h2>
      <h2>Placeholder</h2>
      <h2>Placeholder</h2>
      <h2>Placeholder</h2>
      <h2>Placeholder</h2>
    </div>
  </div>
</div>

Комментарии:

1. это работает нормально, но не для маленького экрана, так как вы используете col-12

2. Очень, очень странно. Это не работает локально для размера экрана: S

Ответ №1:

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

Попробуйте следующее:

 .sticky-top {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 1020;
}  
 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />


<div class="container">
  <div class="row justify-content-around">
    <div>
      <!-- sticky -->
      <div class="sticky-top">
        <div class="card card__body box-shadow" style="background-color:green;">
          <div class="row">
            <div class="col-xl-6 col-lg-6 col-md-6 col-sm-12 col-12 ">
              <div class="form-group service-form-group">
                <label class="control-label sr-only" for="name"></label>
                <input id="name" type="text" placeholder="First Name" class="form-control" required>
                <div class="form-icon"><i class="fa fa-user"></i></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="row">
      <div>
        <h2>Placeholder</h2>
        <h2>Placeholder</h2>
        <h2>Placeholder</h2>
        <h2>Placeholder</h2>
        <h2>Placeholder</h2>
        <h2>Placeholder</h2>
        <h2>Placeholder</h2>
        <h2>Placeholder</h2>
        <h2>Placeholder</h2>
        <h2>Placeholder</h2>
        <h2>Placeholder</h2>
        <h2>Placeholder</h2>
      </div>
    </div>
  </div>
</div>

Дайте мне знать, если это то, что вы ищете.