Reputation: 1499

one div fixed while other scrollable

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

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?

Upvotes: 1

Answers (3)

Saurav Rastogi

Reputation: 9731

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!

Upvotes: 1

Neinrappeur Zaki

Reputation: 397

you cannot use pure css to make this works , you will need Jquery , here is solution, first we calculate the product div height using jquery ,then we add result we get in followto() . we can get the height of an element using Jquery as Following :

.height() - returns the height of element excludes padding, border and margin.

.innerHeight() - returns the height of element includes padding but excludes border and margin.

.outerHeight() - returns the height of the div including border but excludes margin.

.outerHeight(true) - returns the height of the div including margin.

var windw = this;
$.fn.followTo = function ( pos ) {
    var $this = this,
        $window = $(windw);
    
    $window.scroll(function(e){
        if ($window.scrollTop() > pos) {
            $this.css({
                position: 'absolute',
                top: pos
            });
        } else {
            $this.css({
                position: 'fixed',
                top: 0
            });
        }
    });
};

$('#z').followTo($('#pro').height());

#z {
    background:blue;
    padding:20px;
    width:30%;
    position:fixed; top:0px; left:0;
    float:left;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="container">
  <div class="row">
  <div class="col-md-4" id="z">
    xx
    xx
    x
    x
    x
    x
    x
    x
    x
    x
    x
  </div>
  <div id="pro" class="col-md-8 flot" style="margin:30%;">
    <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>
<footer>This is footer
This is footer
This is footer
This is footer
This is footer
This is footer
This is footer
This is footer
This is footer
This is footer
This is footer
This is footer
This is footer
This is footer
This is footer
This is footer
This is footer
This is footer
This is footer
This is footer
This is footer
This is footer
This is footer
This is footer
This is footer
This is footer
This is footer
This is footer
This is footer
This is footer
This is footer
This is footer
This is footer
This is footer
This is footer
This is footer
This is footer
This is footer
This is footer
This is footer
This is footer
This is footer
This is footer
This is footer
This is footer
This is footer
This is footer
This is footer
This is footer
This is footer
This is footer
</footer>

Upvotes: 1

O.Rares

Reputation: 1061

<div class="container">
  <div class="row">
  <div class="col-md-4" style="position:relative;top:100px;left:20px;">
    xx
    xx
    x
    x
    x
    x
    x
    x
    x
    x
    x
  </div>
  <div class="col-md-8" style="margin:30%;overflow:scroll;top:100px;position:relative;">
    <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>

In the website that you sent, the right and left aren't fixed ,are relative ,just make both column same position type and add scroll to the right one

Also a fiddle with fixed position on left side https://jsfiddle.net/3j7yrsLx/

Upvotes: 0

one div fixed while other scrollable

Answers (3)

Related Questions