CODEWITHSUNDEEP
javascriptcsssemantic-uisticky
osbert
osbert

Reputation: 51

Semantic-ui, sticky on outer container

I'm trying to achieve full width background container wrappers combined with a sticky element.

This diagram shows the layout I wish to achieve:

enter image description here
And here's a pen showing how I've laid it out so far: https://codepen.io/othbert/pen/PJMwPm

$('[data-make-sticky-to]').sticky({
  context: $('[data-make-sticky-to]').data('makeStickyTo')
})

The issue I have appears to be that the immediate container of the sticky element has it's height set to allow the sticky to move inside of it.

In order to allow full width background wrappers but keep the center aligned content, I am using the structure: full-width-wrapper > container grid > 2 column layout.

I thought to set an outermost unstyled container, #sticky-c, in order to allow the sticky to move inside that context rather than the immediate grid, but instead, the height needed for the sticky to move is applied to the containing grid.

All these sections should have a dynamic height so I can't just force the grid to stay a certain height unfortunately. Not without calculating and setting it in JS, but this seems like something semantic should be able to do out of the box.

Any ideas?

Upvotes: 1

Views: 2540

Answers (1)

osbert
osbert

Reputation: 51

I was thinking about this all wrong.

To fix, I set the column with the sticky in, to position: relative. Then I added another containing div directly around the sticky with position: absolute.

The sticky flows within the absolute container that has its height set by semantic. The position is set correctly as it's based upon the relative parent surrounding it.

And that's all there is to it.

Updated codepen: https://codepen.io/othbert/pen/MOWBja

...
<div class="three wide left floated column sticky-relative">
  <div class="sticky-absolute">
    <div class="ui sticky segment" data-make-sticky-to="#sticky-c">

      STICKY CONTENT

    </div>
  </div>
</div>
...

and the SCSS...

.sticky {
  &-relative {
    position: relative;
  }
  &-absolute {
    position: absolute;
  }
}

Upvotes: 1

Related Questions