Need help with scrolling with page div

5 replies
  • WEB DESIGN
  • |
Hi folks,

I need help as I'm not much of a programmer myself.

I want my Adsense add to scroll down with page once the top of browser window reaches the top of the add and to stop once the bottom of the ad reaches footer.

I tried with fixed position but it did not do what I wanted. Now I just positioned it to absolute.

here is a link to my site

It's the top left skyscraper 160x600 ad I want to scroll down.

Site is hosted on Blogger platform, don't know if that makes any difference or not.

Please help!
#div #page #scrolling
  • Profile picture of the author BillyW
    What didn't you like about it when you used "position:fixed;"?
    Signature
    Qosso.com - Exceptional Branding At Affordable Prices
    {{ DiscussionBoard.errors[6514642].message }}
    • Profile picture of the author mocniyoda
      Originally Posted by BillyW View Post

      What didn't you like about it when you used "position:fixed;"?
      When I used position fixed it started scrolling immediately when users scrolled down the page, I would like that ad starts scrolling down once the top of the browser window reaches the top of the ad and that it stops when it reaches footer.

      Just like 9gag.com has, their bottom 300x250 is what I want to do.
      {{ DiscussionBoard.errors[6514694].message }}
  • Profile picture of the author BillyW
    Is there another website that you know of that has the same type of ad? I've been trying to go through the CSS on 9gag.com to find out what the CSS is or find the script they're using but the code is extremely messy and unorganized.
    Signature
    Qosso.com - Exceptional Branding At Affordable Prices
    {{ DiscussionBoard.errors[6515325].message }}
    • Profile picture of the author mocniyoda
      Originally Posted by BillyW View Post

      Is there another website that you know of that has the same type of ad? I've been trying to go through the CSS on 9gag.com to find out what the CSS is or find the script they're using but the code is extremely messy and unorganized.
      Here is another example I found ~

      The ad in the right sidebar, this is exactly I was looking for, and it stops at some point. But the scrolling is not smooth, nevertheless, if I could make that same effect that would be awesome!
      {{ DiscussionBoard.errors[6515572].message }}
  • Profile picture of the author BillyW
    Here's what I've found so far:

    <div id="sticky-anchor"></div>
    <div id="sticky">This will stay at top of page</div>

    <div>
    <style>
    #sticky {
    background-color: #fff;
    -moz-border-radius: 0.5ex;
    -webkit-border-radius: 0.5ex;
    border-radius: 0.5ex;
    color: #000;
    font-size: 2em;
    padding: 0.5ex;
    width: 600px;
    }
    #sticky.stick {
    -moz-border-radius: 0 0 0.5em 0.5em;
    -webkit-border-radius: 0 0 0.5em 0.5em;
    border-radius: 0 0 0.5em 0.5em;
    position: fixed;
    top: 0;
    z-index: 10000;
    }
    </style>
    </div>

    <!-- If you have jQuery directly, then skip next line -->
    <script src="http://www.google.com/jsapi"></script>

    <script type="text/javascript">
    // If you have jQuery directly, then skip next line
    google.load("jquery", "1");

    function sticky_relocate() {
    var window_top = $(window).scrollTop();
    var div_top = $('#sticky-anchor').offset().top;
    if (window_top > div_top)
    $('#sticky').addClass('stick')
    else
    $('#sticky').removeClass('stick');
    }
    // If you have jQuery directly, use the following line, instead
    // $(function() {
    // If you have jQuery via Google AJAX Libraries
    google.setOnLoadCallback(function() {
    $(window).scroll(sticky_relocate);
    sticky_relocate();
    });
    </script>

    I'm still playing with it a bit, but it's pretty close to want you were looking for I believe.
    Signature
    Qosso.com - Exceptional Branding At Affordable Prices
    {{ DiscussionBoard.errors[6515491].message }}

Trending Topics