How do I make one column unmoveable while scrolling down?-CodePudding

I have these 2 columns:

If I scroll down on my html page, I want only the second column to scroll down, the left one should always be frozen.

Could someone help? This has to be done only in html. Thanks!

CodePudding user response：

You would use position: fixed. Then put all your content in the second column. See example below:

body {
  width: 100%;
  padding: 0;
  margin: 0;
}

.sidebar {
  position: fixed;
  top: 0px;
  bottom: 0px;
  left: 0px;
  width: 250px;
  background-color: #efefef;
}

.content {
  margin-left: 250px;
  padding: 1rem;
}

<body >
  <div >
  </div>
  <div >
  <p>
  This is the content for this section! :D
  </p>
  </div>
</body>

CodePudding user response：

Hey there’s a lot of ways to do this simple task but I’ll try and be as straightforward as possible.

In your JavaScript html, (I use Sumblime)

<div id=“Column1”> 
<p><strong>Column 1</strong></p></div>

Now I will open CSS in Visual Studio Code,

div#Column1 {
Background-color: rgb (0,0,0) 
font-family: ‘Roboto Mono’, monospace; 
float: left; 
border-radius 22;
position: absolute; 
right: 22%;

}

The ‘position’ method is used in CSS for positioning elements. In this case absolute can be used to make the position of the div for your column more static.

Be very very careful with it though!

CodePudding user response：

I would advise to use position: sticky; See my example:

.container {
  width: 800px;
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 15px;
}

.sticky {
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
  height: 300px;
  width: 100%;
  background: red;
 }

.sticky p {
   font-size: 35px; 
   padding: 15px;
}
 
.content-block {
   width: 100%;
   height: 1000px;
   background: green;
}

<div > 
  <div > 
    <p>sticky on screen</p>
  </div>
   <div > 
    
  </div>
</div>