“포지션 : 스티키;” 작동하지 않는 CSS 및 HTML

탐색 막대를 스크롤하면 맨 위에 고정하고 싶지만 작동하지 않으며 이유가 없습니다. 도움을 줄 수 있다면 다음은 HTML 및 CSS 코드입니다.

.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 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>

고정 위치는 상대 위치와 고정 위치의 하이브리드입니다. 요소는 지정된 임계 값을 초과 할 때까지 상대적 위치로 처리되며,이 시점에서 고정 위치로 처리됩니다.
...
당신은 적어도 하나 임계 값을 지정해야합니다 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. 토글 해보세요. =)보다 DOM 트리를 위로 올라 가야 할 수도 있습니다.

이것은 position:sticky하위 요소에 영향을 줄 수 있습니다 .

나는 같은 문제가 있으며 여기서 답을 찾았습니다 .

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

특히, 상위에 설정된 오버 플로우 특성을 찾으십시오. 당신은 사용할 수 없습니다 : overflow: hidden, overflow: scroll또는 overflow: autoa의 부모에 대한 position: sticky요소입니다.

내가 겪은 몇 가지 더 :

끈적 끈적한 요소가 구성 요소 (각도 등) 인 경우

• 'sticky'요소 자체가 이름 <app-menu-bar>이 지정된 각도 구성 요소와 같은 사용자 정의 요소 선택기가있는 구성 요소 인 경우 구성 요소의 CSS에 다음을 추가해야합니다.

  :host { display: block; }   

  또는

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

  iOS의 Safari는 특히 각도 응용 프로그램 display:block의 루트 요소에서도 필요 app-root하거나 보이지 않습니다.

• 구성 요소를 만들고 구성 요소 내부에 CSS를 정의하는 경우 (그림자 DOM / 캡슐화 스타일) 내부 가 최상위 레벨이 아닌 position: sticky'외부'선택기에 적용 되는지 확인하십시오 (예 : app-menu-bardevtools에서 고정 위치를 표시해야 함) 구성 요소. Angular를 사용하면 구성 요소에 대한 CSS 의 선택기를 사용 하여이 작업을 수행 할 수 있습니다 .div :host

  :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에서는 스 와이프 영역 (홈페이지로 돌아 가기)을 나타내는 좁은 선이 표시되며이 영역 내부의 요소는 클릭 할 수 없습니다. 따라서 무언가를 고수하면 iPhone X에서 사용자가 활성화 할 수 있는지 테스트해야합니다. 사람들이 클릭 할 수 없으면 큰 '지금 구매'버튼이 좋지 않습니다!
• Facebook에 광고하는 경우 웹 페이지가 Facebook 모바일 앱의 '웹뷰'컨트롤에 표시됩니다. 특히 비디오를 표시 할 때 (화면 하단에서 내용이 시작되는 부분 만 해당)-스크롤 가능한 뷰포트 내에 페이지를 배치하여 고정 요소가 실제로 페이지 상단에서 사라지도록하여 고정 요소를 완전히 엉망으로 만듭니다. 휴대 전화의 브라우저 나 Facebook의 브라우저가 아닌 실제 광고 환경에서 모두 다르게 작동하는지 테스트해야합니다.

MarsAndBack과 Miftah Mizwar의 답변이 이어졌습니다.

그들의 대답은 맞습니다. 그러나 문제의 조상을 식별하기는 어렵습니다.

이 작업을 매우 간단하게하려면 브라우저 콘솔에서이 jQuery 스크립트를 실행하면 모든 조상에서 overflow 속성 값을 알려줍니다.

$('.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

이 문제가 발생하고 끈적 거리지 않은 경우 부모를 다음과 같이 설정하십시오.

display: unset

나를 위해 일했다

나에게 분명하지 않은 재미있는 순간 : position: stickyDevTools를 사용하여 설정 한 경우 Chrome 70 이상 이 적용되지 않습니다.

고정 된 탐색 모음이 다른 콘텐츠가있는 div 또는 섹션 안에 있으면 안됩니다. navbar가 다른 topbar와 공유 한 div에서 navbar를 가져 오기 전까지는 해결책이 없었습니다. 이전에 topbar와 navbar가 공통 div로 래핑되었습니다.

내 의견에서 :

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 이외의 다른 브라우저에 사용할 polyfill이 있습니다. 이것은 브라우저를 통해 언제든지 구현할 수있는 실험적인 규칙입니다. 크롬은 몇 년 전에 그것을 추가 한 다음 떨어 뜨렸다.

가장 가까운 위치는 위치 : 상대 + 스크롤을 한 번 고정 지점에 도달하는 동안 업데이트하는 동안 업데이트합니다.이를 자바 스크립트로 바꾸려면

나는 이것이 이미 답변 된 것처럼 보이지만 특정 사례에 부딪 쳤으며 대부분의 답변이 요점을 놓친다고 생각합니다.

overflow:hidden답변 사례의 90 %를 커버한다. 그것은 "sticky nav"시나리오입니다.

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

컨테이너는 요소가 스크롤되는 높이 여야합니다. 내 "오른쪽 열"시나리오에서 왼쪽 열의 높이는 어느 것입니까? 이를 달성하는 가장 좋은 방법 display:table-cell은 컬럼 에서 사용 하는 것입니다. 당신이 할 수없고 붙어 있고 float:right나처럼 그런 경우 Javascript로 계산할 때 왼쪽 열 높이를 추측해야합니다.

나는 이것이 오래된 게시물이라는 것을 알고 있습니다. 그러나 최근에 최근에 위치를 어지럽히 기 시작한 누군가가 있다면 끈적 거리면 이것이 유용 할 수 있습니다.

제 경우에는 position : sticky를 그리드 항목으로 사용했습니다. 작동하지 않았으며 문제는 overflow-x였습니다 html. 요소에 숨겨져 있습니다 . 해당 속성을 제거하자마자 제대로 작동했습니다. overflow-x : body요소에 숨겨져있는 것은 아직 효과가 없었습니다.

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

1. 태그 overflow에서 속성 제거body

2. 설정 height: 100%받는 사람 body과 문제를 해결하기 위해overflow-y: auto

min-height: 100% 대신에 작동하지 않음 height: 100%

나는 이 기사 가 어떻게 sticky작동 하는지에 대해 많이 말합니다.

CSS Position Sticky가 실제로 작동하는 방법! CSS position sticky에는 sticky item & sticky container의 두 가지 주요 부분이 있습니다 .

Sticky Item  — 우리가 position : sticky styles로 정의한 요소입니다. 뷰포트 위치가 위치 정의와 일치하면 요소가 플로팅됩니다 (예 :) top: 0px.

고정 컨테이너 — 고정 항목을 감싸는 HTML 요소입니다. 끈적 거리는 항목이 뜰 수있는 최대 영역입니다.

position : sticky로 요소를 정의하면 부모 요소를 스티커 컨테이너로 자동 정의합니다!

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

• 먼저 그것은 한동안 상대적입니다
• 그런 다음 잠시 고정됩니다
• 마지막으로보기에서 사라집니다.

고정 위치 요소는 포함 블록이 플로우 루트 (또는 스크롤되는 컨테이너) 내에서 지정된 임계 값 (예 : 자동이 아닌 다른 값으로 설정)과 교차 할 때까지 상대적으로 배치 된 것으로 간주됩니다. 포함 블록의 반대쪽 모서리를 만날 때까지 "

요소는 문서의 일반적인 흐름에 따라 배치 된 다음 가장 가까운 스크롤 조상과 테이블 관련 요소를 포함하여 포함 된 블록 (가장 가까운 블록 레벨 조상)을 기준으로 상하, 우, 하, 그리고 왼쪽. 오프셋은 다른 요소의 위치에 영향을 미치지 않습니다.

이 값은 항상 새로운 스태킹 컨텍스트를 만듭니다. 스티커 요소는 조상이 실제로 가장 가까운 조상이 아니더라도 "스크롤 메커니즘"(오버플로가 숨겨져 있거나 스크롤되거나 자동 또는 오버레이 될 때 생성됨)이있는 가장 가까운 조상에 고정됩니다.

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

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

danday74의 수정 프로그램이 작동하지 않으면 상위 요소의 높이를 확인하십시오.

제 경우에는 두 명의 자녀가있었습니다. 하나는 떠 다니고 다른 하나는 떠 있습니다. 나는 오른쪽에 떠있는 것을 끈적 거리게하고 싶었지만 <div style="clear: both;"></div>부모의 끝에 높이 를 추가하기 위해을 추가 해야했습니다.

JS 솔루션을 사용했습니다. Firefox 및 Chrome에서 작동합니다. 문제가 있으면 알려주세요.

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;
    }
}

js

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()
    }
}

z-index또한 매우 중요합니다. 때때로 그것은 작동하지만 당신은 그것을 보지 못할 것입니다. 확실하게하기 위해 매우 높은 숫자로 설정하십시오. 또한 top: 0(도구 모음 아래) 어딘가에 숨겨져있는 경우를 대비하여 항상 더 높이 올려 놓지 마십시오 .

여기 저를 트립하고있는 것이 있습니다 ... 내 끈적 끈적한 div가 다른 div 안에 있었기 때문에 부모 div는 끈적 끈적한 div 뒤에 추가 내용이 필요했습니다. 아래로 스크롤합니다.

따라서 내 경우에는 고정 div 직후에 다음을 추가해야했습니다.

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

(응용 프로그램에는 왼쪽에 "높은"이미지가 있고 오른쪽에 짧은 데이터 입력 양식이있는 두 개의 나란한 div가 있으며 아래로 스크롤 할 때 이미지 옆에 데이터 입력 양식이 플로팅되기를 원했습니다. 위의 "추가 콘텐츠"를 추가하기 전에는 양식이 항상 화면에 표시됩니다.

그것은 사실입니다 overflow요구 사항을 제거하거나 설정할 수 initial있도록 position: sticky자식 요소에 작품. Angular 앱에서 머티리얼 디자인을 사용하고 일부 머티리얼 컴포넌트가 overflow값을 변경 한 것을 발견했습니다 . 내 시나리오의 수정은

mat-sidenav-container, mat-sidenav-content {
  overflow: initial;
}