Липкий заголовок прокручивается вне поля зрения при горизонтальной прокрутке - PullRequest
Новая
       9

Липкий заголовок прокручивается вне поля зрения при горизонтальной прокрутке

1 голос
/ 12 июня 2019

У меня есть заголовок, который я бы хотел использовать как во время вертикальной, так и горизонтальной прокрутки.Мне бы хотелось, чтобы он был липким из-за динамической высоты заголовка (в противном случае я мог бы использовать fixed, если я не ошибаюсь).

Я поиграл с скрипкой без успеха: (

https://jsfiddle.net/Viktor/39v0gzjh/22/

CSS: 

html, body{
  width:100%;
  background-color:red;
  opacity:0.9;
  padding:0;
  margin:0;
}

.header{
  position:sticky;
  top:0;
  left:0;
  background-color:gray;
  height: 100px;
  padding:0;
}

.container{
  display: flex;
}

.child{
  width: 120px;
  min-width: 120px;
  max-width: 120px;
  border: 1px solid #D8D8D8;
  background-color: white;
  font-weight: bold;
  word-wrap: break-word;
}

.bigdiv{
  width:1000px;
  height:1000px;
}

HTML: 

<div class="header">
  This is my sticky header
</div>

<div class="container">
  <div class="child">
  child1
  </div>
  <div class="child">
  child2
  </div>
  <div class="child">
  child3
  </div>
  <div class="child">
  child4
  </div>
  <div class="child">
  child5
  </div>
  <div class="child">
  child6
  </div>
  <div class="child">
  child7
  </div>
  <div class="child">
  child8
  </div>
  <div class="child">
  child9
  </div>
  <div class="child">
  child
  </div>
</div>
<div class="bigdiv">
  Very long div
</div>

Ответы [ 3 ]

0 голосов
/ 12 июня 2019

position: sticky работает нормально.Причина, по которой вы не можете видеть его эффект, заключается в том, что position применяется к div (не видимый текст) и ширине div, которая занимает 100% элемента div его родителя,что в этом случае body.Поэтому, когда вы прокручиваете по горизонтали, вы все еще находитесь внутри div, который занимает все доступное пространство ширины.Теперь, если вы хотите просматривать содержимое внутри div.header независимо от прокрутки, измените его ширину на width: 100vw, и он должен работать нормально.Вы можете проверить, установив width из body в 140% и .header в 100vwВсего наилучшего.Ура!

0 голосов
/ 12 июня 2019

Лучший подход был бы установлен overflow-x: scroll; в вашем html. Это решит проблему.

Обратите внимание, что sticky, по спецификации, не будет работать внутри элемента с переполнением. Это известная проблема

Следовательно, попробуйте использовать javascript в сочетании с position: fixed 

$(window).scroll(function() {
  if( $(this).scrollTop() > 0 ) {
    $('.header').addClass('sticky');
  } else {
    $('.header').removeClass('sticky');
  }
});
html,
body {
  width: 100%;
  background-color: red;
  opacity: 0.9;
  padding: 0;
  margin: 0;
  overflow-x: scroll;
}

.header {
  width: 100%;
  background-color: gray;
  height: 100px;
  padding: 0;
}

.sticky {
  position:fixed;
  top:0;
  width: 100%;
  left:0;
}

.pt-100{
  padding-top: 100px;
}

.container {
  display: flex;
}

.child {
  width: 120px;
  min-width: 120px;
  max-width: 120px;
  border: 1px solid #D8D8D8;
  background-color: white;
  font-weight: bold;
  word-wrap: break-word;
}

.bigdiv {
  width: 1000px;
  height: 1000px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="header">
  This is my sticky header
</div>

<div class="container">
  <div class="child">
    child1
  </div>
  <div class="child">
    child2
  </div>
  <div class="child">
    child3
  </div>
  <div class="child">
    child4
  </div>
  <div class="child">
    child5
  </div>
  <div class="child">
    child6
  </div>
  <div class="child">
    child7
  </div>
  <div class="child">
    child8
  </div>
  <div class="child">
    child9
  </div>
  <div class="child">
    child
  </div>
</div>
<div class="bigdiv">
  Very long div
</div>
0 голосов
/ 12 июня 2019

Если вы используете bootstrap , просто добавьте fixed-top класс к вашему header: 

<div class="header fixed-top">
  This is my sticky header
</div>

В противном случае, с помощью css позиция заголовка должна быть "position:fixed;", а ееширина "width: 100%;" и затем поместите другое содержимое страницы ниже, как эта скрипка:

https://jsfiddle.net/s071hnxL/

...