Андрей Токмаков

Первая же строчка из гугла клик

Может быть потому что вы убираете плавно (hide), а показываете резко, установив opacity: 1

Очень хорошая идея, хотелось бы добавить только, почитав ответы с комментариями, в голову пришло еще, что в комментариях к ответу, было бы не плохо еще выделять имя автора ответа. Иначе при 10+ комментариях начинаешь путаться кто с кем спорит, есть ли вообще автор вопроса там, есть ли автор ответа или же просто мимо проходящие устроили баталии между собой.

В общем если хотите что бы выводилось в блок <div class="Footer" id="countFooter">2222</div>
То в

$('#countSimbol span:first').html(L);	
$('#countSimbol span:eq(1)').html(noSpace);
$('#countSimbol span:eq(2)').html(W);
$('#countSimbol span:last').html(L/40000);

заменить везде #countSimbol на #countFooter, а во внутрь добавить 4 span'а, или же в скрипте добавлять не в span'ы, а вместе с ними

https://codepen.io/anon/pen/NwjeEr

У Вас размер блока указан в vh это и есть ваша зависимость. Меняется размер окна - меняется размер блока соответственно. Хотите что бы не менялся размер, указывайте абсолютные единицы, px например. А положение его не меняется, ну опять же смотря относительно чего.

Поменяйте 100% на 25% и будет чудо

display: flex;
flex-direction: column;
flex-wrap: wrap;

Честно, слабо понятно что Вы имеете ввиду, но, что если обернуть картинку блоком, которому указать высоту, а картинке поставить 100% высоту, не пробовали?

<div style="display: inline-block;">
    Блок 1
</div>
<div style="display: inline-block;">
    Блок 2
</div>

Вот так что ли?

stickyjs.com
Вместо тысячи fixed

Весь гугл по запросу canvas

Смотрите ассеты

Model::find()->select(['description'])->all();