Андрей

Рендеринг всегда начинается сверху. В Вашем случае просто сначала картинки еще не загружены, и контейнеры, обрамляющие их, схлопнуты, потом, когда картинки подгружаются, страница перерисовывается браузером уже с открытыми и заполненными контейнерами.
Вам поможет свойство min-height для контейнеров картинок, может быть какой нибудь прелоадер добавить.
Лучше всего подобные проблемы рассматривать не в инкогнито, а во вкладке network -> slow 3g панели разработчика со сброшенным кэшем https://cl.ly/0g3O1j2t0m45

var yourButton = $('Ваша кнопка');
var lastScrollTop = 0;
$(window).scroll(function(){
   var st = $(this).scrollTop();
   st > lastScrollTop ? yourButton.hide() : yourButton.show();
   lastScrollTop = st;
});

Ко второму titles margin-top тоже применился.
Эффект, который Вы наблюдаете, называется margin collapse и подробнее о нем можно почитать например тут

Если же нужен быстрый результат, и некогда разбираться - замените margin-top на padding-top