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

Question

[partyzanx]

привет! Ребята, помогите сделать так, чтобы при прокрутке экрана вниз, если плавающий 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;
}

Comments

[Ankhena]

нужно чтобы двигался aside как на этом сайте,

Ну так и возьмите оттуда скрипт, чего каждый день спрашивать?

[partyzanx]

Ankhena W: там не работает. Ваш комментарий бессмысленен, как и этот сайт с такими комментариями)

[Ankhena]

partyzanx:

как и этот сайт с такими комментариями

Значит пора на фриланс.

Answer 1

[Юнус Газиев]

;(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);

Comments

[partyzanx]

Спасибо большое за внимание.
Я вставил это решение между тегами script, но ничего не двигается вообще.
Возможно, что-то нужно заменить?

[Юнус Газиев]

Да, теперь необходимо адаптировать скрипт под свои нужды (:

[partyzanx]

Юнус Газиев: адаптирую, но ничего не меняется))) а css какой?)

[Юнус Газиев]

.floating-aside
    position relative

    &__content
        width inherit
        z-index 1030
        transition: transform 0.16s linear
        transform: translateY(39px)
        will-change position
        backface-visibility hidden
        
        &.is-absolute-floated,
        &.is-fixed-floated {}

[partyzanx]

Юнус Газиев: а за сколько бы ты адаптировал мой первоначальный скрипт ?) надо просто указать условие, что если aside длиннее экрана, то при прокрутке вниз он будет цепляться низом, а при прокрутке вверх также будет цепляться верхом