Tigronix

var Elem = $('ваш элемент').offset().top;

$(window).scroll(function(){
    if ($(this).scrollTop() > Elem ) { ...}
});

частично можно используя required и :valid
:valid выберет поля прошедшие валидацию, а required сделает таковыми только те поля что заполнены
www.w3schools.com/w3css/tryit.asp?filename=tryw3cs...
обратите внимание на

.w3-input:not(:valid)~.w3-validate {
    color: #f44336;
}
.w3-label {
    color: #009688;
}

Наверное мой способ слишком хлопотный, но так как это мне не приходится делать часто, то меня он вполне устраивает. Итак.
1. Иду на fontello.com и выбираю иконку
2. Открываю ее в редакторе, там будет строка типа такой:

<glyph glyph-name="menu" unicode="&#xf008;" d="<тут координаты всякие>

заменяю ее на
<path d="<тут координаты всякие>
Так же очищаю весь мусор вокруг, получается примерно так:

<svg width="22" height="22" xmlns="http://www.w3.org/2000/svg">
    <g>
        <title>Layer 1</title>
        <path d="<тут координаты всякие>" id="svg_1" fill="black" transform="rotate(180, 11, 11.0614)"/>
    </g>
</svg>

3. После этого открываю prohtml.net/services/svg и вставляю в редактор получившийся код, после чего масштабирую его до нужных размеров.
4. Копирую получившийся код в новый файл .svg

Цвет плейсхолдера - это какое-то неведомое мне шаманство, а в остальном просто:

$('form').submit(function(e) {
  $(this).find('.required input, .required textarea').each(function() {
  	if(!$(this).val()) {
    	$(this).parent().addClass('has-error');
      $(this).attr('placeholder', 'Поле обязательно для заполнения');
    }
    else {
    	$(this).parent().removeClass('has-error');
      $(this).attr('placeholder', '');
    }
  });
  if($(this).find('.has-error').length)
  	e.preventDefault();
  else
  	alert('Submit!');
});

https://jsfiddle.net/TheDeadOne/0v778ges/2/

Назовите каждый попап индивидуальным именем. Например с помощью id.

<div id="popup_1">...</div>
<div id="popup_2">...</div>

Сделайте на кнопках открытия ссылки на эти попапы, например с помощью data-атрибутов:

<button class="time-work" data-popup="popup_1">Open 1</button>
<button class="time-work" data-popup="popup_2">Open 2</button>

Немного модифицируйте обработчик кликов, чтобы открывать только нужный:

$('.time-work').on("click", function () {
    var target = $(this).data("popup");
    $("#" + target).show();
});

Это решение хорошо тем, что не нужна вложенность попапов в кнопки их открытия. Попапчики могут лежать совершенно в любом месте.

Под ретину нужно подготовить растовую графику с запасом по качеству (засунуть в смарт объект), в идеале еще иконки сделать в векторе, ну или тоже с запасом 2x. В принципе это все, в остальном это должен быть обычный макет и верстается как обычно.

flex-box -> order

https://jsfiddle.net/1hwxpwup/7/ - 3й встал на место 1го и html никак не пострадал

Вместо offset.top используйте data_popup.top.

jQuery(function ($) {
    $('#button').on('click', function() {
        $('.popup').text($(this).attr('title'));
    });
});

Или так (без jQuery, скрипт должен быть размещен перед закрывающим тегом body):

document.getElementById('button').onclick = function() {
        var elements = document.getElementsByClassName('popup');
        for(var index in elements) {
            elements[index].innerText = this.title;
        }
    }

Правильно, только не туда написал. Напиши это уже в уже в существующий path, перед d.
<path style="fill:#65C178;" d=""/>