开发者

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 ad开发者_如何转开发ded to the cart)

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


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.


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


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');
              }
        });
    }
});
0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜