Почему блок неправильно фиксируется при прокручивании?

Question

[Влад]

Пример: https://expert-obzor.ru/antutu-benchmark-rejting-s...

Иногда (не всегда!) открываю страницы сайта и при прокрутке блок справа начинает фиксироваться, но не сверху экрана, а где-то посередине.
Если обновить страницу, то блок становится на нужное место сверху.

Реализуется данное фиксирование при помощи следующего кода:

<script type="text/javascript">
    jQuery(document).ready(function () {
            var offset = $('#toc-widget-2').offset();
            var topPadding = 0;
            $(window).scroll(function() {
                    if ($(window).scrollTop() > offset.top) {
                            $('#toc-widget-2').stop().css({marginTop: $(window).scrollTop() - offset.top + topPadding});
                    }
                    else {
                            $('#toc-widget-2').stop().css({marginTop: 20});
                    }
            });
    });
    </script>

Подскажите, пожалуйста, в чём может быть причина? Что мешает правильно вычислять отступ сверху?

Answer 1

[iBird Rose]

на load функцию тоже засунь

<script type="text/javascript">
jQuery(document).ready(function () {
    var offset = $('#toc-widget-2').offset();
    var topPadding = 0;
    $(window).scroll(function() {
        fixSide();
    });
});

$(window).on('load' function() {
    var offset = $('#toc-widget-2').offset();
    var topPadding = 0;
    fixSide();
});

function fixSide() {
    if ($(window).scrollTop() > offset.top) {
        $('#toc-widget-2').stop().css({marginTop: $(window).scrollTop() - offset.top + topPadding});
    }
    else {
        $('#toc-widget-2').stop().css({marginTop: 20});
    }
}
</script>

Answer 2

[Андрей Гончаров]

offset считается при готовности дома, но не при загрузке контента, типа изображений , которые могут повлиять на этот офсет. Обновляй его хотя бы по window load

Comments

[Влад]

то есть вместо
jQuery(document).ready(function ()
написать
jQuery(window).load(function ()

так?

[Андрей Гончаров]

Влад: jQuery(window).load(function ()
Я думаю сработает. Конечно, это не идеальное решение

[Андрей Гончаров]

или лучше вообще вот это
var offset = $('#toc-widget-2').offset();
засунуть в
$(window).scroll(function() {