Making Side Nav Fixed Scrolling-CodePudding

Help please - Sooo Im trying to make this side nav stay fixed when the content on the right scrolls down the page... similar to CB's furniture page. I'm not sure what else I need to add to the div to make it sticky or make it perform the way it does on CB... your advice is much appreciated!

Here's my CSS below:

.leftSideNav {  
    box-sizing: border-box;
    padding-left: 32px;
    margin-right: 15px;
    position: inherit;
    display: inline-block;
    width: 260px;
    vertical-align: top;
    top: 0px;
    height: 100vh;
    overflow: auto;
}

.clpContent { 
    display: inline-block; 
    vertical-align: top;
    overflow: hidden;
}

.clpContainer {
  position: sticky;
}

CodePudding user response：

On W3schools you can find useful tutorials about CSS. Here's example how to make scrollbar.

CodePudding user response：

You need position: fixed;and JavaScript (window.onscroll) for this what you want archive.

window.onscroll = function() {myFunction()};

var header = document.getElementById("myHeader");
var sticky = header.offsetTop;

function myFunction() {
  if (window.pageYOffset > sticky) {
    header.classList.add("sticky");
  } else {
    header.classList.remove("sticky");
  }
}

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

.top-container {
  background-color: #f1f1f1;
  padding: 30px;
  text-align: center;
}

.header {
  padding: 10px 16px;
  background: #555;
  color: #f1f1f1;
}

.content {
  padding: 16px;
  min-height: 900px;
}

.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}

.sticky   .content {
  padding-top: 102px;
}

<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>

<div >
  <h1>Scroll Down</h1>
  <p>Scroll down to see the sticky effect.</p>
</div>

<div  id="myHeader">
  <h2>Navbar which fixed</h2>
</div>

<div >
  <h3>On Scroll Sticky Header</h3>
  <p>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsumLorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum</p>
</div>


</body>
</html>