Search code examples
csscss-positionviewportabsolute

<div> with absolute position in the viewport when scrolling the page vertically

I created JANITOR which:

Inserts a navigation tree for modules, packages and types (interfaces, classes, enums, exceptions, errors, annotations) into the Javadoc pages of Java 11+.

JANITOR

The main elements involved are:

  ...
  <div id="nav&amp;mainContainer" style="display: flex;">  
    <div id="nav" style="width: 25em; height: 386px; border-right: 1px solid; overflow-y: scroll;">
    <main role="main" style="flex: 1 1 0%;">
  ...

How can I achieve that the navigation (<div id="nav" ...>) stays always at the same place left of the viewport if the page is scrolled so that visually only <main> is scrolled?

UPDATE

Using:

    <div id="nav" style="position:fixed; ...>

as proposed in an answer:

with position:fixed

Solution

  • try using the css styling "fixed"

    <div id="nav" style="position:fixed; width: 25em; height: 386px; border-right: 1px solid; overflow-y: scroll;">

    https://www.w3schools.com/cssref/pr_class_position.asp