Денис Инешин

Это делается примерно так:
1. Пользователь заходит на сайт
2. Система проверяет есть ли флаг в Cookie или в LocalStorage
3. Если флаг есть, ничего не делаем
4. Если флага нет, показываем окно, ставим этот флаг
5. Profit!

Как работают Cookie, JS-библиотека для работы с Cookie
Как работает LocalStorage

Возьмите Handlebars.js/Dust.js. Скормите ему JSON. И он сам заполнит шаблон данными.

Вам поможет умный WebPack

Вы должны так же отслеживать эти события на мобильных устройствах и реагировать на поворот экрана, благо это просто: событие "orientationChange"

Touchstart или Touchend - вполне себе правильный вариант. При работе с мышкой, в 99% случаев, вешают события на click не потому, что нужно такое поведение (нажал, потом отпустил), а просто потому что так привычней. В то же время, часто используют mousedown и mouseup по отдельности, чтобы более четко контролировать момент события.

Это делается примерно так на jQuery: https://jsfiddle.net/IonDen/v8ubpuee/

<div class="paravozik">
    Choo-choo
</div>

.paravozik {
    position: fixed;
    bottom: 0; left: 0;
    width: 100px;
    height: 50px;
    background: #000;
}

var $win = $(window),
    $paravozik = $(".paravozik"),
    top = 0,
    height = $(document.body).innerHeight(),
    vpHeight = 0,
    percent = 0;
    
$win.on("scroll", function () {
    top = $win.scrollTop();
    vpHeight = $win.innerHeight();
    percent = top / (height - vpHeight) * 100;
    $paravozik[0].style.left = percent + "%";
});