Удалите ненужные места с позиции липкой - PullRequest
Новая
       20

Удалите ненужные места с позиции липкой

0 голосов
/ 18 мая 2019

Я пытаюсь использовать position: sticky на повернутом элементе, но у меня появляется дополнительное место сверху. Также там, где липкий элемент должен остановиться (в конце родительского элемента), он выходит наружу.

Обратите внимание, что мне нужно иметь возможность выбирать, сколько пикселей поместить между липким элементом и левой стороной окна.

Посмотрите на скриншот 2, чтобы понять 2 проблемы и то, чего я хочу достичь.

Проблема 1: дополнительное пространство сверху State 1 (default at start)

Проблема 2: липкий элемент выходит наружу в конце секции State 2 (at section end)

Я использую этот код:

HTML 

<section class="section">

  <h1 class="section__title">STICKY</h1>

  <div class="container">
    <div class="row">
      <div class="col [ col-lg-8 offset-lg-2 ]">
        <div class="h4">
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam quos illum aperiam officia provident, mollitia at, tempore atque, blanditiis sit optio esse harum officiis voluptas iusto sequi. Magni, reiciendis quidem.
        </div>
      </div>
    </div>
  </div>

</section>

CSS 

.section__title {
  display: inline-block;
  transform: rotate(-90deg) translatex(-100%);
  transform-origin: 0% 0%; 
  margin-bottom: 0;

  position: sticky;
  top: 0;
  left: 50px;
}

Вот кодекс со всем кодом: https://codepen.io/anon/pen/KLqJGG

Как я могу решить это? Спасибо

Ответы [ 2 ]

2 голосов
/ 18 мая 2019

Проблема 1: дополнительное пространство сверху

Элемент с липким позиционированием остается в потоке DOM - так же, как и элемент с позиционированием relative.Итак, отсюда пространство, которое занимает элемент h1.section__title.

Проблема 2: липкий элемент выходит наружу в конце раздела

Это потому, чтоисходная высота элемента h1 все еще считается там, даже после поворота.

Итак, вам нужно определить точную ширину липкого заголовка (который затем становится высотой этого элемента после поворота)сначала, а затем установите это значение ширины для высоты повернутого элемента следующим образом: 

$section-sticky-header-height: 145px;

.section__title {
  display: inline-block;
  margin-bottom: 0;
  transform-origin: 0% 0%; 
  position: sticky;
  top: 0;
  left: 50px;

  /* solves problem 1 */
  float: left; 

  /* solves problem 2 */
  transform: rotate(-90deg) translatex(-$section-sticky-header-height);
  height: $section-sticky-header-height;
}

Codepen: https://codepen.io/anon/pen/arybWZ

Редактировать:

Проблема в том, что я не могу определить точную ширину липкого заголовка, потому что текст h1 является переменным (клиент вставит этот текст через CMS).Есть ли способ справиться с этим?Если возможно без Javascript

Понял.Вместо этого вы можете попробовать это, если высота переменная: 

<h1 class="h1 mb-0 section__title">
  <div class="rotation-outer">
    <div class="rotation-inner">
      <div class="rotation">
        STICKY
      </div>
    </div>
  </div>
</h1>

.section__title {
  border: 1px solid; // for demo purpose
  position: sticky;
  top: 0;
  float: left;

  .rotation-outer {
    display: table;
    position: relative;
    left: 50px;

    .rotation-inner {
      padding: 50% 0;
      height: 0;

      .rotation {
        transform-origin: 0 0;
        transform: rotate(-90deg) translate(-100%);
        margin-top: -50%;
        white-space: nowrap; 
      }
    }  
  }
}

См. В действии: https://codepen.io/anon/pen/BedREm

Здесь очень хорошее объяснение того, как это работает: Повернутые элементы в CSS, которые корректно влияют на высоту их родителей

Редактировать 2:

По этой ссылке я также обнаружил свойство writing-mode: vertical-rl; (в этом ответеstackoverflow.com/a/50406895/1252920).Как вы думаете, может быть лучшим решением?Я применил его в этом Codepen: codepen.io/anon/pen/JqyJWK?editors=1100 Что вы думаете?

Да, еще одна приятная альтернатива, которую вы можете использовать.:)

Здесь я немного изменил / оптимизировал: https://codepen.io/anon/pen/qGXPPe?editors=1100

Однако, пожалуйста, обратите внимание, что vertical-lr или vertical-rl широко не поддерживается.Видимо только на настольных версиях Chrome / Firefox / Opera. Смотрите здесь .Так что решать вам, какой из них использовать.Лично я бы не стал использовать writing-mode из-за отсутствия поддержки браузера.

0 голосов
/ 18 мая 2019

Мне кажется, что ваш Codepen не имеет того заполнения, которое вы упомянули, поэтому мне интересно, удалили ли вы отступы по умолчанию и поля элементов html и body.

html, body {
    margin: 0;
    padding: 0;
}

Дайте мне знать, работает ли он или в каком браузере появляется упомянутый вами отступ.

...