Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Jesse Thompson
Jesse Thompson
10,684 Points

Hey! Please help me with my css "position: sticky" problem. Maybe other people have this problem as well.

So I am having an issue with the "position: sticky" css property. And I have looked around on the internet but for some reason the solutions do not work for me.

I have a ul that I want to stay in a sticky position once it gets to the edge of the viewport but it is not functioning as intended.

If anyone has experience with position sticky please advise. It would be greatly appreciated.

The styles that are applied to the element are below:

```CSS style.css?version=1.1257:1083 .list-selection { position: sticky; max-width: 221px; padding-right: 15px; margin-bottom: 0; top: 20px; }

Here are the inherited styles that ARE NOT greyed out in the styles console:

```CSS
style.css?version=1.1257:31
ol, ul {
    list-style: none;
}
normalize.css:437
ol, ul {
    margin: 0;
    padding: 0;
}
style.css?version=1.1257:25
* {
    box-sizing: border-box;
}
user agent stylesheet
ul, menu, dir {
    display: block;
    -webkit-margin-before: 1em;
    -webkit-margin-after: 1em;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
    -webkit-padding-start: 40px;
}
Inherited from div.video-menu-link
style.css?version=1.1257:1073
.video-menu-link {
    text-align: left;
}
Inherited from div.desktop-content-container.visible.invisible.fadeIn
style.css?version=1.1257:1018
.fadeIn {
    -webkit-animation: fadeIn 1.3s;
    animation: fadeIn 1.3s;
    visibility: visible !important;
}

1 Answer

Jake Salo
Jake Salo
13,175 Points
Jake Salo
Jake Salo
13,175 Points

Could possibly be a browser compatibility issue. Not all browsers support these newer features of CSS3.

Try adding in other variations of the value. E.g.

  position: -webkit-sticky;
  position: sticky;