Как заставить липкий блок липнуть?

304

29 апреля 2017, 22:52

Первый момент: здесь при просмотре, обратите пожалуйста внимание, почему-то блок №1 при прокрутке пропадает. Хотя, у меня он "скользит" без ошибок.

Второй момент: при прокрутке страницы вниз "липкий" блок сначала прилипает к верху, а в конце уже прокручивается. При прокрутке страницы вверх "липкий" блок прокручивается, а потом уже прилипает. Как его заставить при прокрутке страницы вниз вести себя также, как и при прокрутке страницы вверх? То есть, сначала блок прокручивается, после чего уже прилипает, но не наоборот.

И третий момент: в случае, если контента на странице совсем мало (имеется ввиду в блоке .article), то происходит "дерганье" липкого блока и страница не прокручивается вниз. Очень вам благодарен за помощь!

(function($) { 
    jQuery.fn.stickyBox = function(options) { 
        var defaults = { 
            notStickyBreakpoint: 100, 
            spaceTop: 0, 
            stoppper: 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' 
	}); 
});

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; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<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>