Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS how to control position of div?

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #43936
    kartik
    Member

    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.

    #130904
    pixelgrid
    Participant

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

    #130908
    CrocoDillon
    Participant

    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) :)

    #130909
    pixelgrid
    Participant

    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)
  • The forum ‘CSS’ is closed to new topics and replies.