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

up vote
-1
down vote

favorite

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

enter image description here

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

enter image description here

edited Nov 22 at 7:40

asked Nov 22 at 7:18

user9437856

367111

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 at 7:24

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

add a comment |

up vote
-1
down vote

favorite

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

enter image description here

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

enter image description here

edited Nov 22 at 7:40

asked Nov 22 at 7:18

user9437856

367111

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 at 7:24

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

add a comment |

up vote
-1
down vote

favorite

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

enter image description here

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

enter image description here

edited Nov 22 at 7:40

asked Nov 22 at 7:18

user9437856

367111

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

enter image description here

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

enter image description here

html css html5 css3

edited Nov 22 at 7:40

asked Nov 22 at 7:18

user9437856

367111

edited Nov 22 at 7:40

asked Nov 22 at 7:18

user9437856

367111

edited Nov 22 at 7:40

asked Nov 22 at 7:18

user9437856

367111

asked Nov 22 at 7:18

user9437856

367111

asked Nov 22 at 7:18

user9437856

367111

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 at 7:24

@KesavanR but aside will not be fixed if I remove it.
– user9437856
Nov 22 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 at 7:24

@KesavanR but aside will not be fixed if I remove it.
– user9437856
Nov 22 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 at 7:24

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

add a comment |

3 Answers
3

active

oldest

votes

up vote
0
down vote

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.

answered Nov 22 at 7:32

Robert Perez

1179

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 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 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 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 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 at 8:04

add a comment |

up vote
0
down vote

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.

answered Nov 22 at 8:01

Kesavan R

17312

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

add a comment |

up vote
0
down vote

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>

answered Nov 22 at 8:11

faraz foroughi

give me time to understand your code.
– user9437856
Nov 22 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',
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
});

}
});

draft saved

draft discarded

Sign up or log in

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

Post as a guest

Name

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

Required, but never shown

3 Answers
3

active

oldest

votes

3 Answers
3

active

oldest

votes

up vote
0
down vote

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.

answered Nov 22 at 7:32

Robert Perez

1179

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 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 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 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 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 at 8:04

add a comment |

up vote
0
down vote

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.

answered Nov 22 at 7:32

Robert Perez

1179

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 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 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 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 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 at 8:04

add a comment |

up vote
0
down vote

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.

answered Nov 22 at 7:32

Robert Perez

1179

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.

answered Nov 22 at 7:32

Robert Perez

1179

answered Nov 22 at 7:32

Robert Perez

1179

answered Nov 22 at 7:32

Robert Perez

1179

answered Nov 22 at 7:32

Robert Perez

1179

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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 at 8:04

add a comment |

up vote
0
down vote

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.

answered Nov 22 at 8:01

Kesavan R

17312

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

add a comment |

up vote
0
down vote

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.

answered Nov 22 at 8:01

Kesavan R

17312

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

add a comment |

up vote
0
down vote

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.

answered Nov 22 at 8:01

Kesavan R

17312

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>

answered Nov 22 at 8:01

Kesavan R

17312

answered Nov 22 at 8:01

Kesavan R

17312

answered Nov 22 at 8:01

Kesavan R

17312

answered Nov 22 at 8:01

Kesavan R

17312

I need like this abouolia.github.io/sticky-sidebar/examples/basic.html but I need on right side
– user9437856
Nov 22 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 at 8:07

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

add a comment |

up vote
0
down vote

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>

answered Nov 22 at 8:11

faraz foroughi

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

add a comment |

up vote
0
down vote

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>

answered Nov 22 at 8:11

faraz foroughi

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

add a comment |

up vote
0
down vote

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>

answered Nov 22 at 8:11

faraz foroughi

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>

answered Nov 22 at 8:11

faraz foroughi

answered Nov 22 at 8:11

faraz foroughi

answered Nov 22 at 8:11

faraz foroughi

answered Nov 22 at 8:11

faraz foroughi

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

add a comment |

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

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

add a comment |

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.

Some of your past answers have not been well-received, and you're in danger of being blocked from answering.

Please pay close attention to the following guidance:

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');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

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

Post as a guest

Name

Required, but never shown

Sign up or log in

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

Post as a guest

Name

Required, but never shown

Sign up or log in

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

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Qfyilyi