Question

This is the URL: Check this URL

In that there is a red ribbon with subscribe, like etc.

Its fixed on the top. All i want is the ribbon should start floating on the top of the page as soon as some one scrolls below it..again if he scrolls up the ribbon goes and sits in its place.

Basic idea is that ribbon should be visible to the user always.

How to acheive something like this in CSS?

Answer 1

$(window).scroll(function(){
  if($(this).scrollTop()>$('#socio').position().top){
    $('#socio').css({position:'fixed',top:0});
  }else{
    $('#socio').css({position:'relative'});
  } 

});

something like this should work