Sticky Element is full length of the page

  • Resolved hgabender

    (@hgabender)


    6 years, 5 months ago

    Hello, when I scroll down the page the element I have set to sticky is the whole height of the page. How can that be changed?

    Thanks in advance.

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)

  • This is because of this part in your CSS:

    .header .header-aside {
    background: #a8071f;
    position: relative;
    width: 19.23%;
    float: right;
    height: 100%;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex-grow: 0;
    padding: 0 20px 0 65px;
}

    Setting the height to 100% is what causes this, so if you change that, you should be all set.

    Thread Starter hgabender

    (@hgabender)

    Thanks Mark, that did the trick. Is there a way to shrink it’s size when scrolling down?

    Thread Starter hgabender

    (@hgabender)

    Also on mobile the element floats but is behind text on the page. Can that be fixed.

    Is there a way to shrink it’s size when scrolling down?

    You can change the styles for the element between the sticky and non-sticky state. Check out the section “Is it possible to add some styles to the element but only when it’s sticky?” in the FAQ.

    Also on mobile the element floats but is behind text on the page. Can that be fixed.

    I’m not seeing that right away. On which page(s) does this occur?

    • This reply was modified 6 years, 4 months ago by Senff - a11n.
Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Sticky Element is full length of the page’ is closed to new replies.