CODEWITHSUNDEEP
css
Derek Adair
Derek Adair

Reputation: 21915

fixed image within a container

What is the best way to make a div scroll along with the page?

The exact effect is utilized @ http://store.apple.com/ (on the checkout summary after a product is added to the cart)

edit: or this example - alas, it's not as smooth as i'd like it to be =/

Upvotes: 0

Views: 443

Answers (3)

Derek Adair
Derek Adair

Reputation: 21915

jQuery saves the day... again!

CSS: 

#wrapper {
  position: absolute;
  width: 200px;
}

#fancyDiv {
  position: absolute;
  top: 0;
}

#fancyDivt.fixed {
  position: fixed;
  top: 0;
}

html:

<div id="commentWrapper">
  <div id="comment">
    <p>some text</p>
  </div>
</div>

jQuery:

$(document).ready(function() {
    $(function () {
        var top = $('#fancyDiv').offset().top - parseFloat($('#fancyDiv').css('margin-top').replace(/auto/, 0));
        $(window).scroll(function (event) {
              // what the y position of the scroll is
              var y = $(this).scrollTop();

              // whether that's below the div
              if (y >= top) {
                // if so, ad the fixed class
                $('#fancyDiv').addClass('fixed');
              } else {
                // otherwise remove it
                $('#fancyDiv').removeClass('fixed');
              }
        });
    }
});

Upvotes: 0

Glo
Glo

Reputation: 604

This tutorial should help you: http://css-tricks.com/scrollfollow-sidebar/

Upvotes: 0

rahul
rahul

Reputation: 187030

In the second example, they are using jQuery to do this. Scroll event of window object is caught and the using the animate() function the position of div is changed dynamically.

Upvotes: 1

Related Questions