BOTJr. BOTJr. - 20 days ago 8
CSS Question

one div fixed while other scrollable

This might be a duplication of the questions out there but it is different in one aspect.

enter image description here

This is the basic structure of my page and how it looks like , what i was trying to achieve was to make the left part of the div fixed while the right side part scrollable and once product related stuff overs both of them gets scrolled showing up the footer.

I am trying to mimic the basic structure over here Flipkart.

What i tried:

<div class="container">
<div class="row">
<div class="col-md-4" style="position:fixed;">
xx
xx
x
x
x
x
x
x
x
x
x
</div>
<div class="col-md-8" style="margin:30%;overflow:scroll;">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
<li>Item 9</li>
<li>Item 10</li>
<li>Item 11</li>
<li>Item 12</li>
<li>Item 13</li>
<li>Item 14</li>
<li>Item 15</li>
<li>Item 16</li>
<li>Item 17</li>
<li>Item 18</li>
<li>Item 19</li>
<li>Item 20</li>
<li>Item 21</li>
<li>Item 22</li>
<li>Item 23</li>
<li>Item 24</li>
<li>Item 25</li>
<li>Item 26</li>
<li>Item 27</li>
<li>Item 28</li>
<li>Item 29</li>
<li>Item 30</li>
<li>Item 31</li>
<li>Item 32</li>
<li>Item 33</li>
<li>Item 34</li>
<li>Item 35</li>
<li>Item 36</li>
<li>Item 37</li>
<li>Item 38</li>
<li>Item 39</li>
<li>Item 40</li>
</ul>
</div>
</div>
</div>


It didn't work out well for me, what would be my approach towards this and what would be the solution?

Answer

Have a look at this Codepen.

Or look at snippet below:

var div_top = $('.cta').offset().top - 95;

function sticky_relocate() {
    var window_top = $(window).scrollTop();
    var more_content_top = $('.more-content').offset().top - 360;
    if (window_top >= div_top && window_top <= more_content_top) {
        $('.cta').removeClass('stick-bottom');
        $('.cta').addClass('stick');
    } else if (window_top >= more_content_top) {
        $('.cta').removeClass('stick');
        $('.cta').addClass('stick-bottom');
    } else {
        $('.cta').removeClass('stick');
        $('.cta').removeClass('stick-bottom');
    }
}

$(function() {
    $(window).scroll(sticky_relocate);
    sticky_relocate();
});
body {
  margin: 80px 0 0 0;
}

.header {
  padding: 20px 30px;
  text-align: center;
  background: #2E78EC;
  color: #fff;
  font-size: 28px;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1;
}

.footer {
  padding: 20px 30px;
  text-align: center;
  background: #444;
  color: #fff;
  font-size: 28px;
}

.content {
  display: flex;
  min-height: calc(100vh - 160px);
}

.content > div {
  flex: 1;
  text-align: center;
  padding: 20px;
}

.left {
  position: relative;
  padding-top: 60px !important;
}

.img {
  width: 100%;
  height: 200px;
  background: #ddd;
  margin-bottom: 20px;
}

.cta-btn {
  display: block;
  background: #FD9E28;
  width: calc(100% - 40px);
  color: #fff;
  padding: 10px 20px;
}

.cta.stick {
  position: fixed;
  top: 100px;
  left: 20px;
  width: calc(50% - 40px);
}

.cta.stick-bottom {
  position: absolute;
  bottom: 0;
  width: calc(100% - 40px);
}

.more-content {
  padding: 20px;
}
<div class="header">Header</div>
<div class="content">
  <div class="left">
    <div class="cta">
      <div class="img"></div>
      <a class="cta-btn">
      Add to Cart
      </a>
    </div>
  </div>
  <div class="right">
    <h4>Product Description</h4>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit ex molestiae assumenda porro voluptatem a beatae eius impedit. Nesciunt ex autem odio accusamus, aliquam voluptatum temporibus et soluta beatae repellendus.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores laborum repudiandae odit ducimus quis pariatur architecto nobis aliquid, delectus praesentium nesciunt doloremque temporibus, corporis harum inventore vero asperiores optio quae!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas explicabo, cum, accusamus fugiat adipisci tempora itaque. Impedit nihil delectus deleniti voluptate laudantium laborum, soluta quia voluptates illum molestias placeat sit?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita veniam molestias, vero at dicta obcaecati similique, explicabo autem, itaque temporibus voluptas sapiente porro ducimus debitis asperiores tempore. Adipisci, cumque, assumenda.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque obcaecati nulla veniam aliquid rerum magni optio aliquam, distinctio sed enim ipsum praesentium ipsa tempora accusamus, dolorem illo. Quisquam, consequatur, at!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium fuga suscipit quo. Aspernatur dolores nisi inventore quod, at quos, in, mollitia quisquam voluptas, quae pariatur non aperiam fuga rerum saepe.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum exercitationem, delectus. Blanditiis eum dolor in cumque dolores fuga quaerat temporibus, sint quod laudantium facere, ad amet rem non, debitis tenetur.</p>
    <br><br><br>
    <h4>Product Specifications</h4>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit ex molestiae assumenda porro voluptatem a beatae eius impedit. Nesciunt ex autem odio accusamus, aliquam voluptatum temporibus et soluta beatae repellendus.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores laborum repudiandae odit ducimus quis pariatur architecto nobis aliquid, delectus praesentium nesciunt doloremque temporibus, corporis harum inventore vero asperiores optio quae!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas explicabo, cum, accusamus fugiat adipisci tempora itaque. Impedit nihil delectus deleniti voluptate laudantium laborum, soluta quia voluptates illum molestias placeat sit?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita veniam molestias, vero at dicta obcaecati similique, explicabo autem, itaque temporibus voluptas sapiente porro ducimus debitis asperiores tempore. Adipisci, cumque, assumenda.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque obcaecati nulla veniam aliquid rerum magni optio aliquam, distinctio sed enim ipsum praesentium ipsa tempora accusamus, dolorem illo. Quisquam, consequatur, at!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium fuga suscipit quo. Aspernatur dolores nisi inventore quod, at quos, in, mollitia quisquam voluptas, quae pariatur non aperiam fuga rerum saepe.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum exercitationem, delectus. Blanditiis eum dolor in cumque dolores fuga quaerat temporibus, sint quod laudantium facere, ad amet rem non, debitis tenetur.</p>
  </div>
</div>
<div class="more-content">
  <h4>More Content</h4>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit ex molestiae assumenda porro voluptatem a beatae eius impedit. Nesciunt ex autem odio accusamus, aliquam voluptatum temporibus et soluta beatae repellendus.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores laborum repudiandae odit ducimus quis pariatur architecto nobis aliquid, delectus praesentium nesciunt doloremque temporibus, corporis harum inventore vero asperiores optio quae!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas explicabo, cum, accusamus fugiat adipisci tempora itaque. Impedit nihil delectus deleniti voluptate laudantium laborum, soluta quia voluptates illum molestias placeat sit?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita veniam molestias, vero at dicta obcaecati similique, explicabo autem, itaque temporibus voluptas sapiente porro ducimus debitis asperiores tempore. Adipisci, cumque, assumenda.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque obcaecati nulla veniam aliquid rerum magni optio aliquam, distinctio sed enim ipsum praesentium ipsa tempora accusamus, dolorem illo. Quisquam, consequatur, at!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium fuga suscipit quo. Aspernatur dolores nisi inventore quod, at quos, in, mollitia quisquam voluptas, quae pariatur non aperiam fuga rerum saepe.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum exercitationem, delectus. Blanditiis eum dolor in cumque dolores fuga quaerat temporibus, sint quod laudantium facere, ad amet rem non, debitis tenetur.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit ex molestiae assumenda porro voluptatem a beatae eius impedit. Nesciunt ex autem odio accusamus, aliquam voluptatum temporibus et soluta beatae repellendus.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores laborum repudiandae odit ducimus quis pariatur architecto nobis aliquid, delectus praesentium nesciunt doloremque temporibus, corporis harum inventore vero asperiores optio quae!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas explicabo, cum, accusamus fugiat adipisci tempora itaque. Impedit nihil delectus deleniti voluptate laudantium laborum, soluta quia voluptates illum molestias placeat sit?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita veniam molestias, vero at dicta obcaecati similique, explicabo autem, itaque temporibus voluptas sapiente porro ducimus debitis asperiores tempore. Adipisci, cumque, assumenda.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque obcaecati nulla veniam aliquid rerum magni optio aliquam, distinctio sed enim ipsum praesentium ipsa tempora accusamus, dolorem illo. Quisquam, consequatur, at!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium fuga suscipit quo. Aspernatur dolores nisi inventore quod, at quos, in, mollitia quisquam voluptas, quae pariatur non aperiam fuga rerum saepe.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum exercitationem, delectus. Blanditiis eum dolor in cumque dolores fuga quaerat temporibus, sint quod laudantium facere, ad amet rem non, debitis tenetur.</p>
</div>
<div class="footer">Footer</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Hope this helps!

Comments