прозрачный статический заголовок хотел бы, чтобы при прокрутке текст не отображался под заголовком

Question

Я новичок в css, и я попытался выяснить, могу ли я найти решение для моей проблемы с тем, чтобы мой контент не показывался под моим прозрачным заголовком, когда есть необходимость прокрутки. Я проверил следующий пост, но я не могу сделать эту работу. Я был бы чрезвычайно счастлив, если бы я мог получить некоторые ориентиры в этом, если это возможно. Я приложил визуальное представление о моей проблеме, если это поможет. www is www.portaponte.com Заранее спасибо!

Скрыть прокручиваемый контент за прозрачными разделителями фиксированной позиции при прокрутке страницы?

Answer 1

Ну, хотя и не идеально, я пойду с ответом:

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

Прежде всего, оберните #casing div в #casing-wrapper div, получив что-то вроде этого:

<div id="casing-wrapper">
  <div id="casing">
    lots of content here...
  </div>
</div>

Тогда вам нужно будет стилизовать этот новый div следующим образом:

#casing-wrapper {
  width: 800px;
  position: fixed;
  left: 50%;
  margin-left: -400px;
  top: 90px;
  overflow-y: scroll;
}

Также вам нужно добавить jQuery для установки высоты #casing-wrapper в зависимости от высоты окна:

jQuery(document).ready(function(){
  setWrapperHeight();
  jQuery(window).resize(function(){
    setWrapperHeight();
  });
});

function setWrapperHeight() {
  var height = jQuery(window).height();
  var margin = 90;
  jQuery("#casing-wrapper").css({"height":height - margin});
}

И это все. Делая это, мы создали новый слой, содержащий прокручиваемый контент, который имеет высоту окна минус 90 пикселей. Эти 90px берутся из высоты вашего заголовка плюс его верхнее поле. Поскольку оболочка имеет position: fixed, она не будет перемещаться при прокрутке, но ее содержимое будет. Кроме того, с помощью свойства overflow-y: hidden; мы обрезаем любое переполненное содержимое, в результате чего текст не отображается под вашим заголовком.

В любом случае, на мой взгляд, результат добавления букв под заголовком - это круто, и я не буду его менять: P