Please help wwith making my side ad sliding

Discussion in 'CSS' started by majorson, Dec 14, 2011.

  1. #1
    Hi everyone,

    I will be glad to get some help with making an ad on my website sliding down the page.
    The 'position:fixed' is not good for me, because the ad is not fully shown "above the fold"

    I've seen the exact thing I'm looking for on some websites. Here is exactly what I need: sims.wikia.com/wiki/Forum:The_Sims_4_predictions

    When you scroll down the page, there is a square ad on the right, which will follow you down the page.

    Please help me find that code...

    Thank you very much, Major.
     
    majorson, Dec 14, 2011 IP
  2. somacorellc

    somacorellc Peon

    Messages:
    36
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Here's the code for the ad:

    .wikia_anchor_ad .clickable {
    cursor: pointer;
    display: block;
    height: 126px;
    left: 0;
    position: absolute;
    top: 10px;
    width: 955px;


    }
     
    somacorellc, Dec 18, 2011 IP
  3. majorson

    majorson Peon

    Messages:
    15
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    I'm sorry, but that code you gave doesn't do that..

    It's only set the initial position of the ad.

    the code actually should do something like that: make a static/absolute position into fixed and opposite.

    Someone???? Maybe the answer is not css, please help!
     
    majorson, Dec 19, 2011 IP
  4. somacorellc

    somacorellc Peon

    Messages:
    36
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #4
    I just gave you the code for the ad that's on the page now. I'm not going to do your work for you. You need to take the code and figure it out.
     
    somacorellc, Dec 19, 2011 IP
  5. hdewantara

    hdewantara Well-Known Member

    Messages:
    538
    Likes Received:
    47
    Best Answers:
    25
    Trophy Points:
    155
    #5
    If you have a DOM inspector (all modern browsers have it I believe),
    you could see that the right AD box (on that http://sims.wikia.com/wiki/Forum:The_Sims_4_predictions page)
    changes its CSS position from relative to fixed, whenever page has been scrolled down below AD's offsetTop?

    So I think there has to be some JS hooked to body element which listens to page scrolling event.
     
    hdewantara, Dec 19, 2011 IP
  6. majorson

    majorson Peon

    Messages:
    15
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #6
    I finally figure it out..
    Just like I though, the idea is to make the container <div> of the ad position:fixed and cancel on scrolling.
    Those can be achieved by Jquery and not CSS alone.

     
    majorson, Dec 20, 2011 IP