Как сделать так, чтобы шапка сайта не перезагружалась при переходе на другие страницы?

Спасибо за идею, чуть по другому сделал, поправил адрес - aelitaplus.ru
1 проблема исправилась, а вот вторую таким способом, наверное не решить

Как сделать так, чтобы шапка сайта не перезагружалась при переходе на другие страницы?

Да я, если честно, так до конца и не понимаю, что в итоге должно получится.
https://dance-cool.ru/ - вот например сайт. В нем меню не перезагружается (ну или мне так кажется) при переходе на страницы, но когда кликаешь на любой пункт меню, обновление контента происходит, значок перезагрузки работает, ссылка меняется, а шапка с меню не перезагружается. Вот как здесь реализовано?
Возможно, я захотел что-то из области фантастики, чтобы и значок перезагрузки не менялся, и шапка не менялась и ссылка нужная вставлялась и контент подгружался. Что это? SPA? На jquery, я так понимаю, это лучше не реализовывать.

Как реализовать отзывы на лендинге без бэкенда?

Модератор, хорошо, я учту

Как реализовать отзывы на лендинге без бэкенда?

Павел Волынцев, спасибо большое, отмечаю решением

Как реализовать отзывы на лендинге без бэкенда?

Попробуй backendless архитектуру - храни отзывы в специальном сервисе, сохраняй и получай через AJAX
https://habr.com/ru/company/backendless/blog/180367/

спасибо за ссылку, обязательно прочту

Кстати, форма у тебя не соотвествует блокам. В блоках есть картинка (отлично подготовленная дизайнером), заголовок, текст, имя, профессия. У тебя в форме имя имейл и текст отзыва.

Взял первые попавшиеся и понравившиеся картинки, просто хотел передать суть, дизайнера никакого нет)

Более чем уверен, понадобится админка для всех этих отзывов. Не такая уж и сложная.

моих знаний хватает только на верстку и немного js в плане прикрутить какой-нибудь Owl Carousel и т.д. Кстати, в кратце можете рассказать, как эта админка для отзывов можете быть устроена и что нужно почитать для реализации, так для общего развития. Спасибо.

Проблема выпадения из потока прилипающего меню?

Александр, совсем не по теме, но может вы знаете как у слайдера в блоке services при нажатии на кнопки управления поменять скорость смены слайда на такую же как и при ручной смене. Там стоит smartSpeed: 700, но он вобще не влияет на смену слайда через кнопки управления.
Слайдер: Owl Carousel 2
Сайт: https://dimanik94.github.io

Проблема выпадения из потока прилипающего меню?

Александр, я понял, спасибо за помощь, отмечаю решением.

Проблема выпадения из потока прилипающего меню?

Александр, должна быть, и не только там, а еще и в team. Попробую owlcarousel 2 или slick подключить, ниразу такими вещами не занимался. В skills должен быть еще анимированный прогрес бар при скролле, а в портфолио - сортировка по типу картинок (здесь даже незнаю с чего начать). И, наконец, добавить плавный скролл к каждому разделу и кнопку скролла наверх. Я в целом спрашиваю, svg в html, сетка - имитация бутстрапа 4. Актуально все это?

Проблема выпадения из потока прилипающего меню?

Александр, да, с position: fixed и дополнительной оберткой гораздо лучше. И, если не трудно, оцените общую структуру верстки)

Проблема выпадения из потока прилипающего меню?

Александр,

или использовать трансформацию, которая будет задавать смещение меню от начальной точки .nav до window.pageOffsetY

т.е. вместо того, чтобы задавать меню фиксированное позиционирование нужно использовать смещение через transform?
я правильно понял ваши слова?
код переписал с такого:

var mainNav = document.querySelector('.main-nav');

function offset(el) {
  var rect = el.getBoundingClientRect(),
  scrollLeft = window.pageXOffset || document.documentElement.scrollLeft,
  scrollTop = window.pageYOffset || document.documentElement.scrollTop;
  return { top: rect.top + scrollTop, left: rect.left + scrollLeft }
}
var topPosition = offset(mainNav).top;
window.onscroll = function () {
	if (window.pageYOffset >= topPosition) {
		mainNav.classList.add('sticky');
	} else {
		mainNav.classList.remove('sticky');
	}
}

на такой:

var mainNav = document.querySelector('.main-nav');

function offset(el) {
  var rect = el.getBoundingClientRect(),
  scrollLeft = window.pageXOffset || document.documentElement.scrollLeft,
  scrollTop = window.pageYOffset || document.documentElement.scrollTop;
  return { top: rect.top + scrollTop, left: rect.left + scrollLeft }
}
var topPosition = offset(mainNav).top;
window.onscroll = function () {
	if (window.pageYOffset >= topPosition) {
		var currentPosition = window.pageYOffset - topPosition;
		mainNav.style.transform='translateY(' + currentPosition + 'px)';
	}
}

вроде работает, но не хватает z-index'a, т.к в некоторых местах видно что меню находится за слоем текущего положения. как это поправить? я знаю, что z-index применяется только в том случае, если позиционирование отличается от static, но здесь оно не меняется
как мне кажется, во время прокрутки появился верхний отступ у меню высотой около 1 пикселя. откуда он там взялся?
UPD: при быстром скролле на мобильном телефоне смещение не успевает за скроллом

Есть ли возможность использовать SVG как интерактивный задний фон?

Илья Ростопка, ладно, я наконец то понял на счет этих 2 путей, но я не могу отметить решением ваш ответ. Процитируйте свою ссылку на codepen в исходной ветке, я отмечу решением

Есть ли возможность использовать SVG как интерактивный задний фон?

Илья Ростопка, спасибо, но такой адаптивности как здесь -- https://codepen.io/anon/pen/wxEYBo не добиться? Я имею ввиду уменьшение и иконки и текста при уменьшении ширины экрана? Только через медиа запросы?

Есть ли возможность использовать SVG как интерактивный задний фон?

Илья Ростопка, https://codepen.io/anon/pen/mjzJJy - так?
Сразу проблемы:
1) Иконка хоть и в центре абсолютом зафиксирована (есть размеры), но при уменьшении ширины родителя размеры иконки не меняются. Как менять размеры иконки при уменьшении размеров родителя? Это возможно при абсолютном позиционировании?
2) С текстом намного хуже. у него размером нет и трюк с позицией и соответствующим маржином не получится. Как текст в этой ситуации отцентровать?
3) Если навожусь на иконку карандаша или текста заливка у SVG пропадает, в принципе понятно почему. Ставить ховер и у иконки и текста, чтобы заливка у SVG оставалась? Или по другому можно сделать?

Есть ли возможность использовать SVG как интерактивный задний фон?

Илья Ростопка, https://codepen.io/anon/pen/NBOWLJ -- если высота item раньше складывалась из высоты SVG, то сейчас она зависит от высоты текста и иконки, и если я сейчас уменьшу иконку карандаша до нужного размера, то весь item тоже уменьшится. position relative и absolute тут нужно было использовать? Или здесь нужно использовать background-image? Вот только у кого? У дива?

Есть ли возможность использовать SVG как интерактивный задний фон?

Илья Ростопка, я тогда не понимаю, получается тег SVG не может быть чьим то родителем.
Тогда как вложить иконку и текст внутрь этого SVG шестиугольника?

Почему бы не объеденить SVG и HTML разметку одним контейнером

так и не понял эту фразу(

.item
  svg.svg
  .icon
  .text

и это не понял( это SASS?

Есть ли возможность использовать SVG как интерактивный задний фон?

Илья Ростопка, я чета туплю и не могу уловить суть ваших и unkstd ответов.
Неужели внутри тега <svg> можно вставлять другие теги (например, <div>, <a>)?
Должно получиться наподобие такого:

<div class="item">
  <svg class="hexagon">
    <svg class="icon"></svg>
    <span>BLOG</span>
  </svg>
</div>

Но такое же невозможно? Разве нет?

Есть ли возможность использовать SVG как интерактивный задний фон?

Илья Ростопка, https://codepen.io/anon/pen/wxEYBo - во втором шестиугольнике то что мне нужно, ховер на родителе -> меняется фон, дети не меняются. Но я это сделал единым SVG (и шестиугольник, и символ карандаша, и текст), а нужно чтобы было так -- родитель: SVG контейнер (шестиугольник), ребенок 1: иконка карандаша (можно png, можно снова SVG), ребенок 2: текст через тег span, например. Или это слишком мудрено?

Почему бы не объеденить SVG и HTML разметку одним контейнером

не совсем понимаю эту фразу(

Есть ли возможность использовать SVG как интерактивный задний фон?

Если честно, то я ничего не понял из вашего ответа(

просмотри файл svg в редакторе

это понятно, можно открыть хоть в блокноте

вставь всё это дело туда куда тебе надо

туда это куда?) я вставил напрямую в HTML через тег. Теперь хочу, чтобы внутрь этого SVG можно было вставить хоть текст, хоть картинку, хоть новый SVG.
https://p.w3layouts.com/demos/bhagaskara/web/ -- вот тут в демо версии все есть, только сделано все через картинку, а не через SVG. Неужели, в 2018, нельзя это сделать, чтобы этот скругленный шестиугольник выступал в роли контейнера SVG, а внутри него могли находиться дочерние элементы.

Слайдер с автоматической и ручной прокруткой?

У меня стрелки переключения слайдов не работают(

Слайдер с автоматической и ручной прокруткой?

Спасибо, отмечу решением, но до конца все равно не понял, пока сложно(