Липкий div, который остается внизу страницы при прокрутке страницы

Когда кто-то прокручивает нашу страницу вниз, в определенный момент появляется div (с кнопкой призыва к действию). Чего я пытаюсь добиться, так это того, что этот div с этого момента становится «липким» и прокручивается вниз вместе с окном просмотра, внизу окна просмотра, если сайт прокручивается вниз. Этот div в основном является, но не совсем, своего рода липким нижним колонтитулом, поскольку остальная часть сайта продолжает прокручиваться за ним.

Теперь у меня нет проблем с закреплением div в верхней части страницы, но это не то, что мне нужно. Его нужно приклеить к низу.

Я использую bootstrap 3 с аффиксом. Я почти там, но еще не совсем. Следующий javascript с css почти выполняет свою работу, но div с id cta прыгает вниз по области просмотра, как только div становится видимым внутри области просмотра. С этого момента он хорошо прокручивается вниз с окном просмотра внизу, но прыжок сверху вниз должен исчезнуть :)

<div id="affixwrapper">
//stuff thats being wrapped above the div with id cta.
</div>

<div id="cta" data-spy="affix">
  <div class="section section-success text-center">
    <div class="container">
      <div class="row">
        <div class="col-md-12">
          <a class="btn ban-default">Button text</a>
        </div>
      </div>
    </div>
  </div>
</div>

<script>
$('#cta').affix({
  offset: {
    top: function() { return $('#affixwrapper').height(); }
  }
});
</script>

<style>
.affix {
bottom: 0px;
position: fixed;
width: 100%;
background-color: white;
z-index: 777;
}
</style>

jquery twitter-bootstrap sticky viewport affix
person Danny    schedule 22.08.2017    source источник
comment
Мне интересно, возможно ли это вообще? Или мне нужно искать другое решение? У кого-нибудь есть идеи?   -  person Danny    schedule 23.08.2017

Ответы (1)


arrow_upward
1
arrow_downward

В CSS буквально есть значение позиции, называемое «липким», нет необходимости в jQuery :)

Вот фрагмент кода (см. демонстрацию)

<!DOCTYPE html>
<style>
  body {
    height: 600vh;
    margin: 0;
  }
  #sticky {
    position: sticky;
    top: 90vh;
    left: 0px;
    width: 100%;
    height: 10vh;
    background-color: red;
  }
  #space {
    height: 200vh;
  }
  #container {
    height: 200vh;
  }
</style>

<div id="space"></div>
<div id="sticky"></div>

«Липкий» <div> будет располагаться относительно (т. е. позиционироваться так, как если бы он был без position: sticky) сразу после «пробела» <div> до тех пор, пока пользователь не достигнет смещения, указанного в top, то есть 90vh. После этого он изменится на position: fixed в этом месте.

person David Bokan    schedule 24.08.2017
comment
хм, ваша демонстрация просто показывает белую страницу с красным div посередине. Ничего липкого или что-то ......?? Как браузер поддерживает это значение, называемое «липким»? - person Danny; 25.08.2017
comment
Какой браузер вы используете? Прокручивая вниз, вы должны увидеть красную прокрутку ‹div› в поле зрения, а затем застрять в нижней части области просмотра. Согласно caniuse.com/#feat=css-sticky, это должно работать в Chrome, Firefox и Safari (но похоже, что Safari может понадобиться префикс -webkit-), поддержка Edge появится в ближайшее время. - person David Bokan; 06.09.2017
comment
Я тестировал его в сафари. - person Danny; 08.09.2017
comment
Вам нужно будет использовать position: -webkit-sticky дополнительно. Я обновил свою демонстрационную страницу (хотя у меня нет устройства iOS для тестирования). - person David Bokan; 08.09.2017