"position: sticky;" 속성은 어떻게 작동합니까?

"position: sticky;" 속성은 어떻게 작동합니까?

사용자가 페이지를 스크롤하면 탐색 모음을 뷰포트 상단에 붙이도록 하고 싶지만 작동하지 않고 이유를 알 수 없습니다.도와주시면 제 HTML과 CSS 코드를 알려드리겠습니다.

.container {
  min-height: 300vh;
}
.nav-selections {
  text-transform: uppercase;
  letter-spacing: 5px;
  font: 18px "lato",sans-serif;
  display: inline-block;
  text-decoration: none;
  color: white;
  padding: 18px;
  float: right;
  margin-left: 50px;
  transition: 1.5s;
}

.nav-selections:hover{
  transition: 1.5s;
  color: black;
}

ul {
  background-color: #B79b58;
  overflow: auto;
}

li {
  list-style-type: none;
}

<main class="container">
  <nav style="position: sticky; position: -webkit-sticky;">
    <ul align="left">
      <li><a href="#/contact" class="nav-selections" style="margin-right:35px;">Contact</a></li>
      <li><a href="#/about" class="nav-selections">About</a></li>
      <li><a href="#/products" class="nav-selections">Products</a></li>
      <li><a href="#" class="nav-selections">Home</a></li>
    </ul>
  </nav>
</main>

집합이 상요에오 예있확인니합다지는집이합로플버소위예▁((:다▁has니▁check▁overflow▁set▁if▁an합인확▁elemente▁ancestor지는있g:overflow:hidden전환을 시도합니다.예상보다 높은 DOM 트리를 검사해야 할 수도 있습니다. =).

이것은 당신에게 영향을 미칠 수 있습니다.position:sticky자손 요소로

스틱 포지셔닝은 상대 포지셔닝과 고정 포지셔닝의 혼합입니다.요소는 지정된 임계값을 초과할 때까지 상대적으로 위치가 지정된 것으로 처리되며, 이때 고정 위치로 처리됩니다.
...
1개 이상으로 . top,right,bottom또는left 스틱 포지셔닝이 예상대로 작동하도록 합니다.그렇지 않으면 상대적 위치 지정과 구별할 수 없습니다.[출처: MDN]

그래서 당신의 예에서, 당신은 그것이 마지막에 붙어야 할 위치를 정의해야 합니다.top소유물.

html, body {
  height: 200%;
}

nav {
  position: sticky;
  position: -webkit-sticky;
  top: 0; /* required */
}

.nav-selections {
  text-transform: uppercase;
  letter-spacing: 5px;
  font: 18px "lato", sans-serif;
  display: inline-block;
  text-decoration: none;
  color: white;
  padding: 18px;
  float: right;
  margin-left: 50px;
  transition: 1.5s;
}

.nav-selections:hover {
  transition: 1.5s;
  color: black;
}

ul {
  background-color: #B79b58;
  overflow: auto;
}

li {
  list-style-type: none;
}

<nav>
  <ul align="left">
    <li><a href="#/contact" class="nav-selections" style="margin-right:35px;">Contact</a></li>
    <li><a href="#/about" class="nav-selections">About</a></li>
    <li><a href="#/products" class="nav-selections">Products</a></li>
    <li><a href="#" class="nav-selections">Home</a></li>
  </ul>
</nav>

저도 같은 문제가 있는데, 여기서 답을 찾았습니다.

요소가 예상대로 고착되지 않으면 가장 먼저 확인해야 할 것은 컨테이너에 적용되는 규칙입니다.

특히 요소의 부모에 대해 설정된 오버플로 속성을 찾습니다.사용할 수 없습니다.overflow: hidden,overflow: scroll또는overflow: auto의 에.position: sticky요소

이 문제를 발견하고 스티커가 작동하지 않는 경우 - 부모를 다음으로 설정합니다.

display: unset

나를 위해 일했습니다.

몇 가지 더 알게 되었습니다.

스틱 요소가 구성 요소인 경우(각도 등)

• 선택기를 가진 , 를 들어 'sticky'라는 의 각 요소는 다음과 .<app-menu-bar>구성 요소의 CSS에 다음을 추가해야 합니다.

    :host { display: block; }     // or use flexbox
  

또는

    app-menu-bar  { display: block; }   // (in the containing component's css)

Safari on iOS in particular seems to require `display:block` even on the root element `app-root` of an angular application or it won't stick.

• DOM/된 스타일)를 에는 "" " " " " " " " " " " " " " (" "DOM/" "" " " " " " " " " " " " 을 합니다.position: sticky'선택' 선택기에 적용됩니다(예:app-menu-barposition)을해야 하며 devtools의 위치를 는 안 .div 구성 요소 내에서.Angular를 사용하면 이 작업을 수행할 수 있습니다.:host구성 요소에 대한 CSS의 선택기입니다.

    :host
    {
        position: sticky;
        display: block;   // this is the same as shown above
        top: 0;
        background: red;    
    }
  

다른.

• 고정 요소 다음에 오는 요소의 배경이 단단한 경우 아래로 미끄러지지 않도록 다음을 추가해야 합니다.

    .sticky-element { z-index: 100; }
    .parent-of-sticky-element { position: relative; }
  

• 사용 중인 경우 스틱 요소가 콘텐츠보다 앞에 있어야 합니다.top그리고 그 후에 사용한다면.bottom.

• 사용 시 문제가 발생합니다.overflow: hidden포장지 요소 - 일반적으로 내부의 끈적끈적한 요소를 제거합니다.이 질문에서 더 잘 설명할 수

• 모바일 브라우저는 화면 키보드가 보일 때 고정되거나 고정된 항목을 비활성화할 수 있습니다.정확한 규칙은 모르겠지만 키보드가 보일 때는 일종의 '창'을 창 안으로 보고 있기 때문에 실제로 보이는 화면 상단에 물건을 고정시킬 수 없습니다.

• 다음 사항이 있는지 확인합니다.

  position: sticky;

  그리고 아닌

  display: sticky;

사용 편의성 문제

• 당신의 디자인이 모바일 기기의 화면 아래에 물건을 붙이도록 요구하는 경우 주의하세요.예를 들어 iPhone X에서는 스와이프 영역(홈페이지로 돌아가기 위해)을 나타내는 좁은 선이 표시되며 이 영역 내의 요소는 클릭할 수 없습니다.그래서 당신이 무언가를 붙이면 사용자들이 그것을 활성화할 수 있도록 아이폰 X에서 테스트해야 합니다.큰 '지금 구매' 버튼은 사람들이 클릭할 수 없다면 좋지 않습니다!
• Facebook에서 광고하는 경우 Facebook의 모바일 앱 내에서 웹 페이지가 '웹 보기' 컨트롤로 표시됩니다.특히 비디오를 표시할 때(화면 하단에서 콘텐츠가 시작되는 부분만 해당), 페이지를 스크롤 가능한 뷰포트 안에 넣어 스티커 요소를 페이지 상단에서 사라지게 하여 스티커 요소를 완전히 엉망으로 만드는 경우가 많습니다.모두 다르게 행동할 수 있는 전화기의 브라우저나 심지어 페이스북의 브라우저뿐만 아니라 실제 광고의 맥락에서 테스트해야 합니다.

이것은 Mars And Back과 Miftah Mizwar의 답변의 연속입니다.

그들의 대답은 정확합니다.그러나 문제의 상위 항목을 식별하는 것은 어렵습니다.

이를 매우 간단하게 하려면 브라우저 콘솔에서 이 jQuery 스크립트를 실행하기만 하면 모든 상위 항목에 대한 오버플로 속성의 값을 알 수 있습니다.

$('.your-sticky-element').parents().filter(function() {
    console.log($(this));
    console.log($(this).css('overflow'));
    return $(this).css('overflow') === 'hidden';
});

조상이 가지고 있지 않은 경우overflow: visibleCSS를 변경하여 그렇게 합니다!

또한, 다른 곳에 언급된 바와 같이, 스틱 요소가 CSS에 이것을 가지고 있는지 확인합니다.

.your-sticky-element {
    position: sticky;
    top: 0;
}

나는 그것을 작동시키기 위해 다음의 CSS를 사용해야 했습니다.

.parent {
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
    overflow: visible;
}

.sticky {
    position: sticky;
    position: -webkit-sticky;
    top: 0;
}

만약 위가 작동하지 않는다면,

모든 조상들을 조사하고 이 요소들 중 어떤 것을 가지고 있지 않은지 확인하십시오.overflow: hidden은 이것을 로변으경합야니다해다로 바꿔야 .overflow: visible

아주 는 또다매일시인는오리나적반우른▁where▁another는오.position: sticky작동하지 않을 수도 있습니다. 부모님이.display: flex또는display: grid.

이 경우에는 스틱 위치가 작동하지만 요소가 완전히 늘어나서 볼 수 없습니다.다음을 사용하여 높이를 줄여 보십시오.align-self: baseline그러면 효과를 보실 수 있을 겁니다.

Sticky이 디스플레이를 .flex이것을 하나의 해결책으로 읽었을 때마침

플렉스 박스 요소는 기본적으로 확장되므로 모든 요소의 높이가 동일하므로 스크롤할 수 없습니다.

그래서 만약 당신이 사용한다면display: flex; 요소에 해야 할 것입니다.align-self: flex-start;도 자동으로 합니다.height: auto;

이것이 스틱 요소 클래스의 모양입니다.

.stick-ontop {
  position: -webkit-sticky !important; // for safari
  position: sticky !important;
  top: 0;
  align-self: flex-start;
  height: auto;
}

다른 방향에서 이 Q를 공격합니다.

이것이 게임이라고 상상해 보세요.Find the nearest scrolling ancestor.

<!-- sticky not working -->
<h1 style="position: sticky; top:0;">Hello World</h1>

질문:

• 1/3: 끈적끈적한 노드?<h1>.
• 2/3: 조상?<body>.
• 3/3:<body> 스롤크?FALSE=> "효과 없음".

" 있어요 ("Sticky is working") ("Sticky is working")<body> 스롤크?TRUE).

body{
  min-height: 300vh;
}

<!-- sticky working -->
<h1 style="position: sticky; top: 0;">Hello World</h1>

이것을 염두에 두고 - 여기 "hello world" "유명한" "작동하지 않는" 끈적끈적한 시나리오가 있습니다 :) 대부분의 경우는 이러한 사례 중 하나 또는 많은 것과 관련이 있습니다.

사례 1: "top" 누락(쉽게 해결할 수 있음):

작동하지 않음:

/* not working example */
aside{
  position: sticky;
  background: lightgray;
}

main{
  height: 200vh;
}

<aside>
  <h2>sticky Aside</h2>
</aside>

<main>
  <h1>Article</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui dicta minus molestiae vel beatae natus eveniet ratione temporibus aperiam harum alias officiis assumenda officia quibusdam deleniti eos cupiditate dolore doloribus!
  </p>
</main>

수정(상위 추가):

aside{
  position: sticky;
  top: 0;
}

main{
  height: 200vh;
}

<aside>
  <h2>sticky Aside</h2>
</aside>

<main>
  <h1>Article</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui dicta minus molestiae vel beatae natus eveniet ratione temporibus aperiam harum alias officiis assumenda officia quibusdam deleniti eos cupiditate dolore doloribus!
  </p>
</main>

사례 2: 고착된 노드 및 오버플로(고치기 쉬운 노드):

저는 저는끈파 "괴합을 "니다 "임적 "를 을 ".#extra-wrapper 설정을 auto-또는 -hidden-또는 -visible내용물을 삭제하지 않았습니다.

problem은 이제 가장 조상("문제는" 제장가가스조상링롤크운까이▁("▁"조문(상▁ancestor▁the링는the")입니다.#extra-wrapper스크롤 없이(스크롤 막대 끌기 옵션 없음 == "스크롤 조상 없음").

작동하지 않음:

/* not working example */
#overflow-wrapper{
  overflow: scroll;
}

aside{
  position: sticky;
  background: lightgray;
  top: 0px;
}

main{
  height: 200vh;
}

<div id="overflow-wrapper">
  <aside>
    <h2>sticky Aside</h2>
  </aside>

  <main>
    <h1>Article</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui dicta minus molestiae vel beatae natus eveniet ratione temporibus aperiam harum alias officiis assumenda officia quibusdam deleniti eos cupiditate dolore doloribus!
    </p>
  </main>
</div>

수정 - 내용을 클리핑합니다(이제 "가장 가까운 스크롤 조상").

작업:

/* not working example */
#overflow-wrapper{
  overflow: scroll;
  max-height: 60vh; /* clip the content */
}

aside{
  position: sticky;
  background: lightgray;
  top: 0px;
}

main{
  height: 200vh;
}

<div id="overflow-wrapper">
  <aside>
    <h2>sticky Aside</h2>
  </aside>

  <main>
    <h1>Article</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui dicta minus molestiae vel beatae natus eveniet ratione temporibus aperiam harum alias officiis assumenda officia quibusdam deleniti eos cupiditate dolore doloribus!
    </p>
  </main>
</div>

사례 3: "잘못된/스크롤되지 않음" 노드와 관련된 스티커(수정하기 위한 요령)

다시, 가장 가까운 스크롤 조상에 상대적인 고정 오프셋입니다.

저는 저는끈파 "괴합을 "니다 "임적 "를 을 ".#extra-wrapper에▁sticky안 거지?왜 작동하지 않습니까? 이의절정은의 .#extra-wrapper 높이aside내용(상자 모델) == "스크롤링 조상 없음" == "효과 없음"입니다.

작동하지 않음:

/* not working example */
aside{
  position: sticky;
  top: 0;
  background: lightgray;
}

main{
  height: 200vh;
}

<div id="extra-wrapper">
  <aside>
    <h2>sticky Aside</h2>
  </aside>
</div>

<main>
  <h1>Article</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui dicta minus molestiae vel beatae natus eveniet ratione temporibus aperiam harum alias officiis assumenda officia quibusdam deleniti eos cupiditate dolore doloribus!
  </p>
</main>

이것이 정말로 "발생"하는 것입니다(높이를 추가했습니다).#extra-wrapper):

#extra-wrapper{
  background: lightgray;
  height: 40vh;
}
aside{
  position: sticky;
  top: 0;
}

main{
  height: 200vh;
}

<div id="extra-wrapper">
  <aside>
    <h2>sticky Aside</h2>
  </aside>
</div>

<main>
  <h1>Article</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui dicta minus molestiae vel beatae natus eveniet ratione temporibus aperiam harum alias officiis assumenda officia quibusdam deleniti eos cupiditate dolore doloribus!
  </p>
</main>

픽스: 스틱 노드를 변경합니다.

#extra-wrapper{
  position: sticky;
  top: 0;
}
aside{

}

#layout{
  displ
}
main{
height: 200vh;
}

<div id="extra-wrapper">
  <aside>
    <h2>sticky Aside</h2>
  </aside>
</div>

<main>
  <h1>Article</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui dicta minus molestiae vel beatae natus eveniet ratione temporibus aperiam harum alias officiis assumenda officia quibusdam deleniti eos cupiditate dolore doloribus!
  </p>
</main>

사례 4: 디스플레이: 플렉스박스/그리드 레이아웃 - 청각장애인에 의한 고른 콜(고치기 요령)

flexlayout을 중 를 flex/grid로 합니다.sticky기본적으로 콜의 높이는 짝수 = "조상"의 높이(아래쪽) == 콜의 높이 = 스크롤 효과 없음입니다.

작동하지 않음:

#extra-wrapper{
  position: sticky;
  top: 0;
  border: 1px solid red;
}
aside{

}

#layout{
  display: flex;
}
main{
height: 200vh;
}

<div id="layout">
  <div id="extra-wrapper">
    <aside>
      <h2>sticky Aside</h2>
    </aside>
  </div>

  <main>
    <h1>Article</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui dicta minus molestiae vel beatae natus eveniet ratione temporibus aperiam harum alias officiis assumenda officia quibusdam deleniti eos cupiditate dolore doloribus!
    </p>
  </main>
</div>

픽스: 끈적끈적한 부분은 따로 둡니다.max-height되려고90vh예를 들어 (이제 콜 높이가 짝수가 아닙니다.)

작업:

#extra-wrapper{
  position: sticky;
  top: 0;
  border: 1px solid red;
  max-height: 90vh;
}
aside{

}

#layout{
  display: flex;
}
main{
height: 200vh;
}

<div id="layout">
  <div id="extra-wrapper">
    <aside>
      <h2>sticky Aside</h2>
    </aside>
  </div>

  <main>
    <h1>Article</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui dicta minus molestiae vel beatae natus eveniet ratione temporibus aperiam harum alias officiis assumenda officia quibusdam deleniti eos cupiditate dolore doloribus!
    </p>
  </main>
</div>

붙여야 할 네비바는 다른 콘텐츠가 있는 디바 섹션 안에 있으면 안 되는 것 같습니다.나비바가 다른 탑바와 공유하는 디브에서 나비바를 꺼낼 때까지 어떤 해결책도 나에게 효과가 없었습니다.나는 이전에 공통 디브로 포장된 탑바와 나브바를 가지고 있었습니다.

이미 답변이 끝난 것처럼 보이지만, 특정 사례에 부딪혔고, 대부분의 답변이 요점을 벗어났다고 생각합니다.

그overflow:hidden답변은 사례의 90%를 차지합니다.그것은 다소 "스티키 네비" 시나리오입니다.

그러나 끈적거리는 동작은 용기 높이 내에서 사용하는 것이 가장 좋습니다.웹 사이트의 오른쪽 열에 있는 뉴스레터 양식이 페이지와 함께 아래로 스크롤된다고 생각해 보십시오.고정 요소가 컨테이너의 유일한 자식인 경우 컨테이너의 크기가 동일하며 스크롤할 공간이 없습니다.

컨테이너는 요소가 스크롤될 것으로 예상되는 높이여야 합니다.내 "오른쪽 열" 시나리오에서 왼쪽 열의 높이입니다.이를 달성하는 가장 좋은 방법은 다음을 사용하는 것입니다.display:table-cell종대에만약 당신이 할 수 없고, 그리고 그것에 갇혀 있다면.float:right그리고 저처럼 자바스크립트로 계산할 때 왼쪽 열 높이를 추측해야 합니다.

너무 늦었다는 거 알아요.하지만 오버플로나 디스플레이를 사용하더라도 해결책을 찾았습니다: flex in parent elements sticky는 작동합니다.

단계:

1. 스티커를 설정할 요소에 대한 부모 요소를 만듭니다(생성된 요소가 본문 또는 전체 너비 및 전체 높이 부모에 상대적인지 확인합니다).

2. 다음 스타일을 상위 요소에 추가합니다.

   위치: 절대; 높이: 100mx; }

3. 스티커 요소의 경우 페이지의 모든 요소보다 높은 z-index를 추가해야 합니다.

바로 그거야!이제 작동해야 합니다.안부 전해요

1.요소의 부모 중 하나에서 오버플로가 숨김, 스크롤 또는 자동으로 설정된 경우에는 대부분 위치 고정이 작동하지 않습니다.

2. 부모 요소의 높이가 설정된 경우 위치 고정이 올바르게 작동하지 않을 수 있습니다.

: 에서: 적도에 70어크롬는서순간웃긴은않지에나명분하게에▁funny▁chrome.position: stickyDevTools를 사용하여 설정한 경우에는 적용되지 않습니다.

저는 이것이 오래된 게시물이라는 것을 압니다.하지만 저와 같은 사람이 최근에 위치를 만지작거리기 시작한다면, 끈적끈적한 것은 유용할 수 있습니다.

저의 경우, 저는 그리드 아이템처럼 끈적끈적한 위치를 사용하고 있었습니다.: 에 overflow-x:입니다.html가 그 잘 했습니다.제가 그 부동산을 제거하자마자 잘 작동했습니다.: 은(으) 은(으)body요소가 효과가 있는 것처럼 보였습니다, 왜 그런지는 아직 모릅니다.

내 의견에서:

position:sticky 어디에 붙어야 할지 알려줄 좌표가 필요합니다.

nav {
  position: sticky;
  top: 0;
}

.nav-selections {
  text-transform: uppercase;
  letter-spacing: 5px;
  font: 18px "lato", sans-serif;
  display: inline-block;
  text-decoration: none;
  color: white;
  padding: 18px;
  float: right;
  margin-left: 50px;
  transition: 1.5s;
}

.nav-selections:hover {
  transition: 1.5s;
  color: black;
}

ul {
  background-color: #B79b58;
  overflow: auto;
}

li {
  list-style-type: none;
}

body {
  height: 200vh;
}

<nav>
  <ul align="left">
    <li><a href="#/contact" class="nav-selections" style="margin-right:35px;">Contact</a></li>
    <li><a href="#/about" class="nav-selections">About</a></li>
    <li><a href="#/products" class="nav-selections">Products</a></li>
    <li><a href="#" class="nav-selections">Home</a></li>
  </ul>
</nav>

FF와 Chrome 이외의 브라우저에 사용할 수 있는 폴리필이 있습니다.이것은 브라우저를 통해 언제든지 구현할 수 있거나 구현할 수 없는 실험 규칙입니다.크롬은 몇 년 전에 그것을 추가했다가 떨어뜨렸어요, 다시 돌아온 것 같아요... 하지만 얼마나 오랫동안요?

가장 가까운 것은 위치입니다. 만약 당신이 이것을 자바스크립트 스크립트로 바꾸고 싶다면, 스틱 포인트에 도달하면 스크롤하는 동안 상대 + 좌표가 업데이트됩니다.

여기 두 가지 대답이 있습니다.

1. 거한제를 합니다.overflow의 body꼬리표를 달다

2. 트height: 100%에▁body의 하기 위해overflow-y: auto

min-height: 100% ▁of 대신 일하지 않는height: 100%

나는 이 기사가 어떻게 하는지에 대해 많은 것을 말해준다고 믿습니다.sticky작동하다

CSS Position Sticky 정말 작동하는 방법! CSS Position Sticky는 두 가지 주요 부분으로 구성되어 있습니다.

Sticky Item —은 Sticky style이라는 위치로 정의한 요소입니다.뷰포트 위치가 위치 정의와 일치하면 요소가 플로팅됩니다. 예를 들어 다음과 같습니다.top: 0px.

스티커 컨테이너 - 스티커 항목을 감싸는 HTML 요소입니다.이것은 끈적끈적한 물건이 뜰 수 있는 최대 면적입니다.

위치: 스틱을 사용하여 요소를 정의하면 부모 요소가 스틱 컨테이너로 자동으로 정의됩니다!

z-index또한 매우 중요합니다.가끔은 효과가 있겠지만 당신은 그것을 보지 못할 것입니다.만약을 위해 아주 높은 수치로 설정해 보세요.또한항넣마지오십시상오마▁put를 넣지 마세요.top: 0하지만 도구 모음 아래 어딘가에 숨겨져 있을 경우에는 더 높은 것을 시도해 보십시오.

스틱 요소의 실제 동작은 다음과 같습니다.

• 우선 그것은 잠시 동안 상대적입니다.
• 그러면 그것은 잠시 동안 고정됩니다.
• 마침내, 그것은 시야에서 사라집니다.

고정 위치 요소는 해당 포함 블록이 해당 흐름 루트(또는 해당 요소가 스크롤하는 컨테이너) 내에서 지정된 임계값(예: 자동이 아닌 값으로 상단 설정)을 초과할 때까지 상대적으로 위치가 지정된 것으로 처리되며, 이 시점에서 해당 요소는 해당 포함 블록의 반대쪽 가장자리를 충족할 때까지 "고정"으로 처리됩니다.

요소는 문서의 일반적인 흐름에 따라 배치된 다음 테이블 관련 요소를 포함하여 가장 가까운 스크롤 상위 항목 및 포함 블록(가장 가까운 블록 수준 상위 항목)을 기준으로 위쪽, 오른쪽, 아래쪽 및 왼쪽 값을 기준으로 오프셋됩니다.오프셋은 다른 요소의 위치에 영향을 주지 않습니다.

이 값은 항상 새 스택 컨텍스트를 만듭니다.스티커 요소는 "스크롤 메커니즘"(오버플로가 숨겨져 있을 때 생성됨, 스크롤, 자동 또는 오버레이)이 있는 가장 가까운 상위 항목에 "붙여" 있습니다. 해당 상위 항목이 실제로 스크롤되는 상위 항목이 아닐 경우에도 마찬가지입니다.

이 예제는 다음을 이해하는 데 도움이 됩니다.

code https://codepen.io/darylljann/pen/PpjwPM

이 블로그(https://www.designcise.com/web/tutorial/how-to-fix-issues-with-css-position-sticky-not-working) 의 전략을 사용하여 페이지의 모든 구성 요소를 제어할 수 없는 사람들을 위한 옵션을 생각해냈습니다.

Angular를 사용하고 있으며 ngOnInit 메서드에서 이 코드를 실행하여 부모의 표시 속성을 visible로 변경합니다.

/**
 * position: sticky
 * only works if all parent components are visibile
 */
let parent = document.querySelector('.sticky').parentElement;
while (parent) {
  const hasOverflow = getComputedStyle(parent).overflow;
  if (hasOverflow !== 'visible') {
    parent.style.overflow = 'visible';
    // console.log(hasOverflow, parent);
  }
  parent = parent.parentElement;
}

스틱 요소의 상위/상위에 다음과 같은 오버플로 속성이 설정된 경우 위치: 스틱은 작동하지 않습니다(오버플로 컨테이너에 높이를 지정하지 않는 한).

• 오버플로: 숨김
• 오버플로: 스크롤
• 오버플로: 자동

오버플로 속성 집합이 있는 부모를 확인하는 코드 조각:

let parent = document.querySelector('.sticky').parentElement;

while (parent) {
    const hasOverflow = getComputedStyle(parent).overflow;
    if (hasOverflow !== 'visible') {
        console.log(hasOverflow, parent);
    }
    parent = parent.parentElement;
}

이 기사에는 다른 방법들이 있지만, 이 방법은 저에게 효과가 있었습니다. 저는 애니메이션 라이브러리를 사용했고 부모 요소에 오버플로를 추가했습니다. 저도 모르게 숨겨진 속성, 끈적임이 작동하지 않게 하는 것입니다.

인용 출처: https://www.designcise.com/web/tutorial/how-to-fix-issues-with-css-position-sticky-not-working

이 문제에 직면한 후에 나의 2센트를 추가하는 것:플렉스 포장지로 사이드바에 스틱 위치를 추가하고 있었습니다.

1. 추가position: sticky충분하지 않습니다. 해야 합니다.top또는bottom 다른 auto일하기 위해
2. position: sticky; top: 0;충분하지 않았어요, 저는 예전에.overflow: hidden부모님께 (음, 더 정확하게 말하자면 내 사이드바의 부모님의 부모님께)
3. position: sticky; top: 0;가 되는 문제를 합니다.overflow: hidden충분하지 않았습니다. 제 플렉스 컨테이너는 필요했습니다.align-items: flex-start플렉스 컨텍스트에서 상위 항목의 맨 위에 쌓이지 않은 플렉스 항목이 스틱 요소로 작동하지 않아야 한다는 것은 의미가 있습니다.

그것은 다른 모든 대답들의 요약일 뿐입니다.

빈 그리드 영역을 주의하십시오!

제 경우에는 다음과 같은 것이 있었습니다.

.cart-areas {
    grid-template-columns: 2fr 0.2fr 1.5fr;
    grid-template-areas:
      'order . summary'
      'order . .'
      'order . .';
}

나는 그것을 원했습니다.summary사용자가 체크아웃 양식을 완료할 때 고정될 그리드 항목입니다.그것들 때문에 작동하지 않았습니다.empty grid items(으)로 되어 있습니다.).

해결책은 다음과 같은 빈 항목을 삭제하는 것이었습니다.

.cart-areas {
    grid-template-columns: 2fr 0.2fr 1.5fr;
    grid-template-areas:
      'order . summary'
      'order . summary'
      'order . summary';
}

day74의 수정이 작동하지 않으면 상위 요소에 높이가 있는지 확인합니다.

저 같은 경우에는 두 명의 아이가 있었는데, 하나는 왼쪽, 하나는 오른쪽에 떠 있었습니다.나는 오른쪽 부유물이 끈적거리기를 원했지만 추가해야 했습니다.<div style="clear: both;"></div>부모 끝에 높이를 부여합니다.

JS 솔루션을 사용했습니다.파이어폭스와 크롬에서 작동합니다.무슨 문제가 있으면 제게 알려주세요.

html

<body>
  <header id="header">
    <h1>Extra-Long Page Heading That Wraps</h1>
    <nav id="nav">
      <ul>
        <li><a href="" title="">Home</a></li>
        <li><a href="" title="">Page 2</a></li>
        <li><a href="" title="">Page 3</a></li>
      </ul>
    </nav>
  </header>
  <main>
    <p><!-- ridiculously long content --></p>
  </main>
  <footer>
    <p>FOOTER CONTENT</p>
  </footer>
  <script src="navbar.js" type="text/javascript"></script>
</body>

CSS

nav a {
    background: #aaa;
    font-size: 1.2rem;
    text-decoration: none;
    padding: 10px;
}

nav a:hover {
    background: #bbb;
}

nav li {
    background: #aaa;
    padding: 10px 0;

}

nav ul  {
    background: #aaa;
    list-style-type: none;
    margin: 0;
    padding: 0;

}

@media (min-width: 768px) {

    nav ul {
        display: flex;
    }
}

제이에스

function applyNavbarSticky() {
    let header = document.querySelector('body > header:first-child')
    let navbar = document.querySelector('nav')
    header.style.position = 'sticky'

    function setTop() {
        let headerHeight = header.clientHeight
        let navbarHeight = navbar.clientHeight
        let styleTop = navbarHeight - headerHeight

        header.style.top = `${styleTop}px`
    }

    setTop()

    window.onresize = function () {
        setTop()
    }
}

이게 날 넘어뜨리려고 했던...저의 스틱 디브는 다른 디브 안에 있었습니다. 그래서 부모 디브는 스틱 디브 다음에 추가 콘텐츠가 필요했습니다. 스틱 디브가 스크롤을 내릴 때 다른 콘텐츠를 "슬라이드"할 수 있도록 "키가 충분히 큰" 부모 디브를 만들기 위해서입니다.

그래서 저의 경우, 끈적끈적한 디브 직후에, 저는 다음과 같이 덧붙여야 했습니다.

    %div{style:"height:600px;"} 
       

(애플리케이션에는 왼쪽에 "높이가 큰" 이미지가 있고 오른쪽에 짧은 데이터 입력 양식이 있는 두 개의 병렬 디브가 있습니다. 스크롤을 내릴 때 데이터 입력 양식이 이미지 옆에 뜨기를 원했기 때문에 양식이 항상 화면에 표시됩니다.위의 "추가 콘텐츠"를 추가할 때까지 작동하지 않아서 끈적끈적한 디브는 "슬라이드"할 것이 있습니다.

저도 같은 문제가 있었습니다.저에게 문제는 큰 화면(미디어 쿼리)의 '없음'과 스마트폰의 '초기'입니다.만약 내가 디스플레이 CSS 속성을 제거하고 불투명도와 포인터 이벤트를 데스크톱에 추가하지 않았다면 모든 것이 해결되었습니다.

이 페이지 전체를 읽고 주방 싱크대를 제외한 모든 것을 시도했음에도 불구하고 제 모바일 기기에서는 이것이 작동하지 않습니다.끈적끈적한 행동은 전혀 없습니다. 그리고 그것이 제가 일할 수 있는 유일한 장소입니다.이 화면 너비에 대해 이 기능이 작동하지 않도록 하는 특별한 지정이나 재정의는 제외했습니다.테스트로 모바일 포맷 코드를 지웠지만 변경 사항이 없습니다.노트북의 Chrome 브라우저에서 완벽하게 작동하고 새 S10의 Chrome 브라우저에서는 전혀 작동하지 않습니다.

언급URL : https://stackoverflow.com/questions/43707076/how-does-the-position-sticky-property-work