Grow your CSS skills. Land your dream job.

how to control position of div?

  • # April 7, 2013 at 7:25 am

    I want my div containing facebook like button, google + and tweet to move as in this link

    http://www.washingtonpost.com/sf/feature/wp/2013/04/04/her-husband-had-taken-their-young-daughter-to-iran-she-was-determined-to-get-the-child-back/?hpid=z1

    so that when i scroll the div move up and then stays stationary at the top of the page as i scroll.

    # April 7, 2013 at 8:02 am

    its an easy task with jquery.
    you have to listen for the window scroll event and when the window has scrolled a certain amount you change the position of the element from absolute to fixed;

    $(window).scroll(function(){
    var scroll = $(window).scrollTop();
    if( scroll== 300){
    $(‘.box’).css(‘position’,’fixed’);
    }

    if(scroll < 300){
    $(‘.box’).css(‘position’,’absolute’);
    }
    })

    # April 7, 2013 at 8:36 am

    You’re close, but the `==` should be `>` for it to work. If your website is responsive you’ll also want to call that function on resize, in case that number 300 (awesome movie btw) you have there changes. Speaking of which, it’s better not to hardcode that number in the script but read it from another element. Which brings me to: [epic demo](http://codepen.io/CrocoDillon/pen/kFoJm) :)

    # April 7, 2013 at 8:45 am

    you’re right , i just played with the code a little and came up with the numbers

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".