How can I make an absolute element sticky using CSS?

I have the following sidebar nav panel:

As you can see the navbar stretches from the very top to the very bottom of the web page. And this is done using CSS. Firstly here is the structure of my HTML (main code cut out for easier reading):

<div id="app" class="app">
    <!-- Sidebar -->
    <div class="sidebar-container"> </div>

    <!-- Header Nav Bar (holds logo) -->
    <div class="header-container"> </div>

    <!-- Menu that pops up when menu icon is pressed -->
    <div id="pop-up-menu" class="pop-up-menu-container"> </div>

    @yield('content')
</div>

I am using Laravel and this is why the @yield('content') line appears, this is called by my v2_welcome.blade.php file that looks like this:

@extends('layouts.main')

<!-- Body Section -->
@section('content')
    <div class="landing-image-container">
        <!-- THIS HAS THE BACKGROUND IMAGE SEEN ON SCREEN -->
    </div>

    <div class="test">
        hey
    </div>
@endsection

The CSS for the sidebar looks like this:

.sidebar-container {
    /* location */
    position: absolute;
    left: 0;
    top: 0;
    z-index: 100;

And my issue occurs when I insert any elements after the landing-image-container (i.e. the <div class="test">) as when I scroll down to see it this happens:

You can see the nav bar scrolls with the page, how do I get it to stick in position?

Thanks!

Contents hide

Answers:

Method 1

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

You can do this with position: fixed, not with position: absolute.

body {
  height:2000px;
}

.sidebar {
  background:blue;
  position:fixed;
  top:0;
  bottom:0;
  left:0;
  width:60px;
}

<body>
  <div class="sidebar">
  </div>
</body>

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes

Article Rating