CODEWITHSUNDEEP
htmlcssflexboxpositionsticky
mil_somn
mil_somn

Reputation: 1

Position: sticky not behaving as expected in flex row

I have a pretty basic wiki layout, with a navigation bar and article content.

I want the nav bar to be sticky while scrolling the article content, so I've added css properties accordingly.

Basically I have a main layout which is a flex row with the two children, that stretches them so that they have both the same height. Then my nav bar is in a container that is the same height as the article content, it has the position: sticky and top: 0 properties set. It should be able to work like that except it isn't...

I've tried searching the web for a solution to my problem in vain.

Here is my html layout :

<div className="wiki-page">
  <div id="menu-bar-container">
    <div id="menu-bar">
      <h2>Quelle.s interrogation.s as-tu ?</h2>
      <div id="links">
        ...Useful links (list of <a>)
      </div>
    </div>
  </div>
  <div id="wiki-content">
    ...The article (div)
  </div>
</div>

and here is the concerned chunk of css (sass) :

.wiki-page {
  position: relative;
  width: 100%;
  @include flex(row, space-between, stretch);

  #menu-bar-container {
    position: relative;
  }

  #menu-bar {
    position: sticky;
    top: 0;
    align-self: flex-start;
    width: 500px;
    max-height: calc(100vh - $margin * 2);
  }

  #wiki-content {
    width: 100%;
    @include flex(column, start, start);
  }
}

When I inspect the rendered page, the sizing behaves as expected, yet the sticky does not takes place...

Any help would be greatly appreciated 🙏

Image of the inspected navigation menu container

Image of the inspected article content

Image of the inspected navigation menu

Image of the position: sticky not applying

Upvotes: -1

Views: 49

Answers (1)

InternetWanderer
InternetWanderer

Reputation: 47

Consider the following:
https://codesandbox.io/p/sandbox/sticky-nav-c7lcvs
Based on https://www.w3schools.com/howto/howto_js_sidenav.asp
In short: position: fixed; on #menu-bar selector is probably what you are looking for.
You may also try removing top: 0; from #menu-bar and make #menu-bar-container a sticky container:

#menu-bar-container {
    position: sticky;
    top: 0;
  }

  #menu-bar {
    position: relative;
    align-self: flex-start;
    width: 500px;
    max-height: calc(100vh - $margin * 2);
  }

Upvotes: -1

Related Questions