영웅 영역 아래 CSS 그리드 고정 / 고정 탐색

debugcn 에 게시 Dev

로봇 공학

내 CSS 그리드 디자인 https://codepen.io/AnonymousCaptain/pen/ExPWMNm 이것은이 페이지의 스 니펫과 달리 "영웅 영역"을 포함합니다.

사용자가 영웅 영역을 지나서 스크롤하면 뷰포트 상단에 고정하려면 내비게이션이 필요합니다.

여러 번의 시도에도 불구하고 나는 여전히 #navbar 위치를 고정 / 고정하지 못했습니다.

나는 위치를 읽었습니다. 스티키는 아직 잘 지원되지 않을 수도 있지만 실제로 가장 우아한 솔루션을 선택하겠습니다. https://caniuse.com/#feat=css-sticky ?

CSS 태그 #navbar가 뷰포트 상단에 도달하면 수정해야하며 거기에서 #content의 모든 항목을 스크롤합니다.

:root {
  --radius: 5px;
  --padding: 40px;
}

.btn {
  background-color: transparent;
  color: #fff;
  padding: 10px 30px;
  border-radius: 0;
  transition: all 0.3s ease-in 0s;
}

.btn-transparent {
  border: 1px solid #4e595f;
}

.container {
  font-family: "Inter", sans-serif;
  font-weight: 800;
  color: white;
  text-transform: uppercase;
  font-size: 12px;
  text-align: center;
  display: grid;
  grid-template-columns: repeat(1);
  grid-template-rows: repeat(3);
  grid-gap: 0.5rem;
  height: 100vh;
  grid-template-areas:
    "navbar"
    "content";
}

#navbar {
  background: #d81b60;
  border-radius: var(--radius);
  padding-top: var(--padding);
  grid-area: navbar;
  height: 50px;
}

.about .block:hover {
  border-bottom: 2px solid #57cbcc;
}

#content {
  font-family: "Inter", sans-serif;
  font-weight: 800;
  color: white;
  background: #242930;
  border-radius: var(--radius);
  padding-top: var(--padding);
  grid-area: content;
  height: 100vh;
  text-transform: uppercase;
  font-size: 12px;
  text-align: center;
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  grid-template-rows: repeat(6, 1fr);
  grid-gap: 0.5rem;
  height: 250vh;
  grid-template-areas:
    "content1"
    "content2"
    "content4"
    "content3"
    "content5"
    "content6";
}

/* Is the screen larger than 600 pixels? Make it two columns.*/
@media (min-width: 700px) {
  #content {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, 1fr);
    grid-template-areas:
      "content1 content2"
      "content3 content4"
      "content5 content6";
  }
}

#blueimg {
  background: #c9268d;
  background-image: url("https://i.imgur.com/wvpehP5.png");
  background-size: cover;
  background-repeat: no-repeat;
  grid-area: content1;
}

#blue {
  background: #d81b60;
  border-radius: var(--radius);
  padding: var(--padding);
  grid-area: content2;
  display: flex;
}

#blue p {
  margin: auto;
}

#red {
  background: #b31077;
  border-radius: var(--radius);
  padding: var(--padding);
  grid-area: content3;
  display: flex;
}

#red p {
  margin: auto;
}

#redimg {
  background: #c51162;
  background-image: url("https://i.imgur.com/Mg2XiX9.png");
  background-size: cover;
  background-repeat: no-repeat;
  grid-area: content4;
}
#purpleimg {
  background: #bf1179;
  background-image: url("https://i.imgur.com/24huGsn.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  grid-area: content5;
}

#purple {
  background: #880e4f;
  border-radius: var(--radius);
  padding: var(--padding);
  grid-area: content6;
  display: flex;
}

#purple p {
  margin: auto;
}

<div class="container">
  <div id="navbar">
    navbar</div>
  <div id="content">
    <div id="blueimg"></div>
    <div id="blue">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam malesuada sit amet nisl vel facilisis. Duis nibh sapien, elementum eu congue eget, lacinia at massa. Cras convallis quis lacus in ornare. Sed vulputate sed tellus tincidunt pellentesque. Curabitur dictum, dolor vel ultricies congue, quam diam venenatis tortor, accumsan molestie dolor nunc ac velit. Pellentesque blandit vel ex at vehicula. Cras tempus vitae odio et egestas. Nunc vel sollicitudin tortor. Nullam a odio libero. Sed et iaculis felis.</p>
    </div>
    <div id="red">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam malesuada sit amet nisl vel facilisis. Duis nibh sapien, elementum eu congue eget, lacinia at massa. Cras convallis quis lacus in ornare. Sed vulputate sed tellus tincidunt pellentesque. Curabitur dictum, dolor vel ultricies congue, quam diam venenatis tortor, accumsan molestie dolor nunc ac velit. Pellentesque blandit vel ex at vehicula. Cras tempus vitae odio et egestas. Nunc vel sollicitudin tortor. Nullam a odio libero. Sed et iaculis felis.</p>
    </div>
    <div id="redimg"></div>
    <div id="purpleimg"></div>
    <div id="purple">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam malesuada sit amet nisl vel facilisis. Duis nibh sapien, elementum eu congue eget, lacinia at massa. Cras convallis quis lacus in ornare. Sed vulputate sed tellus tincidunt pellentesque. Curabitur dictum, dolor vel ultricies congue, quam diam venenatis tortor, accumsan molestie dolor nunc ac velit. Pellentesque blandit vel ex at vehicula. Cras tempus vitae odio et egestas. Nunc vel sollicitudin tortor. Nullam a odio libero. Sed et iaculis felis.</p>
    </div>
  </div>

</div>

focus.style

문제가 여기에 .container {height: 100vh;}있었습니다. 그것을 대체 min-height: 100vh;. 정적 높이의 경우 요소가 position: sticky;이동할 장소가 없었습니다 .

그리고 position: sticky; top: 0;(에 대해 오프셋의 측면을 선언 sticky해야 함) #navbar. 이제 잘 작동합니다.

많은 고정이 height있습니다. 특별한 필요없이 사용하지 마십시오. 대부분의 경우 min-height.

:root {
  --radius: 5px;
  --padding: 40px;
}

.btn {
  background-color: transparent;
  color: #fff;
  padding: 10px 30px;
  border-radius: 0;
  transition: all 0.3s ease-in 0s;
}

.btn-transparent {
  border: 1px solid #4e595f;
}

.container {
  font-family: "Inter", sans-serif;
  font-weight: 800;
  color: white;
  text-transform: uppercase;
  font-size: 12px;
  text-align: center;
  display: grid;
  grid-template-columns: repeat(1);
  grid-template-rows: repeat(3);
  grid-gap: 0.5rem;
  min-height: 100vh;
  grid-template-areas:
    "hero-area"
    "navbar"
    "content";
}

#hero-area {
  background: #c9268d;
  border-radius: var(--radius);
  padding-top: var(--padding);
  grid-area: hero-area;
  display: grid;
  grid-gap: 0.2rem;
  align-content: center;
  height: 100vh;
  background-image: url("https://images.unsplash.com/photo-1591825495543-981fa4410313");
  background-size: cover;
  font-size: 42px;
  position: relative;
  justify-content: center;
  align-items: center;
}

#hero-area:before {
  content: "";
  background: rgba(0, 0, 0, 0.63);
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

#hero-area > div {
}

#hero-area .block {
  text-align: center;
  z-index: 99;
}

#hero-area .block h1 {
  font-size: 90px;
  color: #fff;
  text-transform: capitalize;
  font-weight: 700;
  margin-bottom: 20px;
}

#hero-area .block p {
  color: #fff;
  font-size: 20px;
  width: 70%;
  margin: 0 auto;
}

#hero-area .block .btn-transparent {
  margin-top: 40px;
  border-color: #fff;
  padding: 14px 50px;
  font-size: 18px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 1px;
}

#navbar {
  background: #d81b60;
  border-radius: var(--radius);
  padding-top: var(--padding);
  grid-area: navbar;
  height: 50px;
  position: sticky;
  top: 0;
}

.about .block:hover {
  border-bottom: 2px solid #57cbcc;
}

#content {
  font-family: "Inter", sans-serif;
  font-weight: 800;
  color: white;
  background: #242930;
  border-radius: var(--radius);
  padding-top: var(--padding);
  grid-area: content;
  height: 100vh;
  text-transform: uppercase;
  font-size: 12px;
  text-align: center;
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  grid-template-rows: repeat(6, 1fr);
  grid-gap: 0.5rem;
  height: 250vh;
  grid-template-areas:
    "content1"
    "content2"
    "content4"
    "content3"
    "content5"
    "content6";
}

/* Is the screen larger than 600 pixels? Make it two columns.*/
@media (min-width: 700px) {
  #content {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(3, 1fr);
    grid-template-areas:
      "content1 content2"
      "content3 content4"
      "content5 content6";
  }
}

#blueimg {
  background: #c9268d;
  background-image: url("https://i.imgur.com/wvpehP5.png");
  background-size: cover;
  background-repeat: no-repeat;
  grid-area: content1;
}

#blue {
  background: #d81b60;
  border-radius: var(--radius);
  padding: var(--padding);
  grid-area: content2;
  display: flex;
}

#blue p {
  margin: auto;
}

#red {
  background: #b31077;
  border-radius: var(--radius);
  padding: var(--padding);
  grid-area: content3;
  display: flex;
}

#red p {
  margin: auto;
}

#redimg {
  background: #c51162;
  background-image: url("https://i.imgur.com/Mg2XiX9.png");
  background-size: cover;
  background-repeat: no-repeat;
  grid-area: content4;
}
#purpleimg {
  background: #bf1179;
  background-image: url("https://i.imgur.com/24huGsn.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  grid-area: content5;
}

#purple {
  background: #880e4f;
  border-radius: var(--radius);
  padding: var(--padding);
  grid-area: content6;
  display: flex;
}

#purple p {
  margin: auto;
}

<head>
  <link href="https://fonts.googleapis.com/css?family=Inter:400,800,900&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />
</head>

<div class="container">
  <div id="hero-area">
    <div class="block">
      <h1>Company Name</h1>
      <p>
        Company descriptive text... look at us, we are to be taken seriously, wow.
      </p>
      <div id="app">
        <a href="#content" v-smooth-scroll="{duration: 1500, offset: -5, }" class="btn btn-transparent page-scroll">Explore Us</a>
      </div>
    </div>

  </div>
  <div id="navbar">
    <a href="index.html">
      <img style="height: 50px;" src="https://image.flaticon.com/icons/svg/3069/3069165.svg" />
    </a>
    navbar</div>
  <div id="content">
    <div id="blueimg"></div>
    <div id="blue">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam malesuada sit amet nisl vel facilisis. Duis nibh sapien, elementum eu congue eget, lacinia at massa. Cras convallis quis lacus in ornare. Sed vulputate sed tellus tincidunt pellentesque. Curabitur dictum, dolor vel ultricies congue, quam diam venenatis tortor, accumsan molestie dolor nunc ac velit. Pellentesque blandit vel ex at vehicula. Cras tempus vitae odio et egestas. Nunc vel sollicitudin tortor. Nullam a odio libero. Sed et iaculis felis.</p>
    </div>
    <div id="red">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam malesuada sit amet nisl vel facilisis. Duis nibh sapien, elementum eu congue eget, lacinia at massa. Cras convallis quis lacus in ornare. Sed vulputate sed tellus tincidunt pellentesque. Curabitur dictum, dolor vel ultricies congue, quam diam venenatis tortor, accumsan molestie dolor nunc ac velit. Pellentesque blandit vel ex at vehicula. Cras tempus vitae odio et egestas. Nunc vel sollicitudin tortor. Nullam a odio libero. Sed et iaculis felis.</p>
    </div>
    <div id="redimg"></div>
    <div id="purpleimg"></div>
    <div id="purple">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam malesuada sit amet nisl vel facilisis. Duis nibh sapien, elementum eu congue eget, lacinia at massa. Cras convallis quis lacus in ornare. Sed vulputate sed tellus tincidunt pellentesque. Curabitur dictum, dolor vel ultricies congue, quam diam venenatis tortor, accumsan molestie dolor nunc ac velit. Pellentesque blandit vel ex at vehicula. Cras tempus vitae odio et egestas. Nunc vel sollicitudin tortor. Nullam a odio libero. Sed et iaculis felis.</p>
    </div>
  </div>

</div>

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정2021-04-2

몇 마디 만하겠습니다

0리뷰

로그인참여 후 검토

Related 관련 기사

기사

영웅 영역 아래 CSS 그리드 고정 / 고정 탐색

영웅 영역 아래 CSS 그리드 고정 / 고정 탐색

특정 영역 CSS의 고정 위치

CSS로 내 탐색 영역 색상을 어떻게 설정합니까?

jQuery 및 CSS로 고정 영역을 슬라이드 업하고 싶습니다.

정상 곡선 아래 상단 영역의 일부만 음영 처리

검도 그리드 고정 탐색

gnuplot : 색상이있는 그리드 선뿐만 아니라 색상이 지정된 그리드 영역을 만드는 방법은 무엇입니까?

직사각형이 아닌 영역을 드래그 할 수 있도록 설정

오래된 영역 객체를 정리?

CSS : 고정 사이드 바 탐색 기능이있는 3 열 레이아웃

CSS3 간단한 텍스트 애니메이션, 스크롤 할 때 고정 된 탐색 막대와 겹치지 만 텍스트의 콘텐츠 영역은 그렇지 않습니까?

JWPlayer 시간 탐색 영역 및 재설정 변수

별도의 고정 된 스크롤 가능 콘텐츠 영역이있는 CSS 레이아웃

별도의 고정 된 스크롤 가능 콘텐츠 영역이있는 CSS 레이아웃

그리드 영역은 정의 된 영역 / 열 / 행없이 작동합니다.

작은 탐색 영역으로 navbar 크기를 조정 한 후 모달의 부트 스트랩 입력 양식이 아래쪽으로 떨어짐

manim의 그래프 아래 색상 영역

이미지의 특정 영역에 알고리즘 적용

관심 영역 알고리즘 (정사각형)

입력 할 때 확장되고 그 아래 콘텐츠를 아래로 밀어내는 텍스트 영역

이진 변수를 기반으로 ggplot2의 선 그래프 아래에서 특정 영역에 색을 지정할 수 있습니까?

숨겨진 대상 영역이 아래에있을 때 JQuery UI 정렬 가능 항목이 고정 대상 영역을 감지하지 못합니다.

<li>를 통한 확장 영역 고정

그룹화 된 UITableView 아래 회색 영역

탐색 고정 오른쪽 서식 CSS

Python에서 FFT 최고점 아래 영역

그리드에서 고정 탐색을 만드는 방법

CSS 그리드 레이아웃 : 강제 고정 레이아웃

고객 영역 워드 프레스에서 데이터 검색

왼쪽 탐색의 불투명도이지만 특정 영역까지