“포지션 : 스티키;”

“포지션 : 스티키;” 작동하지 않는 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요소입니다.

---

내가 겪은 몇 가지 더 :

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

• If the 'sticky' element itself is a component with a custom element-selector, such as an angular component named <app-menu-bar> you will need to add the following to the component's css:

  :host { display: block; }   
  

  or

  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.

• If you are creating a component and defining the css inside the component (shadow DOM / encapsulated styles), make sure the position: sticky is being applied to the 'outer' selector (eg. app-menu-bar in devtools should show the sticky position) and not a top level div within the component. With Angular, this can be achieved with the :host selector in the css for your component.

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

Other

• If the element following your sticky element has a solid background, you must add the following to stop it from sliding underneath:

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

• Your sticky element must be first (before your content) if using top and after it if using bottom.

• There are complications when using overflow: hidden on your wrapper element – in general it will kill the sticky element inside. Better explained in this question

• Mobile browsers may disable sticky/fixed positioned items when the onscreen keyboard is visible. I'm not sure of the exact rules (does anybody ever know) but when the keyboard is visible you're looking at a sort of 'window' into the window and you won't easily be able to get things to stick to the actual visible top of the screen.

• Make sure you have:

  position: sticky;

  and not

  display: sticky;

Misc usability concerns

• Be cautious if your design calls for for sticking things to the bottom of the screen on mobile devices. On iPhone X for instance they display a narrow line to indicate the swipe region (to get back to the homepage) - and elements inside this region aren't clickable. So if you stick something there be sure to test on iPhone X that users can activate it. A big 'Buy Now' button is no good if people can't click it!
• If you're advertising on Facebook the webpage is displayed in a 'webview' control within Facebook's mobile apps. Especially when displaying video (where your content begins in the bottom half of the screen only) - they often completely mess up sticky elements by putting your page within a scrollable viewport that actually allows your sticky elements to disappear off the top of the page. Be sure to test in the context of an actual ad and not just in the phone's browser or even Facebook's browser which can all behave differently.

---

This is a continuation of the answers from MarsAndBack and Miftah Mizwar.

Their answers are correct. However, it is difficult to identify the problem ancestor(s).

To make this very simple, simply run this jQuery script in your browser console and it will tell you the value of the overflow property on every ancestor.

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

Where an ancestor does not have overflow: visible change its CSS so that it does!

Also, as stated elsewhere, make sure your sticky element has this in the CSS:

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

---

I had to use the following CSS to get it working:

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

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

If above dosen't work then...

Go through all ancestors and make sure none of these elements have overflow: hidden. You have to change this to overflow: visible

---

from my comment:

position:sticky needs a coordonate to tel where to stick

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>

There is polyfill to use for other browsers than FF and Chrome . This is an experimental rules that can be implemented or not at any time through browsers. Chrome add it a couple of years ago and then dropped it, it seems back ... but for how long ?

The closest would be position:relative + coordonates updated while scrolling once reached the sticky point, if you want to turn this into a javascript script

---

It seems like that the navbar to be stickied shouldn't be inside any div or section with other content. None of the solution were working for me until I took the navbar out of the div which the navbar shared with another topbar .I previously had topbar and navbar wrapped with a common div.

---

I know this is an old post. But if there's someone like me that just recently started messing around with position: sticky this can be useful.

In my case i was using position: sticky as a grid-item. It was not working and the problem was an overflow-x: hidden on the html element. As soon as i removed that property it worked fine. Having overflow-x: hidden on the body element seemed to work tho, no idea why yet.

---

Funny moment that wasn't obvious for me: at least in Chrome 70 position: sticky is not applied if you've set it using DevTools.

---

two answer here:

1. remove overflow property from body tag

2. set height: 100% to the body to fix the problem with overflow-y: auto

min-height: 100% not-working instead of height: 100%

---

I believe this article say a lot about how sticky works

How CSS Position Sticky Really Works! CSS position sticky has two main parts, sticky item & sticky container.

Sticky Item — is the element that we defined with the position: sticky styles. The element will float when the viewport position matches the position definition, for example: top: 0px .

Sticky Container —is the HTML element which wraps the sticky item. This is the maximum area that the sticky item can float in.

When you define an element with position: sticky you’re automatically defining the parent element as a sticky container!

---

It's TRUE that the overflow needs to be removed or set to initial to make position: sticky works on the child element. I used Material Design in my Angular app and found out that some Material components changed the overflow value. The fix for my scenario is

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

---

if danday74's fix doesn't work, check that the parent element has a height.

In my case I had two childs, one floating left and one floating right. I wanted the right floating one to become sticky but had to add a <div style="clear: both;"></div> at the end of the parent, to give it height.

참고URL : https://stackoverflow.com/questions/43707076/position-sticky-not-working-css-and-html