CODEWITHSUNDEEP
javascriptcsscss-position
Rob
Rob

Reputation: 1495

Sticking a fixed div on scrolling down

Im trying to make a fixed div stick to the top once scrolled down.

See example - Desired effect would be for the green left column to remain anchored to the top once you have scrolled down past the red block.

Example - JS FIDDLE

HTML

<div id="block">block</div>

<div id="content">
<div id="left">fixed</div>
<div id="right">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque consequat neque ac diam pulvinar aliquet. Sed cursus mauris a ipsum ultricies malesuada. Integer vel velit accumsan, sagittis ipsum et, lacinia tellus.</p>
    <p>Praesent consequat lacus sed dui sagittis, nec interdum tellus viverra. Donec tincidunt augue justo, in eleifend leo rutrum id. Nam feugiat iaculis neque a tincidunt. In condimentum tortor quis vestibulum pharetra. Vestibulum in elit ut tortor ultricies faucibus a eu augue. Quisque dignissim nec nibh non malesuada.</p>
    <p>In ligula tellus, facilisis ac purus sed, congue congue justo. Aliquam consequat nunc lorem, nec mattis lorem facilisis quis. Aliquam vel eleifend nunc.</p>
    <p>Praesent consequat lacus sed dui sagittis, nec interdum tellus viverra. Donec tincidunt augue justo, in eleifend leo rutrum id. Nam feugiat iaculis neque a tincidunt. In condimentum tortor quis vestibulum pharetra. Vestibulum in elit ut tortor ultricies faucibus a eu augue. Quisque dignissim nec nibh non malesuada.</p>
    <p>In ligula tellus, facilisis ac purus sed, congue congue justo. Aliquam consequat nunc lorem, nec mattis lorem facilisis quis. Aliquam vel eleifend nunc.</p>
</div>
</div>

CSS

#block {
    background: #B84B3D;
    width: 100%;
    height: 200px;
    position: fixed;
    z-index: 0;
    font-size: 16px;
    color: #fff;
    text-align: right;
}
#content {
    margin-top: 160px;
    float: left;
}
#left {
    background: #73CC66;
    width: 50%;
    height: 100%;
    font-size: 16px;
    color: #fff;
    position: absolute;
}
#right {
    background-color: rgba(255,255,255,0.8);
    width: 50%;
    float: right;
    color: #ccc;
    z-index: 10;
    position: relative;
}

Is there a way to do this with CSS or more practical with JS?

Thanks in advance

Upvotes: 0

Views: 77

Answers (1)

Altaf Hussain
Altaf Hussain

Reputation: 1048

Modify your css with this

#left {
    background: #73CC66;
    width: 50%;
    height: 300px;
    font-size: 16px;
    color: #fff; 
    float:left;
    position: static;
}

and apply this javascript

<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript" ></script>
<script>
window.onscroll = function(){   
    if( window.XMLHttpRequest ) {
        var position=window.pageYOffset;
         if ( position > 160) {
          $('#left').css({'position':'fixed', 'top':'0' });
          } else {
          $('#left').css({'position':'static', 'top':'auto' }); 
         }
    }
}
</script>

Hope this works

Upvotes: 1

Related Questions