0

I want to understand how we can fix the position of the particular section for time being just like in the below example.

https://www.apple.com/shop/buy-watch/apple-watch?option.watch_cases=MWT32LL/A&option.watch_bands=MXP02AM/A&preSelect=false&product=Z0YQ&step=detail#

In the above link, the apple watch product is fixed while the right content moves to some extent, and then the whole page moves.

I tried working on this by making the left side fixed by providing class sticky-top

<div class ="container">
<div class="row">
<div class = "col-sm-3 sticky-top">
<h1> left container</h1>
</div>
<div class = "col-sm-9 offset-2"></div>
</div>
</div>

Here I didnt put the whole code just a essence of what I tried and failed to acoomplish.

Shivani
  • 57
  • 1
  • 9
  • What browser are you using? This answer may help: https://stackoverflow.com/a/52580656/2570277 – Nick May 22 '20 at 10:17
  • @Shivani, could you share the full source code? In order to have the sticky worked, you should have the content that has the height over the window's height (100vh). – Kevin Lee May 22 '20 at 12:50

2 Answers2

1

What you have to put additionally is to add height CSS attribute in the sticky part. (left or right) Please refer to this: https://jsfiddle.net/kevindev725/6y7kmbh1/44/

<div class="row">
  <div class="left sticky-top">
    left sticky content
  </div>
  <div clss="right">
    right scrollable content
  </div>
</div>

Bootstrap will set position: stikcy with sticky-top class, but you should have the fixed size (whatever you want according to the content height) for the left sticky content. It's okay if height:fit-content or height: 100px or whatever you want to show the height of content while scrolling right side. Hopefully this would be helpful.

Kevin Lee
  • 332
  • 2
  • 13
-2

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
  font-family: Arial;
  color: white;
}

.split {
  height: 100%;
  width: 50%;
  position: fixed;
  z-index: 1;
  top: 0;
  overflow-x: hidden;
  padding-top: 20px;
}

.left {
  left: 0;
  background-color: #111;
}

.right {
  right: 0;
  background-color: red;
  overflow-y: auto;
}

.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.centered img {
  width: 150px;
  border-radius: 50%;
}
</style>
</head>
<body>

<div class="split left">
  <div class="centered">
      
       <p>Some text.</p>

  </div>
</div>

<div class="split right">
  <div class="centered">
   <p>Some text.</p>
       <p>Some text.</p>
       <p>Some text.</p>
       <p>Some text.</p>
       <p>Some text.</p>
       <p>Some text.</p>
       <p>Some text.</p>
       <p>Some text.</p>
       <p>Some text.</p>
       <p>Some text.</p>
       <p>Some text.</p>
       <p>Some text.</p>
       <p>Some text.</p>
       <p>Some text.</p>
       <p>Some text.</p>
       <p>Some text.</p>
       <p>Some text.</p>
       <p>Some text.</p>
       <p>Some text.</p>
       <p>Some text.</p>
       <p>Some text.</p>
       <p>Some text.</p>
       <p>Some text.</p>
       <p>Some text.</p>
       <p>Some text.</p>
       <p>Some text.</p>
       <p>Some text.</p>
       <p>Some text.</p>
       <p>Some text.</p>
       <p>Some text.</p>
       <p>Some text.</p>
    <p>Some text here too.</p>
  </div>
</div>
     
</body>
</html>
I think this skeleton is enough to achive what u want
harshith s
  • 74
  • 4