css - Float a DIV after scrolling accross the DIV

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

});

像这样的东西应该工作

Answer 2

查看 Chris Coyier 的“持久标头”：
http ://css-tricks.com/persistent-headers/

这是一些代码，用于在滚动浏览该内容时使某些内容区域的标题保持在屏幕顶部可见。然后在您滚动过去相关部分时离开。

他还发布了另一个实现的链接。