Добрый день! Помогите, пожалуйста, исправить ошибки в скрипте, есть несколько моментов. Бьюсь уже долгое время, но безрезультатно, очень нужна помощь настоящих специалистов.
Первый момент: здесь при просмотре, обратите пожалуйста внимание, почему-то блок №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>