Tomáš Daněk

julianware.com/jquery-scroll-follow-sticky-fixed-sidebar 

• // Float block + Sticky navigation
  $(function() {
    scrollPoint       = 100,             // Distance to scroll before sticking
    topPadding        = 100,             // Fixed minimum distance from top of window
    bottomPadding     = 40,              // Adjustment to scrolling element point of deactivation at footer
    $window           = $(window),
    documentHeight    = $(document).height(),
    $sticky           = $('.float-block'),    // Scrolling element
    $footer           = $('footer'),     // Footer container
    $sidebar          = $('.content'),      // Sidebar Container
    sidebarHeight     = $sidebar.outerHeight(),
    footerHeight      = $footer.outerHeight(),
    offset            = $sticky.offset(),
    stop       = sidebarHeight - $sticky.height() - 15,
    $menu = $('#main-menu');
  });
  function floatBlock() {
    if (($window.scrollTop() > offset.top - scrollPoint) && ($window.scrollTop() < (documentHeight - footerHeight) - sidebarHeight + bottomPadding)) {
      if (($window.scrollTop() - offset.top + topPadding) < stop) {
        $sticky.stop().animate({marginTop: $window.scrollTop() - offset.top + topPadding},0);   // Last number is drag animation duration     
      }
      else {
        $sticky.stop().animate({marginTop: stop},0);
      }
      $menu.addClass('affix'); // Sticky navigation
    } else {
      $sticky.stop().animate({marginTop: 0},0);   // Input same drag animation duration as above
      $menu.removeClass('affix'); // Sticky navigation
    }
  }
  $(window).scroll(function(){
    floatBlock();
  });

Plovoucí (floating div) SkyScraper reklama

• respektuje výchozí umístění od horního okraje
• nepřekryje obsah patičky
• pohyb obsahuje efekt animace

JS:

$(document).ready(function(){
  var skyscraperAd = $("#skyscraper");
  var skyscraperOffset = skyscraperAd.offset().top;
  var skyscraperBottom = $("#footer").offset().top – skyscraperAd.height();
  $(window).scroll(function() {
    skyscraperAd.stop();
    var windowTop = $(window).scrollTop();
    if (windowTop > skyscraperOffset) {
      if (windowTop > skyscraperBottom) windowTop = skyscraperBottom;
      if (windowTop < 0) windowTop = 0;
      skyscraperAd.animate({top: windowTop + 'px'}, 'fast');
    } else
      skyscraperAd.animate({top: skyscraperOffset + 'px'}, 'fast');
  });
});

CSS:

#skyscraper {
  position: absolute;
  top: 300px;
  left: 50%;
  margin-left: 500px;
  width: 120px;
  height: 600px;
}

Plovoucí blok respektující obklopující prvek (např. postranní sloupec – sidebar)

• respektuje rozměry obklopujícího prvku
• Demo viz příloha

JS:

/**
 * Sticky element in the wrapper on scroll
 */
var jQuery = jQuery.noConflict();
jQuery("document").ready(function($){ 
  $(window).scroll(function () {
    var sticky = $(".sticky");
    var wrapper = $(".wrapper");
    var top = $(window).scrollTop();
    var wrapperTop = wrapper.offset().top;
    var wrapperBottom = wrapperTop + wrapper.height();
    var normalPosition = wrapperBottom - sticky.height();
    if (wrapperTop < top && normalPosition > top) {
     sticky.addClass("sticky-top");
      sticky.removeClass("sticky-bottom");
    } else {
      sticky.removeClass("sticky-top");
      if (wrapperBottom > top && normalPosition < top) {
        sticky.addClass("sticky-bottom");    
     } else {
        sticky.removeClass("sticky-bottom");
     }
    }
  });
});

CSS:

/**
 * Sticky element in the wrapper on scroll
 */
body {
  min-height: 2000px; /* optional */
}
.wrapper {
  position: relative;
  height: 300px; /* optional */
  background: #eee; /* optional */
}
.sticky {
  width: 300px; /* optional */
  background: #ccc; /* optional */
}
.sticky-top {
  position:fixed;
  top: 0;
}
.sticky-bottom {
  position: absolute;
  bottom: 0;
}