CODEWITHSUNDEEP
csshtmlcss-float
KD.
KD.

Reputation: 2055

Float a DIV after scrolling accross the DIV

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?

Upvotes: 1

Views: 3449

Answers (2)

Ayman Safadi
Ayman Safadi

Reputation: 11552

Check out Chris Coyier's "Persistent Header":
http://css-tricks.com/persistent-headers/

This is some code to get the header of some content area to stay visible at the top of the screen as you scroll through that content. Then go away when you've scrolled past that relevant section.

He also posts a link to another implementation.

Upvotes: 1

Trey
Trey

Reputation: 5520

$(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

Upvotes: 5

Related Questions