partyzanx
@partyzanx

Как сделать, чтобы у длинного плавающего aside при прокрутке клеился низом к экрану?

привет! Ребята, помогите сделать так, чтобы при прокрутке экрана вниз, если плавающий aside длинный - то чтобы он клеился низом к экрану. Но если он не длиннее высоты экрана, то чтобы так и клеился к вверху как сейчас верхом. (Идея отсюда, нужно чтобы двигался aside как на этом сайте, или как здесь первый пример)
Вот мой сайт wikihsk.ru/publ
Переделать нужно этот код
<script>
$stick = $('aside');
$foot = $('footer');
margin = 0;
offtop = $stick.offset().top - margin;
offbtm = $foot.offset().top - ( margin*2 + $stick.height() );

$(window).scroll(function () {
 scrtop = $(window).scrollTop();
 if (scrtop > offtop && $stick.hasClass('aside1')) {
 $stick.removeClass('aside1').addClass('fixed').css('top', margin);
 }
 if (offtop > scrtop && $stick.hasClass('fixed')) {
 $stick.removeClass('fixed').addClass('aside1').css('top', 'auto');
 }
 if (scrtop > offbtm && $stick.hasClass('fixed')) {
 $stick.removeClass('fixed').addClass('bottom').css('top', offbtm+margin);
 }
 if (offbtm > scrtop && $stick.hasClass('bottom')) {
 $stick.removeClass('bottom').addClass('fixed').css('top', margin);
 }
});
</script>

aside.fixed {position: fixed;}
aside {position: absolute;  display: block;
 margin-left: 650px; }
article {position: relative;}
 
 
footer {
 position: relative; 
 clear: both;
 height: 300px;
}
  • Вопрос задан
  • 565 просмотров
Пригласить эксперта
Ответы на вопрос 1
BBoyJuss
@BBoyJuss
WordPress, интерфейсы и все вытекающие
;(function($, window) {

    var aside = $('.floating-aside'),
        asideContent = aside.find('.floating-aside__content'),
        asideWidth = 0,
        asideHeight = 0,

        stickTargetStart = $('.page-content'),
        stickStart = 0,
        stickEnd = 0,
        stickTopOffset = 88,
        stickBotOffset = 0,

        pageYOffset = 0;

    function setUp() {

        asideWidth = aside.outerWidth();
        asideHeight = aside.outerHeight();

        stickStart = aside.offset().top - stickTopOffset;
        stickEnd = aside.offset().top + stickTargetStart.outerHeight() - asideHeight - stickTopOffset;

        aside.css({
            height : asideHeight
        });

        asideContent.css({
            width : asideWidth
        });
    }

    function onScroll() {

        pageYOffset = window.pageYOffset;

        if (pageYOffset >= stickEnd) {

            asideContent
                .css({
                    position : 'absolute',
                    top      : stickEnd - aside.offset().top + stickTopOffset
                })
                .removeClass('is-fixed-floated')
                .addClass('is-absolute-floated');

            return false;
        }


        if (pageYOffset <= stickStart) {

            asideContent
                .css({
                    position : 'relative',
                    top      : 'auto'
                })
                .removeClass('is-absolute-floated is-fixed-floated');

            return false;
        }


        if (pageYOffset >= stickStart && pageYOffset <= stickEnd) {

            asideContent
                .css({
                    position : 'fixed',
                    top      : stickTopOffset
                })
                .removeClass('is-absolute-floated')
                .addClass('is-fixed-floated');

            return false;
        }

    }

    if (aside.length > 0 && stickTargetStart.length > 0) {

        setUp();

        window.addEventListener('scroll', onScroll, supportsPassive ? { passive: true } : false);
        window.addEventListener('resize', setUp, false);

        $('#configNav .config-nav__list > li > a').on('shown.bs.tab', function (e) {
            setUp();
        });
    }

})(jQuery, window);
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы