How to set asidebar fixed on right side and left side content scroll?

-1

I need aside bar fixed on the right side and only left side content can scroll.

I tried below code but it's not working. I am getting the right side div on top because of position: fixed.. Can anyone check my code and assist me.
Would you help me out on this issue?

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<header></header>

    <div class="banner_bg wrapper_header">

    </div>

    <div class="wrapper_content">

<div class="container">

    <div class="row">

<div class="col-xs-12 col-sm-12 col-md-8 col-lg-8">

    <div>

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>



                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>



                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>



                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

    </div>

</div>

<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">

    <div class="widget-area">

        <aside>



<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>        

</aside>

    </div>

</div>

</div>

</div>

</div>





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

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

style

body,html{padding:0;margin: 0;height: 100%;}

    .wrapper_header{

        background-image:url('https://images.pexels.com/photos/1596574/pexels-photo-1596574.jpeg');

        position:relative;

        background-position: center;

        text-align: center;

        color: #fff;

    }

    .banner_bg{background-repeat:no-repeat;background-size:cover;width:100%;height:auto;min-height:100%;}

aside

{

    position:fixed;

    width: 400px;

    height: 100%;

    top: 0;

    right: 0;

    border: 1px solid #eee;

}

    .wrapper_content{padding: 50px 0;}

    .widget-area{

        background-color: #fff;

        box-shadow:0 3px 6px rgba(0,0,0,0.1);

        padding: 20px;

        border:1px solid #eee;

    }

I am getting output

I need an output like this. so that only left content scroll and right will be fixed.

html css html5 css3

share|improve this question

edited Nov 22 '18 at 7:40

user9437856

asked Nov 22 '18 at 7:18

user9437856user9437856

479212

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  aside { position:fixed; width: 400px; height: 100%; top: 0; right: 0; border: 1px solid #eee; } remove this style. it will work
  
  – Kesavan R
  Nov 22 '18 at 7:24
  
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @KesavanR but aside will not be fixed if I remove it.
  
  – user9437856
  Nov 22 '18 at 7:27
  

  
  
  
  

add a comment | 

-1

I need aside bar fixed on the right side and only left side content can scroll.

I tried below code but it's not working. I am getting the right side div on top because of position: fixed.. Can anyone check my code and assist me.
Would you help me out on this issue?

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<header></header>

    <div class="banner_bg wrapper_header">

    </div>

    <div class="wrapper_content">

<div class="container">

    <div class="row">

<div class="col-xs-12 col-sm-12 col-md-8 col-lg-8">

    <div>

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>



                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>



                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>



                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

    </div>

</div>

<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">

    <div class="widget-area">

        <aside>



<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>        

</aside>

    </div>

</div>

</div>

</div>

</div>





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

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

style

body,html{padding:0;margin: 0;height: 100%;}

    .wrapper_header{

        background-image:url('https://images.pexels.com/photos/1596574/pexels-photo-1596574.jpeg');

        position:relative;

        background-position: center;

        text-align: center;

        color: #fff;

    }

    .banner_bg{background-repeat:no-repeat;background-size:cover;width:100%;height:auto;min-height:100%;}

aside

{

    position:fixed;

    width: 400px;

    height: 100%;

    top: 0;

    right: 0;

    border: 1px solid #eee;

}

    .wrapper_content{padding: 50px 0;}

    .widget-area{

        background-color: #fff;

        box-shadow:0 3px 6px rgba(0,0,0,0.1);

        padding: 20px;

        border:1px solid #eee;

    }

I am getting output

I need an output like this. so that only left content scroll and right will be fixed.

html css html5 css3

share|improve this question

edited Nov 22 '18 at 7:40

user9437856

asked Nov 22 '18 at 7:18

user9437856user9437856

479212

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  aside { position:fixed; width: 400px; height: 100%; top: 0; right: 0; border: 1px solid #eee; } remove this style. it will work
  
  – Kesavan R
  Nov 22 '18 at 7:24
  
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @KesavanR but aside will not be fixed if I remove it.
  
  – user9437856
  Nov 22 '18 at 7:27
  

  
  
  
  

add a comment | 

-1

-1

-1

I need aside bar fixed on the right side and only left side content can scroll.

I tried below code but it's not working. I am getting the right side div on top because of position: fixed.. Can anyone check my code and assist me.
Would you help me out on this issue?

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<header></header>

    <div class="banner_bg wrapper_header">

    </div>

    <div class="wrapper_content">

<div class="container">

    <div class="row">

<div class="col-xs-12 col-sm-12 col-md-8 col-lg-8">

    <div>

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>



                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>



                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>



                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

    </div>

</div>

<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">

    <div class="widget-area">

        <aside>



<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>        

</aside>

    </div>

</div>

</div>

</div>

</div>





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

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

style

body,html{padding:0;margin: 0;height: 100%;}

    .wrapper_header{

        background-image:url('https://images.pexels.com/photos/1596574/pexels-photo-1596574.jpeg');

        position:relative;

        background-position: center;

        text-align: center;

        color: #fff;

    }

    .banner_bg{background-repeat:no-repeat;background-size:cover;width:100%;height:auto;min-height:100%;}

aside

{

    position:fixed;

    width: 400px;

    height: 100%;

    top: 0;

    right: 0;

    border: 1px solid #eee;

}

    .wrapper_content{padding: 50px 0;}

    .widget-area{

        background-color: #fff;

        box-shadow:0 3px 6px rgba(0,0,0,0.1);

        padding: 20px;

        border:1px solid #eee;

    }

I am getting output

I need an output like this. so that only left content scroll and right will be fixed.

html css html5 css3

share|improve this question

edited Nov 22 '18 at 7:40

user9437856

asked Nov 22 '18 at 7:18

user9437856user9437856

479212

I need aside bar fixed on the right side and only left side content can scroll.

I tried below code but it's not working. I am getting the right side div on top because of position: fixed.. Can anyone check my code and assist me.
Would you help me out on this issue?

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<header></header>

    <div class="banner_bg wrapper_header">

    </div>

    <div class="wrapper_content">

<div class="container">

    <div class="row">

<div class="col-xs-12 col-sm-12 col-md-8 col-lg-8">

    <div>

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>



                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>



                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>



                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

    </div>

</div>

<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4">

    <div class="widget-area">

        <aside>



<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>        

</aside>

    </div>

</div>

</div>

</div>

</div>





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

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

style

body,html{padding:0;margin: 0;height: 100%;}

    .wrapper_header{

        background-image:url('https://images.pexels.com/photos/1596574/pexels-photo-1596574.jpeg');

        position:relative;

        background-position: center;

        text-align: center;

        color: #fff;

    }

    .banner_bg{background-repeat:no-repeat;background-size:cover;width:100%;height:auto;min-height:100%;}

aside

{

    position:fixed;

    width: 400px;

    height: 100%;

    top: 0;

    right: 0;

    border: 1px solid #eee;

}

    .wrapper_content{padding: 50px 0;}

    .widget-area{

        background-color: #fff;

        box-shadow:0 3px 6px rgba(0,0,0,0.1);

        padding: 20px;

        border:1px solid #eee;

    }

I am getting output

I need an output like this. so that only left content scroll and right will be fixed.

html css html5 css3

html css html5 css3

share|improve this question

edited Nov 22 '18 at 7:40

user9437856

asked Nov 22 '18 at 7:18

user9437856user9437856

479212

share|improve this question

edited Nov 22 '18 at 7:40

user9437856

asked Nov 22 '18 at 7:18

user9437856user9437856

479212

share|improve this question

share|improve this question

edited Nov 22 '18 at 7:40

user9437856

edited Nov 22 '18 at 7:40

user9437856

edited Nov 22 '18 at 7:40

user9437856

asked Nov 22 '18 at 7:18

user9437856user9437856

479212

asked Nov 22 '18 at 7:18

user9437856user9437856

479212

asked Nov 22 '18 at 7:18

user9437856user9437856

479212

479212

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  aside { position:fixed; width: 400px; height: 100%; top: 0; right: 0; border: 1px solid #eee; } remove this style. it will work
  
  – Kesavan R
  Nov 22 '18 at 7:24
  
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @KesavanR but aside will not be fixed if I remove it.
  
  – user9437856
  Nov 22 '18 at 7:27
  

  
  
  
  

add a comment | 

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  aside { position:fixed; width: 400px; height: 100%; top: 0; right: 0; border: 1px solid #eee; } remove this style. it will work
  
  – Kesavan R
  Nov 22 '18 at 7:24
  
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @KesavanR but aside will not be fixed if I remove it.
  
  – user9437856
  Nov 22 '18 at 7:27
  

  
  
  
  

aside { position:fixed; width: 400px; height: 100%; top: 0; right: 0; border: 1px solid #eee; } remove this style. it will work

– Kesavan R
Nov 22 '18 at 7:24

aside { position:fixed; width: 400px; height: 100%; top: 0; right: 0; border: 1px solid #eee; } remove this style. it will work

– Kesavan R
Nov 22 '18 at 7:24

@KesavanR but aside will not be fixed if I remove it.

– user9437856
Nov 22 '18 at 7:27

@KesavanR but aside will not be fixed if I remove it.

– user9437856
Nov 22 '18 at 7:27

add a comment | 

3 Answers
3

active

oldest

votes

0

You will need to remove the Aside CSS that you have in there, it's just causing the conflict you're experiencing.

https://codepen.io/robert9111/pen/PxQXBd

For record i removed

/* aside {

    position:fixed;

    width: 400px;

    height: 100%;

    top: 0;

    right: 0;

    border: 1px solid #eee;

} */

and I'm getting your desired output.

share|improve this answer

answered Nov 22 '18 at 7:32

Robert PerezRobert Perez

12210

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  If I comment aside css then it will get my output but it not complete output I need a fixed div so that if anyone scrolls the page then it will scroll only the left content not right.
  
  – user9437856
  Nov 22 '18 at 7:39
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  I've updated my Codepen. You are targeting the wrong element in your CSS. Instead of targeting the Aside, target the widget area as that's what you'll want to stay in 1 place and follow you down the screen. You'll need some additional Javascript to make sure it starts to become fixed instead of relative. (Position: relative to Position:Fixed)
  
  – Robert Perez
  Nov 22 '18 at 7:51
  
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  The content Which I shared on the left side that is dummy text, That will increase in future. Now I am getting the fixed div on the header section which I don't want. aside div should be fixed in the class of wrapper_content only. I need my aside div only here prntscr.com/llh1c3 .. if someone scroll then it will scroll only left content.
  
  – user9437856
  Nov 22 '18 at 7:58
  
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Can you confirm you've seen my updated codepen? It's the same one as in my original answer. As i stated, You'll need JS/Jquery to make sure the div becomes "position:fixed" instead of "position: relative" once it enters the viewport or else it will float all the way to the top of the screen as it is fixed to a certain position within the page.
  
  – Robert Perez
  Nov 22 '18 at 8:01
  
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Yes, I checked your updated code.I need like this abouolia.github.io/sticky-sidebar/examples/basic.html but I need on right side
  
  – user9437856
  Nov 22 '18 at 8:04
  
  
  

  
  
  
  

add a comment | 

0

I guess you are looking for affix from bootstrap.

affix bootstrap

For your problem the solution is:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<style>

body,html{padding:0;margin: 0;height: 100%;}

    .wrapper_header{

        background-image:url('https://images.pexels.com/photos/1596574/pexels-photo-1596574.jpeg');

        position:relative;

        background-position: center;

        text-align: center;

        color: #fff;

    }

    .banner_bg{background-repeat:no-repeat;background-size:cover;width:100%;height:auto;min-height:100%;}

    .wrapper_content{padding: 50px 0;}

    .widget-area{

        background-color: #fff;

        box-shadow:0 3px 6px rgba(0,0,0,0.1);

        padding: 20px;

        border:1px solid #eee;

    }

    

    .affix{

        right: 16%;

        width: 400px;

        top: 5%;

    }

    

    // bootstrap will add affix-top and affix-botttom class as well we can use if required 

    

    </style>

<header></header>

    <div class="banner_bg wrapper_header">

    </div>

    <div class="wrapper_content">

<div class="container">

    <div class="row">

<div class="col-xs-12 col-sm-12 col-md-8 col-lg-8">

    <div>

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>



                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>



                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>



                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

    

                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

                cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

                proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

        

                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

                cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

                proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

                    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

                    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

                    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

                    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

                    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

            

                                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

                    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

                    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

                    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

                    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

                    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

                        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

                        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

                        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

                        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

                

                                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

                        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

                        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

                        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

                        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

                            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

                            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

                            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

                            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

                            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

                    

                                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

                            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

                            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

                            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

                            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

                            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

                                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

                                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

                                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

                                cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

                                proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

                        

                                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

                                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

                                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

                                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

                                cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

                                proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

    </div>

</div>

<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4" data-spy="affix" data-offset-top="720" >

    <div class="widget-area"  >

        <aside>



<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>        

</aside>

    </div>

</div>

</div>

</div>

</div>





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

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Just add data-spy="affix" data-offset-top="720" into your sidebar container. and add style for affix

I hope this will help you.

share|improve this answer

answered Nov 22 '18 at 8:01

Kesavan RKesavan R

188113

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  I need like this abouolia.github.io/sticky-sidebar/examples/basic.html but I need on right side
  
  – user9437856
  Nov 22 '18 at 8:07
  

  
  
  
  

add a comment | 

0

is this what you want?

body, html {

        padding: 0;

        margin: 0;

        height: 100%;

    }



    .wrapper_header {

        background-image: url('https://images.pexels.com/photos/1596574/pexels-photo-1596574.jpeg');

        position: relative;

        background-position: center;

        text-align: center;

        color: #fff;

        height: 400px;

    }



    .banner_bg {

        background-repeat: no-repeat;

        background-size: cover;

        width: 100%;

    }



    aside {

        height: 100%;

    }



    .fixedElement {

        position: relative;

    }



    .wrapper_content {

        padding: 50px 0;

    }



    .widget-area {

        background-color: #fff;

        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);

        padding: 20px;

        border: 1px solid #eee;

    }

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<header></header>

<div class="banner_bg wrapper_header">

</div>

<div class="wrapper_content">

    <div class="container">

        <div class="row">

            <div class="col-xs-12 col-sm-12 col-md-8 col-lg-8">

                <div>

                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

                        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

                        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

                        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

                        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>



                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

                        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

                        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

                        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

                        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>



                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

                        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

                        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

                        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

                        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>



                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

                        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

                        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

                        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

                        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

                        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

                        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

                        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

                        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>



                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

                        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

                        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

                        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

                        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>



                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

                        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

                        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

                        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

                        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>



                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

                        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

                        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

                        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

                        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

                        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

                        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

                        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

                        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>



                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

                        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

                        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

                        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

                        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>



                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

                        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

                        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

                        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

                        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>



                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

                        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

                        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

                        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

                        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

                </div>

            </div>

            <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 anchor">

                <aside class="fixedElement">

                    <div class="widget-area ">

                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

                            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

                            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

                            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

                            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

                            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>



                    </div>

                </aside>

            </div>

        </div>

    </div>

</div>





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

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>



<script>

    $(window).scroll(function (e) {

        var $el = $('.fixedElement');

        var anchor = $('.anchor');

        var anchor = anchor.offset().top;

        var windowTop = $(this).scrollTop();



        var diff = windowTop - anchor;

        if (diff > 0) {

            $el.css({'top': diff + 'px'});

        } else {

            $el.css({'top': '0px'});

        }

    });

</script>

share|improve this answer

answered Nov 22 '18 at 8:11

faraz foroughifaraz foroughi

113

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  give me time to understand your code.
  
  – user9437856
  Nov 22 '18 at 8:13
  

  
  
  
  

add a comment | 

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});


}
});

Thanks for contributing an answer to Stack Overflow!

• Please be sure to answer the question. Provide details and share your research!

But avoid …

• Asking for help, clarification, or responding to other answers.


• Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53425694%2fhow-to-set-asidebar-fixed-on-right-side-and-left-side-content-scroll%23new-answer', 'question_page');
}
);

Post as a guest

Name

Email

Required, but never shown

3 Answers
3

active

oldest

votes

3 Answers
3

active

oldest

votes

active

oldest

votes

active

oldest

votes

0

You will need to remove the Aside CSS that you have in there, it's just causing the conflict you're experiencing.

https://codepen.io/robert9111/pen/PxQXBd

For record i removed

/* aside {

    position:fixed;

    width: 400px;

    height: 100%;

    top: 0;

    right: 0;

    border: 1px solid #eee;

} */

and I'm getting your desired output.

share|improve this answer

answered Nov 22 '18 at 7:32

Robert PerezRobert Perez

12210

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  If I comment aside css then it will get my output but it not complete output I need a fixed div so that if anyone scrolls the page then it will scroll only the left content not right.
  
  – user9437856
  Nov 22 '18 at 7:39
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  I've updated my Codepen. You are targeting the wrong element in your CSS. Instead of targeting the Aside, target the widget area as that's what you'll want to stay in 1 place and follow you down the screen. You'll need some additional Javascript to make sure it starts to become fixed instead of relative. (Position: relative to Position:Fixed)
  
  – Robert Perez
  Nov 22 '18 at 7:51
  
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  The content Which I shared on the left side that is dummy text, That will increase in future. Now I am getting the fixed div on the header section which I don't want. aside div should be fixed in the class of wrapper_content only. I need my aside div only here prntscr.com/llh1c3 .. if someone scroll then it will scroll only left content.
  
  – user9437856
  Nov 22 '18 at 7:58
  
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Can you confirm you've seen my updated codepen? It's the same one as in my original answer. As i stated, You'll need JS/Jquery to make sure the div becomes "position:fixed" instead of "position: relative" once it enters the viewport or else it will float all the way to the top of the screen as it is fixed to a certain position within the page.
  
  – Robert Perez
  Nov 22 '18 at 8:01
  
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Yes, I checked your updated code.I need like this abouolia.github.io/sticky-sidebar/examples/basic.html but I need on right side
  
  – user9437856
  Nov 22 '18 at 8:04
  
  
  

  
  
  
  

add a comment | 

0

You will need to remove the Aside CSS that you have in there, it's just causing the conflict you're experiencing.

https://codepen.io/robert9111/pen/PxQXBd

For record i removed

/* aside {

    position:fixed;

    width: 400px;

    height: 100%;

    top: 0;

    right: 0;

    border: 1px solid #eee;

} */

and I'm getting your desired output.

share|improve this answer

answered Nov 22 '18 at 7:32

Robert PerezRobert Perez

12210

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  If I comment aside css then it will get my output but it not complete output I need a fixed div so that if anyone scrolls the page then it will scroll only the left content not right.
  
  – user9437856
  Nov 22 '18 at 7:39
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  I've updated my Codepen. You are targeting the wrong element in your CSS. Instead of targeting the Aside, target the widget area as that's what you'll want to stay in 1 place and follow you down the screen. You'll need some additional Javascript to make sure it starts to become fixed instead of relative. (Position: relative to Position:Fixed)
  
  – Robert Perez
  Nov 22 '18 at 7:51
  
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  The content Which I shared on the left side that is dummy text, That will increase in future. Now I am getting the fixed div on the header section which I don't want. aside div should be fixed in the class of wrapper_content only. I need my aside div only here prntscr.com/llh1c3 .. if someone scroll then it will scroll only left content.
  
  – user9437856
  Nov 22 '18 at 7:58
  
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Can you confirm you've seen my updated codepen? It's the same one as in my original answer. As i stated, You'll need JS/Jquery to make sure the div becomes "position:fixed" instead of "position: relative" once it enters the viewport or else it will float all the way to the top of the screen as it is fixed to a certain position within the page.
  
  – Robert Perez
  Nov 22 '18 at 8:01
  
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Yes, I checked your updated code.I need like this abouolia.github.io/sticky-sidebar/examples/basic.html but I need on right side
  
  – user9437856
  Nov 22 '18 at 8:04
  
  
  

  
  
  
  

add a comment | 

0

0

0

You will need to remove the Aside CSS that you have in there, it's just causing the conflict you're experiencing.

https://codepen.io/robert9111/pen/PxQXBd

For record i removed

/* aside {

    position:fixed;

    width: 400px;

    height: 100%;

    top: 0;

    right: 0;

    border: 1px solid #eee;

} */

and I'm getting your desired output.

share|improve this answer

answered Nov 22 '18 at 7:32

Robert PerezRobert Perez

12210

You will need to remove the Aside CSS that you have in there, it's just causing the conflict you're experiencing.

https://codepen.io/robert9111/pen/PxQXBd

For record i removed

/* aside {

    position:fixed;

    width: 400px;

    height: 100%;

    top: 0;

    right: 0;

    border: 1px solid #eee;

} */

and I'm getting your desired output.

share|improve this answer

answered Nov 22 '18 at 7:32

Robert PerezRobert Perez

12210

share|improve this answer

share|improve this answer

answered Nov 22 '18 at 7:32

Robert PerezRobert Perez

12210

answered Nov 22 '18 at 7:32

Robert PerezRobert Perez

12210

answered Nov 22 '18 at 7:32

Robert PerezRobert Perez

12210

12210

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  If I comment aside css then it will get my output but it not complete output I need a fixed div so that if anyone scrolls the page then it will scroll only the left content not right.
  
  – user9437856
  Nov 22 '18 at 7:39
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  I've updated my Codepen. You are targeting the wrong element in your CSS. Instead of targeting the Aside, target the widget area as that's what you'll want to stay in 1 place and follow you down the screen. You'll need some additional Javascript to make sure it starts to become fixed instead of relative. (Position: relative to Position:Fixed)
  
  – Robert Perez
  Nov 22 '18 at 7:51
  
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  The content Which I shared on the left side that is dummy text, That will increase in future. Now I am getting the fixed div on the header section which I don't want. aside div should be fixed in the class of wrapper_content only. I need my aside div only here prntscr.com/llh1c3 .. if someone scroll then it will scroll only left content.
  
  – user9437856
  Nov 22 '18 at 7:58
  
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Can you confirm you've seen my updated codepen? It's the same one as in my original answer. As i stated, You'll need JS/Jquery to make sure the div becomes "position:fixed" instead of "position: relative" once it enters the viewport or else it will float all the way to the top of the screen as it is fixed to a certain position within the page.
  
  – Robert Perez
  Nov 22 '18 at 8:01
  
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Yes, I checked your updated code.I need like this abouolia.github.io/sticky-sidebar/examples/basic.html but I need on right side
  
  – user9437856
  Nov 22 '18 at 8:04
  
  
  

  
  
  
  

add a comment | 

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  If I comment aside css then it will get my output but it not complete output I need a fixed div so that if anyone scrolls the page then it will scroll only the left content not right.
  
  – user9437856
  Nov 22 '18 at 7:39
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  I've updated my Codepen. You are targeting the wrong element in your CSS. Instead of targeting the Aside, target the widget area as that's what you'll want to stay in 1 place and follow you down the screen. You'll need some additional Javascript to make sure it starts to become fixed instead of relative. (Position: relative to Position:Fixed)
  
  – Robert Perez
  Nov 22 '18 at 7:51
  
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  The content Which I shared on the left side that is dummy text, That will increase in future. Now I am getting the fixed div on the header section which I don't want. aside div should be fixed in the class of wrapper_content only. I need my aside div only here prntscr.com/llh1c3 .. if someone scroll then it will scroll only left content.
  
  – user9437856
  Nov 22 '18 at 7:58
  
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Can you confirm you've seen my updated codepen? It's the same one as in my original answer. As i stated, You'll need JS/Jquery to make sure the div becomes "position:fixed" instead of "position: relative" once it enters the viewport or else it will float all the way to the top of the screen as it is fixed to a certain position within the page.
  
  – Robert Perez
  Nov 22 '18 at 8:01
  
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  Yes, I checked your updated code.I need like this abouolia.github.io/sticky-sidebar/examples/basic.html but I need on right side
  
  – user9437856
  Nov 22 '18 at 8:04
  
  
  

  
  
  
  

If I comment aside css then it will get my output but it not complete output I need a fixed div so that if anyone scrolls the page then it will scroll only the left content not right.

– user9437856
Nov 22 '18 at 7:39

If I comment aside css then it will get my output but it not complete output I need a fixed div so that if anyone scrolls the page then it will scroll only the left content not right.

– user9437856
Nov 22 '18 at 7:39

I've updated my Codepen. You are targeting the wrong element in your CSS. Instead of targeting the Aside, target the widget area as that's what you'll want to stay in 1 place and follow you down the screen. You'll need some additional Javascript to make sure it starts to become fixed instead of relative. (Position: relative to Position:Fixed)

– Robert Perez
Nov 22 '18 at 7:51

I've updated my Codepen. You are targeting the wrong element in your CSS. Instead of targeting the Aside, target the widget area as that's what you'll want to stay in 1 place and follow you down the screen. You'll need some additional Javascript to make sure it starts to become fixed instead of relative. (Position: relative to Position:Fixed)

– Robert Perez
Nov 22 '18 at 7:51

The content Which I shared on the left side that is dummy text, That will increase in future. Now I am getting the fixed div on the header section which I don't want. aside div should be fixed in the class of wrapper_content only. I need my aside div only here prntscr.com/llh1c3 .. if someone scroll then it will scroll only left content.

– user9437856
Nov 22 '18 at 7:58

The content Which I shared on the left side that is dummy text, That will increase in future. Now I am getting the fixed div on the header section which I don't want. aside div should be fixed in the class of wrapper_content only. I need my aside div only here prntscr.com/llh1c3 .. if someone scroll then it will scroll only left content.

– user9437856
Nov 22 '18 at 7:58

Can you confirm you've seen my updated codepen? It's the same one as in my original answer. As i stated, You'll need JS/Jquery to make sure the div becomes "position:fixed" instead of "position: relative" once it enters the viewport or else it will float all the way to the top of the screen as it is fixed to a certain position within the page.

– Robert Perez
Nov 22 '18 at 8:01

Can you confirm you've seen my updated codepen? It's the same one as in my original answer. As i stated, You'll need JS/Jquery to make sure the div becomes "position:fixed" instead of "position: relative" once it enters the viewport or else it will float all the way to the top of the screen as it is fixed to a certain position within the page.

– Robert Perez
Nov 22 '18 at 8:01

Yes, I checked your updated code.I need like this abouolia.github.io/sticky-sidebar/examples/basic.html but I need on right side

– user9437856
Nov 22 '18 at 8:04

Yes, I checked your updated code.I need like this abouolia.github.io/sticky-sidebar/examples/basic.html but I need on right side

– user9437856
Nov 22 '18 at 8:04

add a comment | 

0

I guess you are looking for affix from bootstrap.

affix bootstrap

For your problem the solution is:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<style>

body,html{padding:0;margin: 0;height: 100%;}

    .wrapper_header{

        background-image:url('https://images.pexels.com/photos/1596574/pexels-photo-1596574.jpeg');

        position:relative;

        background-position: center;

        text-align: center;

        color: #fff;

    }

    .banner_bg{background-repeat:no-repeat;background-size:cover;width:100%;height:auto;min-height:100%;}

    .wrapper_content{padding: 50px 0;}

    .widget-area{

        background-color: #fff;

        box-shadow:0 3px 6px rgba(0,0,0,0.1);

        padding: 20px;

        border:1px solid #eee;

    }

    

    .affix{

        right: 16%;

        width: 400px;

        top: 5%;

    }

    

    // bootstrap will add affix-top and affix-botttom class as well we can use if required 

    

    </style>

<header></header>

    <div class="banner_bg wrapper_header">

    </div>

    <div class="wrapper_content">

<div class="container">

    <div class="row">

<div class="col-xs-12 col-sm-12 col-md-8 col-lg-8">

    <div>

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>



                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>



                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>



                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

    

                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

                cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

                proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

        

                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

                cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

                proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

                    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

                    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

                    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

                    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

                    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

            

                                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

                    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

                    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

                    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

                    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

                    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

                        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

                        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

                        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

                        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

                

                                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

                        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

                        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

                        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

                        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

                            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

                            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

                            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

                            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

                            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

                    

                                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

                            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

                            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

                            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

                            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

                            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

                                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

                                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

                                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

                                cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

                                proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

                        

                                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

                                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

                                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

                                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

                                cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

                                proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

    </div>

</div>

<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4" data-spy="affix" data-offset-top="720" >

    <div class="widget-area"  >

        <aside>



<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>        

</aside>

    </div>

</div>

</div>

</div>

</div>





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

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Just add data-spy="affix" data-offset-top="720" into your sidebar container. and add style for affix

I hope this will help you.

share|improve this answer

answered Nov 22 '18 at 8:01

Kesavan RKesavan R

188113

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  I need like this abouolia.github.io/sticky-sidebar/examples/basic.html but I need on right side
  
  – user9437856
  Nov 22 '18 at 8:07
  

  
  
  
  

add a comment | 

0

I guess you are looking for affix from bootstrap.

affix bootstrap

For your problem the solution is:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<style>

body,html{padding:0;margin: 0;height: 100%;}

    .wrapper_header{

        background-image:url('https://images.pexels.com/photos/1596574/pexels-photo-1596574.jpeg');

        position:relative;

        background-position: center;

        text-align: center;

        color: #fff;

    }

    .banner_bg{background-repeat:no-repeat;background-size:cover;width:100%;height:auto;min-height:100%;}

    .wrapper_content{padding: 50px 0;}

    .widget-area{

        background-color: #fff;

        box-shadow:0 3px 6px rgba(0,0,0,0.1);

        padding: 20px;

        border:1px solid #eee;

    }

    

    .affix{

        right: 16%;

        width: 400px;

        top: 5%;

    }

    

    // bootstrap will add affix-top and affix-botttom class as well we can use if required 

    

    </style>

<header></header>

    <div class="banner_bg wrapper_header">

    </div>

    <div class="wrapper_content">

<div class="container">

    <div class="row">

<div class="col-xs-12 col-sm-12 col-md-8 col-lg-8">

    <div>

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>



                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>



                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>



                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

    

                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

                cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

                proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

        

                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

                cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

                proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

                    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

                    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

                    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

                    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

                    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

            

                                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

                    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

                    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

                    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

                    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

                    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

                        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

                        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

                        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

                        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

                

                                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

                        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

                        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

                        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

                        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

                            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

                            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

                            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

                            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

                            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

                    

                                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

                            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

                            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

                            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

                            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

                            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

                                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

                                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

                                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

                                cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

                                proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

                        

                                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

                                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

                                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

                                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

                                cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

                                proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

    </div>

</div>

<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4" data-spy="affix" data-offset-top="720" >

    <div class="widget-area"  >

        <aside>



<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>        

</aside>

    </div>

</div>

</div>

</div>

</div>





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

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Just add data-spy="affix" data-offset-top="720" into your sidebar container. and add style for affix

I hope this will help you.

share|improve this answer

answered Nov 22 '18 at 8:01

Kesavan RKesavan R

188113

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  I need like this abouolia.github.io/sticky-sidebar/examples/basic.html but I need on right side
  
  – user9437856
  Nov 22 '18 at 8:07
  

  
  
  
  

add a comment | 

0

0

0

I guess you are looking for affix from bootstrap.

affix bootstrap

For your problem the solution is:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<style>

body,html{padding:0;margin: 0;height: 100%;}

    .wrapper_header{

        background-image:url('https://images.pexels.com/photos/1596574/pexels-photo-1596574.jpeg');

        position:relative;

        background-position: center;

        text-align: center;

        color: #fff;

    }

    .banner_bg{background-repeat:no-repeat;background-size:cover;width:100%;height:auto;min-height:100%;}

    .wrapper_content{padding: 50px 0;}

    .widget-area{

        background-color: #fff;

        box-shadow:0 3px 6px rgba(0,0,0,0.1);

        padding: 20px;

        border:1px solid #eee;

    }

    

    .affix{

        right: 16%;

        width: 400px;

        top: 5%;

    }

    

    // bootstrap will add affix-top and affix-botttom class as well we can use if required 

    

    </style>

<header></header>

    <div class="banner_bg wrapper_header">

    </div>

    <div class="wrapper_content">

<div class="container">

    <div class="row">

<div class="col-xs-12 col-sm-12 col-md-8 col-lg-8">

    <div>

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>



                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>



                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>



                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

    

                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

                cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

                proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

        

                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

                cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

                proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

                    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

                    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

                    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

                    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

                    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

            

                                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

                    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

                    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

                    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

                    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

                    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

                        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

                        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

                        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

                        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

                

                                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

                        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

                        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

                        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

                        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

                            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

                            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

                            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

                            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

                            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

                    

                                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

                            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

                            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

                            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

                            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

                            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

                                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

                                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

                                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

                                cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

                                proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

                        

                                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

                                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

                                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

                                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

                                cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

                                proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

    </div>

</div>

<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4" data-spy="affix" data-offset-top="720" >

    <div class="widget-area"  >

        <aside>



<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>        

</aside>

    </div>

</div>

</div>

</div>

</div>





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

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Just add data-spy="affix" data-offset-top="720" into your sidebar container. and add style for affix

I hope this will help you.

share|improve this answer

answered Nov 22 '18 at 8:01

Kesavan RKesavan R

188113

I guess you are looking for affix from bootstrap.

affix bootstrap

For your problem the solution is:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<style>

body,html{padding:0;margin: 0;height: 100%;}

    .wrapper_header{

        background-image:url('https://images.pexels.com/photos/1596574/pexels-photo-1596574.jpeg');

        position:relative;

        background-position: center;

        text-align: center;

        color: #fff;

    }

    .banner_bg{background-repeat:no-repeat;background-size:cover;width:100%;height:auto;min-height:100%;}

    .wrapper_content{padding: 50px 0;}

    .widget-area{

        background-color: #fff;

        box-shadow:0 3px 6px rgba(0,0,0,0.1);

        padding: 20px;

        border:1px solid #eee;

    }

    

    .affix{

        right: 16%;

        width: 400px;

        top: 5%;

    }

    

    // bootstrap will add affix-top and affix-botttom class as well we can use if required 

    

    </style>

<header></header>

    <div class="banner_bg wrapper_header">

    </div>

    <div class="wrapper_content">

<div class="container">

    <div class="row">

<div class="col-xs-12 col-sm-12 col-md-8 col-lg-8">

    <div>

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>



                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>



                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>



                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

    

                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

                cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

                proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

        

                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

                cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

                proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

                    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

                    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

                    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

                    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

                    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

            

                                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

                    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

                    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

                    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

                    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

                    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

                        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

                        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

                        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

                        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

                

                                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

                        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

                        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

                        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

                        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

                            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

                            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

                            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

                            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

                            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

                    

                                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

                            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

                            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

                            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

                            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

                            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

                                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

                                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

                                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

                                cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

                                proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

                        

                                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

                                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

                                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

                                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

                                cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

                                proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

    </div>

</div>

<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4" data-spy="affix" data-offset-top="720" >

    <div class="widget-area"  >

        <aside>



<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>        

</aside>

    </div>

</div>

</div>

</div>

</div>





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

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

Just add data-spy="affix" data-offset-top="720" into your sidebar container. and add style for affix

I hope this will help you.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<style>

body,html{padding:0;margin: 0;height: 100%;}

    .wrapper_header{

        background-image:url('https://images.pexels.com/photos/1596574/pexels-photo-1596574.jpeg');

        position:relative;

        background-position: center;

        text-align: center;

        color: #fff;

    }

    .banner_bg{background-repeat:no-repeat;background-size:cover;width:100%;height:auto;min-height:100%;}

    .wrapper_content{padding: 50px 0;}

    .widget-area{

        background-color: #fff;

        box-shadow:0 3px 6px rgba(0,0,0,0.1);

        padding: 20px;

        border:1px solid #eee;

    }

    

    .affix{

        right: 16%;

        width: 400px;

        top: 5%;

    }

    

    // bootstrap will add affix-top and affix-botttom class as well we can use if required 

    

    </style>

<header></header>

    <div class="banner_bg wrapper_header">

    </div>

    <div class="wrapper_content">

<div class="container">

    <div class="row">

<div class="col-xs-12 col-sm-12 col-md-8 col-lg-8">

    <div>

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>



                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>



                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>



                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

    

                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

                cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

                proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

        

                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

                cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

                proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

                    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

                    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

                    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

                    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

                    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

            

                                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

                    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

                    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

                    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

                    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

                    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

                        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

                        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

                        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

                        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

                

                                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

                        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

                        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

                        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

                        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

                            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

                            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

                            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

                            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

                            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

                    

                                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

                            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

                            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

                            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

                            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

                            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

                                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

                                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

                                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

                                cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

                                proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

                        

                                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

                                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

                                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

                                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

                                cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

                                proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

    </div>

</div>

<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4" data-spy="affix" data-offset-top="720" >

    <div class="widget-area"  >

        <aside>



<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>        

</aside>

    </div>

</div>

</div>

</div>

</div>





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

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<style>

body,html{padding:0;margin: 0;height: 100%;}

    .wrapper_header{

        background-image:url('https://images.pexels.com/photos/1596574/pexels-photo-1596574.jpeg');

        position:relative;

        background-position: center;

        text-align: center;

        color: #fff;

    }

    .banner_bg{background-repeat:no-repeat;background-size:cover;width:100%;height:auto;min-height:100%;}

    .wrapper_content{padding: 50px 0;}

    .widget-area{

        background-color: #fff;

        box-shadow:0 3px 6px rgba(0,0,0,0.1);

        padding: 20px;

        border:1px solid #eee;

    }

    

    .affix{

        right: 16%;

        width: 400px;

        top: 5%;

    }

    

    // bootstrap will add affix-top and affix-botttom class as well we can use if required 

    

    </style>

<header></header>

    <div class="banner_bg wrapper_header">

    </div>

    <div class="wrapper_content">

<div class="container">

    <div class="row">

<div class="col-xs-12 col-sm-12 col-md-8 col-lg-8">

    <div>

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>



                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>



                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>



                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

    

                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

                cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

                proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

        

                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

                cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

                proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

                    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

                    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

                    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

                    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

                    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

            

                                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

                    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

                    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

                    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

                    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

                    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

                        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

                        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

                        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

                        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

                

                                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

                        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

                        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

                        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

                        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

                            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

                            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

                            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

                            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

                            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

                    

                                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

                            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

                            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

                            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

                            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

                            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

                                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

                                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

                                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

                                cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

                                proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

                        

                                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

                                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

                                quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

                                consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

                                cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

                                proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

    </div>

</div>

<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4" data-spy="affix" data-offset-top="720" >

    <div class="widget-area"  >

        <aside>



<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>        

</aside>

    </div>

</div>

</div>

</div>

</div>





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

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

share|improve this answer

answered Nov 22 '18 at 8:01

Kesavan RKesavan R

188113

share|improve this answer

share|improve this answer

answered Nov 22 '18 at 8:01

Kesavan RKesavan R

188113

answered Nov 22 '18 at 8:01

Kesavan RKesavan R

188113

answered Nov 22 '18 at 8:01

Kesavan RKesavan R

188113

188113

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  I need like this abouolia.github.io/sticky-sidebar/examples/basic.html but I need on right side
  
  – user9437856
  Nov 22 '18 at 8:07
  

  
  
  
  

add a comment | 

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  I need like this abouolia.github.io/sticky-sidebar/examples/basic.html but I need on right side
  
  – user9437856
  Nov 22 '18 at 8:07
  

  
  
  
  

I need like this abouolia.github.io/sticky-sidebar/examples/basic.html but I need on right side

– user9437856
Nov 22 '18 at 8:07

I need like this abouolia.github.io/sticky-sidebar/examples/basic.html but I need on right side

– user9437856
Nov 22 '18 at 8:07

add a comment | 

0

is this what you want?

body, html {

        padding: 0;

        margin: 0;

        height: 100%;

    }



    .wrapper_header {

        background-image: url('https://images.pexels.com/photos/1596574/pexels-photo-1596574.jpeg');

        position: relative;

        background-position: center;

        text-align: center;

        color: #fff;

        height: 400px;

    }



    .banner_bg {

        background-repeat: no-repeat;

        background-size: cover;

        width: 100%;

    }



    aside {

        height: 100%;

    }



    .fixedElement {

        position: relative;

    }



    .wrapper_content {

        padding: 50px 0;

    }



    .widget-area {

        background-color: #fff;

        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);

        padding: 20px;

        border: 1px solid #eee;

    }

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<header></header>

<div class="banner_bg wrapper_header">

</div>

<div class="wrapper_content">

    <div class="container">

        <div class="row">

            <div class="col-xs-12 col-sm-12 col-md-8 col-lg-8">

                <div>

                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

                        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

                        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

                        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

                        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>



                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

                        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

                        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

                        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

                        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>



                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

                        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

                        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

                        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

                        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>



                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

                        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

                        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

                        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

                        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

                        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

                        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

                        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

                        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>



                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

                        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

                        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

                        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

                        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>



                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

                        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

                        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

                        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

                        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>



                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

                        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

                        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

                        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

                        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

                        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

                        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

                        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

                        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>



                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

                        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

                        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

                        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

                        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>



                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

                        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

                        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

                        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

                        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>



                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

                        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

                        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

                        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

                        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

                </div>

            </div>

            <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 anchor">

                <aside class="fixedElement">

                    <div class="widget-area ">

                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

                            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

                            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

                            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

                            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

                            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>



                    </div>

                </aside>

            </div>

        </div>

    </div>

</div>





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

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>



<script>

    $(window).scroll(function (e) {

        var $el = $('.fixedElement');

        var anchor = $('.anchor');

        var anchor = anchor.offset().top;

        var windowTop = $(this).scrollTop();



        var diff = windowTop - anchor;

        if (diff > 0) {

            $el.css({'top': diff + 'px'});

        } else {

            $el.css({'top': '0px'});

        }

    });

</script>

share|improve this answer

answered Nov 22 '18 at 8:11

faraz foroughifaraz foroughi

113

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  give me time to understand your code.
  
  – user9437856
  Nov 22 '18 at 8:13
  

  
  
  
  

add a comment | 

0

is this what you want?

body, html {

        padding: 0;

        margin: 0;

        height: 100%;

    }



    .wrapper_header {

        background-image: url('https://images.pexels.com/photos/1596574/pexels-photo-1596574.jpeg');

        position: relative;

        background-position: center;

        text-align: center;

        color: #fff;

        height: 400px;

    }



    .banner_bg {

        background-repeat: no-repeat;

        background-size: cover;

        width: 100%;

    }



    aside {

        height: 100%;

    }



    .fixedElement {

        position: relative;

    }



    .wrapper_content {

        padding: 50px 0;

    }



    .widget-area {

        background-color: #fff;

        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);

        padding: 20px;

        border: 1px solid #eee;

    }

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<header></header>

<div class="banner_bg wrapper_header">

</div>

<div class="wrapper_content">

    <div class="container">

        <div class="row">

            <div class="col-xs-12 col-sm-12 col-md-8 col-lg-8">

                <div>

                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

                        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

                        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

                        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

                        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>



                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

                        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

                        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

                        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

                        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>



                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

                        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

                        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

                        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

                        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>



                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

                        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

                        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

                        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

                        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

                        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

                        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

                        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

                        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>



                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

                        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

                        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

                        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

                        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>



                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

                        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

                        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

                        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

                        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>



                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

                        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

                        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

                        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

                        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

                        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

                        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

                        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

                        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>



                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

                        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

                        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

                        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

                        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>



                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

                        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

                        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

                        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

                        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>



                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

                        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

                        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

                        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

                        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

                </div>

            </div>

            <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 anchor">

                <aside class="fixedElement">

                    <div class="widget-area ">

                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

                            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

                            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

                            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

                            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

                            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>



                    </div>

                </aside>

            </div>

        </div>

    </div>

</div>





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

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>



<script>

    $(window).scroll(function (e) {

        var $el = $('.fixedElement');

        var anchor = $('.anchor');

        var anchor = anchor.offset().top;

        var windowTop = $(this).scrollTop();



        var diff = windowTop - anchor;

        if (diff > 0) {

            $el.css({'top': diff + 'px'});

        } else {

            $el.css({'top': '0px'});

        }

    });

</script>

share|improve this answer

answered Nov 22 '18 at 8:11

faraz foroughifaraz foroughi

113

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  give me time to understand your code.
  
  – user9437856
  Nov 22 '18 at 8:13
  

  
  
  
  

add a comment | 

0

0

0

is this what you want?

body, html {

        padding: 0;

        margin: 0;

        height: 100%;

    }



    .wrapper_header {

        background-image: url('https://images.pexels.com/photos/1596574/pexels-photo-1596574.jpeg');

        position: relative;

        background-position: center;

        text-align: center;

        color: #fff;

        height: 400px;

    }



    .banner_bg {

        background-repeat: no-repeat;

        background-size: cover;

        width: 100%;

    }



    aside {

        height: 100%;

    }



    .fixedElement {

        position: relative;

    }



    .wrapper_content {

        padding: 50px 0;

    }



    .widget-area {

        background-color: #fff;

        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);

        padding: 20px;

        border: 1px solid #eee;

    }

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<header></header>

<div class="banner_bg wrapper_header">

</div>

<div class="wrapper_content">

    <div class="container">

        <div class="row">

            <div class="col-xs-12 col-sm-12 col-md-8 col-lg-8">

                <div>

                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

                        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

                        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

                        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

                        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>



                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

                        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

                        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

                        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

                        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>



                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

                        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

                        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

                        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

                        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>



                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

                        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

                        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

                        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

                        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

                        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

                        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

                        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

                        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>



                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

                        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

                        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

                        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

                        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>



                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

                        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

                        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

                        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

                        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>



                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

                        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

                        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

                        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

                        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

                        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

                        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

                        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

                        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>



                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

                        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

                        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

                        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

                        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>



                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

                        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

                        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

                        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

                        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>



                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

                        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

                        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

                        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

                        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

                </div>

            </div>

            <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 anchor">

                <aside class="fixedElement">

                    <div class="widget-area ">

                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

                            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

                            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

                            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

                            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

                            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>



                    </div>

                </aside>

            </div>

        </div>

    </div>

</div>





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

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>



<script>

    $(window).scroll(function (e) {

        var $el = $('.fixedElement');

        var anchor = $('.anchor');

        var anchor = anchor.offset().top;

        var windowTop = $(this).scrollTop();



        var diff = windowTop - anchor;

        if (diff > 0) {

            $el.css({'top': diff + 'px'});

        } else {

            $el.css({'top': '0px'});

        }

    });

</script>

share|improve this answer

answered Nov 22 '18 at 8:11

faraz foroughifaraz foroughi

113

is this what you want?

body, html {

        padding: 0;

        margin: 0;

        height: 100%;

    }



    .wrapper_header {

        background-image: url('https://images.pexels.com/photos/1596574/pexels-photo-1596574.jpeg');

        position: relative;

        background-position: center;

        text-align: center;

        color: #fff;

        height: 400px;

    }



    .banner_bg {

        background-repeat: no-repeat;

        background-size: cover;

        width: 100%;

    }



    aside {

        height: 100%;

    }



    .fixedElement {

        position: relative;

    }



    .wrapper_content {

        padding: 50px 0;

    }



    .widget-area {

        background-color: #fff;

        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);

        padding: 20px;

        border: 1px solid #eee;

    }

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<header></header>

<div class="banner_bg wrapper_header">

</div>

<div class="wrapper_content">

    <div class="container">

        <div class="row">

            <div class="col-xs-12 col-sm-12 col-md-8 col-lg-8">

                <div>

                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

                        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

                        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

                        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

                        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>



                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

                        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

                        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

                        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

                        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>



                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

                        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

                        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

                        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

                        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>



                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

                        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

                        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

                        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

                        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

                        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

                        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

                        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

                        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>



                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

                        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

                        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

                        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

                        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>



                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

                        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

                        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

                        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

                        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>



                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

                        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

                        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

                        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

                        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

                        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

                        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

                        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

                        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>



                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

                        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

                        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

                        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

                        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>



                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

                        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

                        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

                        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

                        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>



                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

                        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

                        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

                        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

                        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

                </div>

            </div>

            <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 anchor">

                <aside class="fixedElement">

                    <div class="widget-area ">

                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

                            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

                            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

                            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

                            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

                            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>



                    </div>

                </aside>

            </div>

        </div>

    </div>

</div>





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

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>



<script>

    $(window).scroll(function (e) {

        var $el = $('.fixedElement');

        var anchor = $('.anchor');

        var anchor = anchor.offset().top;

        var windowTop = $(this).scrollTop();



        var diff = windowTop - anchor;

        if (diff > 0) {

            $el.css({'top': diff + 'px'});

        } else {

            $el.css({'top': '0px'});

        }

    });

</script>

body, html {

        padding: 0;

        margin: 0;

        height: 100%;

    }



    .wrapper_header {

        background-image: url('https://images.pexels.com/photos/1596574/pexels-photo-1596574.jpeg');

        position: relative;

        background-position: center;

        text-align: center;

        color: #fff;

        height: 400px;

    }



    .banner_bg {

        background-repeat: no-repeat;

        background-size: cover;

        width: 100%;

    }



    aside {

        height: 100%;

    }



    .fixedElement {

        position: relative;

    }



    .wrapper_content {

        padding: 50px 0;

    }



    .widget-area {

        background-color: #fff;

        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);

        padding: 20px;

        border: 1px solid #eee;

    }

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<header></header>

<div class="banner_bg wrapper_header">

</div>

<div class="wrapper_content">

    <div class="container">

        <div class="row">

            <div class="col-xs-12 col-sm-12 col-md-8 col-lg-8">

                <div>

                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

                        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

                        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

                        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

                        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>



                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

                        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

                        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

                        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

                        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>



                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

                        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

                        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

                        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

                        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>



                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

                        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

                        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

                        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

                        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

                        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

                        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

                        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

                        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>



                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

                        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

                        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

                        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

                        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>



                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

                        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

                        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

                        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

                        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>



                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

                        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

                        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

                        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

                        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

                        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

                        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

                        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

                        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>



                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

                        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

                        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

                        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

                        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>



                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

                        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

                        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

                        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

                        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>



                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

                        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

                        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

                        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

                        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

                </div>

            </div>

            <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 anchor">

                <aside class="fixedElement">

                    <div class="widget-area ">

                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

                            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

                            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

                            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

                            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

                            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>



                    </div>

                </aside>

            </div>

        </div>

    </div>

</div>





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

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>



<script>

    $(window).scroll(function (e) {

        var $el = $('.fixedElement');

        var anchor = $('.anchor');

        var anchor = anchor.offset().top;

        var windowTop = $(this).scrollTop();



        var diff = windowTop - anchor;

        if (diff > 0) {

            $el.css({'top': diff + 'px'});

        } else {

            $el.css({'top': '0px'});

        }

    });

</script>

body, html {

        padding: 0;

        margin: 0;

        height: 100%;

    }



    .wrapper_header {

        background-image: url('https://images.pexels.com/photos/1596574/pexels-photo-1596574.jpeg');

        position: relative;

        background-position: center;

        text-align: center;

        color: #fff;

        height: 400px;

    }



    .banner_bg {

        background-repeat: no-repeat;

        background-size: cover;

        width: 100%;

    }



    aside {

        height: 100%;

    }



    .fixedElement {

        position: relative;

    }



    .wrapper_content {

        padding: 50px 0;

    }



    .widget-area {

        background-color: #fff;

        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);

        padding: 20px;

        border: 1px solid #eee;

    }

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<header></header>

<div class="banner_bg wrapper_header">

</div>

<div class="wrapper_content">

    <div class="container">

        <div class="row">

            <div class="col-xs-12 col-sm-12 col-md-8 col-lg-8">

                <div>

                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

                        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

                        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

                        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

                        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>



                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

                        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

                        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

                        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

                        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>



                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

                        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

                        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

                        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

                        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>



                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

                        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

                        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

                        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

                        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

                        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

                        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

                        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

                        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>



                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

                        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

                        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

                        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

                        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>



                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

                        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

                        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

                        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

                        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>



                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

                        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

                        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

                        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

                        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

                        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

                        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

                        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

                        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>



                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

                        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

                        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

                        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

                        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>



                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

                        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

                        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

                        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

                        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>



                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

                        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

                        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

                        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

                        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

                        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

                </div>

            </div>

            <div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 anchor">

                <aside class="fixedElement">

                    <div class="widget-area ">

                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

                            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,

                            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo

                            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse

                            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non

                            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>



                    </div>

                </aside>

            </div>

        </div>

    </div>

</div>





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

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>



<script>

    $(window).scroll(function (e) {

        var $el = $('.fixedElement');

        var anchor = $('.anchor');

        var anchor = anchor.offset().top;

        var windowTop = $(this).scrollTop();



        var diff = windowTop - anchor;

        if (diff > 0) {

            $el.css({'top': diff + 'px'});

        } else {

            $el.css({'top': '0px'});

        }

    });

</script>

share|improve this answer

answered Nov 22 '18 at 8:11

faraz foroughifaraz foroughi

113

share|improve this answer

share|improve this answer

answered Nov 22 '18 at 8:11

faraz foroughifaraz foroughi

113

answered Nov 22 '18 at 8:11

faraz foroughifaraz foroughi

113

answered Nov 22 '18 at 8:11

faraz foroughifaraz foroughi

113

113

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  give me time to understand your code.
  
  – user9437856
  Nov 22 '18 at 8:13
  

  
  
  
  

add a comment | 

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  give me time to understand your code.
  
  – user9437856
  Nov 22 '18 at 8:13
  

  
  
  
  

give me time to understand your code.

– user9437856
Nov 22 '18 at 8:13

give me time to understand your code.

– user9437856
Nov 22 '18 at 8:13

add a comment | 

Thanks for contributing an answer to Stack Overflow!

• Please be sure to answer the question. Provide details and share your research!

But avoid …

• Asking for help, clarification, or responding to other answers.


• Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

• Please be sure to answer the question. Provide details and share your research!

But avoid …

• Asking for help, clarification, or responding to other answers.


• Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53425694%2fhow-to-set-asidebar-fixed-on-right-side-and-left-side-content-scroll%23new-answer', 'question_page');
}
);

Post as a guest

Name

Email

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

Name

Name

Email

Required, but never shown

Email

Required, but never shown

Email

Required, but never shown

Email

Required, but never shown

Name

Name

Email

Required, but never shown

Email

Required, but never shown

Email

Required, but never shown

Email

Required, but never shown

This page is only for reference, If you need detailed information, please check here