Офсетный якорь html с flexbox - PullRequest
Новая
       5

Офсетный якорь html с flexbox

0 голосов
/ 01 ноября 2018

Есть действительно хорошая ручка на https://codepen.io/dodozhang21/pen/KFkaf (кажется, оригинал на https://tympanus.net/codrops/2012/06/12/css-only-responsive-layout-with-smooth-transitions/), который имеет фиксированный нижний колонтитул меню и CSS3-анимацию для переключения между разделами. Однако элементы действительно являются фиксированными , что приводит к разрыву макета, когда текста больше, чем доступно.

Так возникла мысль, что я мог бы попытаться модернизировать это. Добавьте flex, или, возможно, сначала сделайте его мобильным и отзывчивым. Было бы неплохо до и после опыта, в отличие от более искусных вещей, которые я изучал в CSS. Также я бы немного узнал о CSS3. Текущая попытка на https://codepen.io/veksi/pen/jegdXw (я удалил некоторые устаревшие вещи и добавил некоторые элементы), а также вставлен в этот пост.

Теперь есть конкретная точка прилипания & ndash; или, вероятно, многие, в зависимости от того, как глубоко хочешь зайти.

Проблема

Основная проблема заключается в том, что я хотел бы настроить полную прокрутку страницы, чтобы можно было прокручивать сверху вниз, а также выполнять резервное копирование после выбора одного из подразделов. В настоящее время после выбора одного из подразделов можно прокрутить назад только на той позиции привязки, а не в верхней части страницы. Кажется, у меня есть пробел в знаниях, чтобы решить эту конкретную проблему. Я заметил, что есть проблемы, которые написаны как смещение якоря , но я не знаю, что я не знаю, как применить их в этой конкретной ситуации.

HTML довольно короткий, вот он 

	html,body {    
}
body {
   font-size: calc(14px + (26 - 14) * ((100vw - 300px) / (1600 - 300)));
   overflow: hidden;
   display: flex;   
   
  /* If this rule is active, one gets a scroll bar.
  Problem: Scrolling upwards to Section 1 does not work after clicking
 any of the subsections.
  */
  /* overflow: auto; */
}

main {
  width: 100%;  
}

section {
scroll-snap-align: start;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
border-top: 0.125rem black solid;
font-size: 2.25rem;
  	  
transform: translateZ(0);    
transition: transform 0.6s ease-in-out;
  width: 100%;
  height: 100vh;
}

section p {
  display: flex;
  flex-direction: column;
}

nav {
width: 100%;
padding-top: 0.5em;
}

nav ul {
list-style: none;
width: inherit; 
margin: 0; 
}

ul li:nth-child(3n + 1), #main .panel:nth-child(3n + 1) {
  background: rgb(0, 255, 180);  
}

ul li:nth-child(3n + 2), #main .panel:nth-child(3n + 2) {
background: rgb(255, 65, 180);
}

ul li:nth-child(3n + 3), #main .panel:nth-child(3n + 3) {
  background: rgb(0, 180, 255);  
}

ul li {
display: inline-block; 
margin: 0 8px;
margin: 0 0.5em;
padding: 0.3125em 0.5em;
padding: 0.3em 0.5em;
border-radius: 0.125em; 
line-height: 1.5em;
}

ul li a {
color: #fff;
text-decoration: none;
}

.panel h1 {
font-family: sans-serif;
font-size: 4em;
font-size: 4em;
color: #fff;
position:relative;
line-height: 12.5em;
top: 33%;
text-align: center;
margin: 0;
}

footer {
position: fixed;
display: flex;
justify-content: center;
align-items: center;    
width: 100%;
bottom: 0;
padding: 0;
background: #333333;
color: #212121;    
}

div[id="section-1"]:target ~ main article section.panel {    
transform: translateY(0vh);
}

div[id= "section-2"]:target ~ main article section.panel {    
transform: translateY(-100%);
}
div[id= "section-3"]:target ~ main article section.panel {    
transform: translateY(-200%);
}

div[id= "section-4"]:target ~ main article section.panel {
  transform: translateY(-300%);
}

div[id= "section-5"]:target ~ main article section.panel {
transform: translateY(-400%);
}

/* This creates the trianble seen on the top. It's a square rotated and the
   color of it is the same as the alternating background color to hide the
   other side.

   Problem: Have approximately the same effect without fixing the location.
*/
.st-deco {
width: 12.5em;
height: 12.5em;
position: absolute;
top: 0px;
left: 50%;
margin-left: -6.25em;
background: #fa96b5;
transform: translateY(-50%) rotate(45deg);
}

/* Problem: The following is fairly complex structure. How to simplify? */
[data-icon]:after {
content: attr(data-icon);    
color: #fff;
text-shadow: 1px 1px 1px rgba(151,24,64,0.2);
position: absolute;
width: 12.5em;
height: 12.5em;
line-height: 12.5em;
text-align: center;
font-size: 5.625em;
top: 50%;
left: 50%;
margin: -6.25em 0 0 -6.25em;
transform: rotate(-45deg) translateY(25%);
}

.st-color, .st-deco {
background: #fa96b5;
}
.st-color [data-icon]:after {
color: #fa96b5;
}
.st-color .st-deco {
background: #fff;
}
.st-color h2 {
color: #fff;
text-shadow: 1px 1px 1px rgba(0,0,0,0.1);
}
.st-color p {
color: #fff;
color: rgba(255,255,255,0.8);
}

[data-icon]:after {
content: attr(data-icon);    
color: #ccc;    
position: absolute;
width: 12.5em;
height: 12.5em;
line-height: 12.5em;
text-align: center;
font-size: 5.625rem;
top: 50%;
left: 50%;
margin: -6.25em 0 0 -6.25em;
transform: rotate(-45deg) translateY(25%);
}

.st-deco {
width: 7.5em;
height: 7.5em;
margin-left: -3.75em;
}
[data-icon]:after {
font-size: 3.75rem;
transform: rotate(-45deg) translateY(15%);
}
<!doctype html>
<html lang="en">	
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
    <div id="section-1"></div>
    <div id="section-2"></div>
    <div id="section-3"></div>
    <div id="section-4"></div>
    <div id="section-5"></div>
<main>
    <article>
      <section class="panel st-color" id="st-panel-1">
        <div class="st-deco" data-icon="*"></div>
        <p>Section One</p></section>
      <section class="panel" id="st-panel-2">
        <div class="st-deco" data-icon="*"></div>
        <p>Section Two</p></section>
      <section class="panel st-color" id="st-panel-3">
        <div class="st-deco" data-icon="*"></div>
        <p>Section Three</p>
        <p>1: Lorem ipsum dolor sit amet...</p>
        <p>2: Lorem ipsum dolor sit amet...</p>
        <p>3: Lorem ipsum dolor sit amet...</p>
        <p>4: Lorem ipsum dolor sit amet...</p>
        <p>5: Lorem ipsum dolor sit amet...</p>
      </section>
      <section class="panel" id="st-panel-4">
        <div class="st-deco" data-icon="*"></div>
        <p>Section Four</p>        
      </section>
      <section class="panel st-color" id="st-panel-5">
        <div class="st-deco" data-icon="*"></div>
        <p>Section Five</p>        
      </section>
	</article>
</main>
   <footer>              
        <nav>
            <ul>
                <li><a href="#section-1">Section 1</a></li>
                <li><a href="#section-2">Section 2</a></li>
                <li><a href="#section-3">Section 3</a></li>
                <li><a href="#section-4">Section 4</a></li>
                <li><a href="#section-5">Section 5</a></li>
            </ul>
        </nav>
    </footer>  
  </body>
</html>

(фрагмент не отображается правильно в маленьком окне.)

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

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...