如何使div贴近父DIV

Question

I saw on my local news website a feature like this:

Where the left div is sticked to main div, AND on scroll AND on windows resize it stays sticked there, and on scroll it moves up/down also sticked to main div

Sorry for bad english / explanation ( but I think you understood ).

You can see what I want to get in this link:

http://rus.delfi.lv/news/daily/abroad/papa-rimskij-obratilsya-s-tradicionnym-rozhdestvenskim-poslaniem-k-pastve.d?id=43988560 if you are not using any Adblock :)

Is there any special jquery plugin or it is achieved with simple CSS?

Answer 1

From my website, on the left is Facebook image that scrolls with page and on mouseover (jquery) it expands and shows the plugin box:

HTML

<div id="fbwindow">
  <a href="http://www.facebook.com/.../" id="fbwindow_a"></a>
  <div class="fb-like-box" data-href="http://www.facebook.com/.../" data-width="292" data-show-faces="false" data-stream="true" data-show-border="true" data-header="true"></div>
</div>

CSS

#fbwindow { position: fixed;top:50%;margin-top:-200px;left:-292px;width:323px;height: 265px;z-index: 1000;text-align: left; }
#fbwindow div.fb-like-box { background: #FFF; }
#fbwindow > a { display: block;float: right;width: 31px;height: 187px;background: url('/layout/fb-window.png') no-repeat; }

(optional / not needed rollover effect) jQuery

$('#fbwindow_a').mouseenter(function() {
    $("#fbwindow").stop().animate({
          left: '0'
          }, 100, function() {
            //$(this).removeClass("left").addClass("right");
          });
});
$('#fbwindow').mouseleave(function() {
      $("#fbwindow").stop().animate({
      left: '-292px'
      }, 50, function() {
        //$(this).removeClass("right").addClass("left");
      });
});