Как исправить ошибки в скрипте?
 

Добрый день! Помогите, пожалуйста, исправить ошибки в скрипте, есть несколько моментов. Бьюсь уже долгое время, но безрезультатно, очень нужна помощь настоящих специалистов.
Первый момент: здесь при просмотре, обратите пожалуйста внимание, почему-то блок №1 при прокрутке пропадает. Хотя, у меня он "скользит" без ошибок. Структуру html, css и сам скрипт скопировал и вставил сюда без изменений.
Второй момент: не могу понять, почему не "скользит" блок №2. Даже если блоку №2 присваиваю другой Id и идентифицирую его отдельно, все равно стоит на месте.
Третий момент: при прокрутке страницы вниз "липкий" блок сначала прилипает к верху, а в конце уже прокручивается. При прокрутке страницы вверх "липкий" блок прокручивается, а потом уже прилипает. Как его заставить при прокрутке страницы вниз вести себя также, как и при прокрутке страницы вверх. То есть, сначала блок прокручивается, после чего уже прилипает, но не наоборот.
И последний момент: в случае, если контента на странице совсем мало (имеется ввиду в блоке .article), то происходит "дерганье" липкого блока и страница не прокручивается вниз. Очень вам благодарен за помощь!

<style>
html, body {width:100%;height:100%;}
div {margin:0;padding:0;}
.container {
  display:block;
	position: relative;
	overflow: hidden;
	width: 100%;
  max-width: 900px;
	min-width: 320px;
}
.wrapper {
  display:block;
	position: relative;
	overflow: hidden;
	width: 100%;
	padding-left: 100px;
}
.header {
  display:block;
	position: relative;
	width: 100%;
  height: 120px;
  background: #ccc;
}
.article {
	float: left;
	display: inline-block;
	position: relative;
	padding-right: 100px;
}
.content {
  display: block;
  position: relative;
  width: 100%;
}
.aside {
	float: left;
	display: inline-block;
	position: relative;
	width: 100px;
	margin-left: -100px;
  background: blue;
  color: #fff;
}
.sidebar {
  display:block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100px;
	height: 100%;
	background: red;
  color: #fff;
}
.banner {
  display: block;
  position: relative;
  width: 100%;
  height: 100px;
  background: chocolate;
  color: #fff;
}
.footer {
  display:block;
	position: relative;
	width: 100%;
  height: 200px;
  background: #ccc;
}
</style>

<div class="container">

<div class="wrapper">

<div class="header">Лого</div>

<div class="article">
<div class="content">
<p>Когда б не смутное влеченье 
Чего-то жаждущей души,<br>
Я здесь остался б — наслажденье 
Вкушать в неведомой тиши:<br>
Забыл бы всех желаний трепет, 
Мечтою б целый мир назвал —<br>
И всё бы слушал этот лепет. 
Всё б эти ножки целовал…</p>
<p>Когда б не смутное влеченье<br>
Чего-то жаждущей души,<br>
Я здесь остался б — наслажденье<br>
Вкушать в неведомой тиши:<br>
Забыл бы всех желаний трепет,<br>
Мечтою б целый мир назвал —<br>
И всё бы слушал этот лепет.<br>
Всё б эти ножки целовал…</p>
<p>Когда б не смутное влеченье<br>
Чего-то жаждущей души,<br>
Я здесь остался б — наслажденье<br>
Вкушать в неведомой тиши:<br>
Забыл бы всех желаний трепет,<br>
Мечтою б целый мир назвал —<br>
И всё бы слушал этот лепет.<br>
Всё б эти ножки целовал…</p>
<p>Когда б не смутное влеченье<br>
Чего-то жаждущей души,<br>
Я здесь остался б — наслажденье<br>
Вкушать в неведомой тиши:<br>
Забыл бы всех желаний трепет,<br>
Мечтою б целый мир назвал —<br>
И всё бы слушал этот лепет.<br>
Всё б эти ножки целовал…</p>
<p>Когда б не смутное влеченье<br>
Чего-то жаждущей души,<br>
Я здесь остался б — наслажденье<br>
Вкушать в неведомой тиши:<br>
Забыл бы всех желаний трепет,<br>
Мечтою б целый мир назвал —<br>
И всё бы слушал этот лепет.<br>
Всё б эти ножки целовал…</p>
<p>Когда б не смутное влеченье<br>
Чего-то жаждущей души,<br>
Я здесь остался б — наслажденье<br>
Вкушать в неведомой тиши:<br>
Забыл бы всех желаний трепет,<br>
Мечтою б целый мир назвал —<br>
И всё бы слушал этот лепет.<br>
Всё б эти ножки целовал…</p>
</div>
</div>

<div class="aside"><div id="sticky1">
<h3>БЛОК №1</h3>
<p>Я памятник себе воздвиг нерукотворный,<br>
К нему не зарастет народная тропа,<br>
Вознесся выше он главою непокорной<br>
Александрийского столпа.</p>
<p>Я памятник себе воздвиг нерукотворный,<br>
К нему не зарастет народная тропа,<br>
Вознесся выше он главою непокорной<br>
Александрийского столпа.</p>
<p>Я памятник себе воздвиг нерукотворный,<br>
К нему не зарастет народная тропа,<br>
Вознесся выше он главою непокорной<br>
Александрийского столпа.</p>
<p>Я памятник себе воздвиг нерукотворный,<br>
К нему не зарастет народная тропа,<br>
Вознесся выше он главою непокорной<br>
Александрийского столпа.</p>
</div></div>

</div>

<div class="sidebar">
<p>Я памятник себе воздвиг нерукотворный,<br>
К нему не зарастет народная тропа,<br>
Вознесся выше он главою непокорной<br>
Александрийского столпа.</p>
<div class="banner"><div id="sticky2">
<h3>БЛОК №2</h3>
</div></div>
</div>

</div>

<div class="footer">Подвал</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
(function($) {
    jQuery.fn.stickyBox = function(options) {
        var defaults = {
            notStickyBreakpoint: 100,
            spaceTop: 0,
            stopper: true,
            stopperSpace: 0
        };
        var config = $.extend(defaults, options);
        if ($(window).innerWidth() <= config.notStickyBreakpoint) {
            return this;
        }
        var stopper;
        if (config.stopper !== false) {
            stopper = $(config.stopper).first();
        }
        return this.each(function() {
            var box = $(this);
            box.initialStyle = box.attr('style');
            box.parentElement = box.parent();
            box.alreadyStopped = false;
            setBoxProperties(box);
            $(window).on('resize', function() {
                setBoxProperties(box);
                setBoxPosition(box);
            });
            setBoxPosition(box);
            $(window).on('scroll', function() {
                setBoxPosition(box);
            });
        });
        function setBoxProperties(box) {
            resetBox(box);
            var offsetTop = box.offset().top;
            var offsetLeft = box.offset().left;
            var boxSizing = box.css('box-sizing');
            var width;
            if (boxSizing == 'border-box') {
                width = box.outerWidth();
            } else {
                width = box.width();
            }
            box.intialOffsetTop = offsetTop;
            box.intialOffsetLeft = offsetLeft;
            box.initialWidth = width;
        }
        function setBoxPosition(box) {
            if (!box.alreadyStopped && (($(window).scrollTop() >= box.intialOffsetTop - config.spaceTop) || (box.stopPosition !== undefined && $(window).scrollTop() >= box.stopPosition))) {
                box.parentElement.css({
                    position: 'relative'
                });
                var position = 'fixed';
                var top = config.spaceTop;
                if (box.stopPosition !== undefined && $(window).scrollTop() >= box.stopPosition) {
                    position = 'absolute';
                    top = box.stopPosition + config.spaceTop - box.parentElement.offset().top;
                }
                box.css({
                    position: position,
                    top: top,
                    marginTop: 0,
                    width: box.initialWidth
                });
            } else {
                resetBox(box);
            }
        }
        function resetBox(box) {
            if (box.initialStyle !== undefined) {
                box.attr('style', box.initialStyle);
            } else {
                box.removeAttr('style');
            }

            if (config.stopper !== false && stopper.length > 0) {
                var stopperTop = stopper.offset().top;
                if (stopperTop > box.offset().top + box.outerHeight() + config.stopperSpace) {
                    box.alreadyStopped = false;
                    box.stopPosition = stopperTop - (config.spaceTop + box.outerHeight() + config.stopperSpace);
                } else {
                    box.alreadyStopped = true;
                }
            }
        }
    };
})(jQuery);

$(document).ready(function() {
	$('#sticky1').stickyBox({
		stopper: '.footer'
	});
	$('#sticky2').stickyBox({
		stopper: '.footer'
	});
});
</script>

LADYX,
На беглый просмотр
строка 175
stoppper: true,

Dilettante_Pro,
приветствую вас! Ошибку исправил, спасибо. Но без изменений.

LADYX,
Одинаковых id не должно быть ни в коем случае.

Попробуйте сделать блоки 1 и 2 не вложенными.
Например, вместо

<div class="banner"><div id="sticky">
<h3>БЛОК №2</h3>
</div></div>

сделать

<div class="banner" id="sticky2">
<h3>БЛОК №2</h3>
</div>

Ну и, естественно,

$(document).ready(function() {
    $('#sticky1').stickyBox({
        stopper: '.footer'
    });
    $('#sticky2').stickyBox({
        stopper: '.footer'
    });
});

Dilettante_Pro,
Да, про одинаковые id я знаю. Здесь дело в другом: конечно, блок №2 прилипает, но весь остальной контент, который находится в блоке .sidebar при прокрутке страницы становится за блоком №2, т.е. ниже его. А когда страницу возвращаем наверх, то этого контента в блоке .sidebar уже нет. У нас блок .sidebar в стиле имеет свойство position:absolute, вот наверное в этом причина. Но что можно сделать, я даже не могу придумать. Этот блок .sidebar, да и вся html-структура должна у меня сохраниться, ее нельзя менять или исправлять.

Да, кстати, что касается вложенности, то я не могу их сделать не вложенными. Вот и задача, что нужно мне как-то скрипт подогнать именно под мою уже существующую структуру.

Dilettante_Pro,
стоп, вы меня простите, что касается второго блока, то всё в порядке, он "скользит" как нужно, это я у себя не внимательно сделал. Этот момент снимается, все работает, извините меня. Остается мне только по остальным моментам решить задачу.

Уважаемые специалисты, прошу у вас помощи. Самому самостоятельно поправить скрипт не удается. Надеюсь на вашу помощь. Благодарю.