0

I am trying to imitate SO page behaviour of having a menu on the left and a bar on the top, both being sticky. The design is a sinle page dynamic application so when I say "switch pages" I am actually changing the html of a single page.

I create a menu as a list and a bar set them to be sticky as follows:

#topNav {
    margin: 0px;
    width: 100%;
    height: 40px;;
    overflow: hidden;
    list-style-type: none;
    color: white;
    background-color: rgb(22, 16, 99);
    position: sticky;
    position: -webkit-sticky;
    top: 0; /* required */
    z-index: 1;
}

.menu {
    margin: 0;
    padding: 0;
    padding-top: 20px;
    position: sticky;
    position: -webkit-sticky;
    top: 40px; /* required */
    border-right: 2px solid black;
}

However what is happening right now is, if there is a scroll bar, the menu is marginally (3 pixels maybe) more to the left than when there is no scroll bar. This creates a really ugly effect since switching between pages with little text to large pages moves everything just enough for it to be human noticeable. How can I prevent the scroll bar from re-formatting the text?

Makogan
  • 8,208
  • 7
  • 44
  • 112

1 Answers1

0

you can set overflow-y:scroll to that container. This makes the scroll always show irrespective of the content. So your content doesn't move around when switching pages.

Update: If you don't want the scroll to always show, you have to detect if the container has a scrollbar through javascript and append a class to your menu that would shift it to it's original position. Here is a sample fiddle: http://jsfiddle.net/85a0sc4r/

zer0
  • 4,657
  • 7
  • 28
  • 49