Genri_Rus

В обработчике события scroll определяйте индекс первого элемента, offset.top + height которого превышает текущее значение прокрутки, и подсвечивайте соответствующую кнопку.

https://jsfiddle.net/tr03ph2f/

Если примитивно на jQuery, то вот:

$(document).on('click', "ul li", function() {

  let elementID = $(this).attr("data-nav");

  $('html, body').animate({
    scrollTop: $("#" + elementID + "").offset().top
  }, 700);

});

У вас в цикле же выводится сначала NameOne потом NameTwo и без всяких условий...

Сделал более правильное получение img.src
и убрал цикл, чтобы не выводилось все сразу.
Ведь при клике на одну кнопку нужен лишь один вывод, не так ли?

Также, добавил более удобное присвоение названий (типа NameOne, NameTwo)
- теперь не нужно лезть в скрипт,
достаточно у того же изображения указать data-name=[название].
https://codepen.io/ioann-petruhinn/pen/EBPjbg

И, версия без data-name, только с переделанным циклом.
https://codepen.io/ioann-petruhinn/pen/JQGYYp

На самом деле используя ES6 можно ваш код сделать очень красивым. Так что ловите решение

так?

У вас неправильно записано......... так не записывают элементы в массиве.
Вот ссылка как правильно

и код на всякий

let obj = {
		    	'nameOneItem' : 'Name one',
		    	'nameTwoItem' : 'Name two'
	    	};
		
		$('button').click(function() {
			for(let key in arr){
				console.log(arr[key])
			}
		});

$('button').click(function() {
    
    let button = $(this).next();
  
    let arr = {
       'nameOneItem' : 'Name one',
       'nameTwoItem' : 'Name two'
    };
  
    let out = '';   
  
    for (let i in arr) {
       out += '<span>' + arr[i] + '</span>';
    }
  
    button.append(out);
});

Вызывая метод text, вы затираете содержимое элемента. Чтобы не терять ранее добавленный контент, добавляйте текст в отдельный элемент. Например.

Решается более четким позиционированием летящего блока в самом начале. Плюс position: fixed; для него решает.



UPD: попробуй поизменять ширину окна в полёте.

сделать moved-item тоже через position: fixed

имею ввиду изменить стиль moved-item и использование анимации в скрипте
например, сделать такую анимацию

$('.moved-item').css({'top' : offset.top-window.scrollY + 'px', 'left' : offset.left + 'px'}).fadeIn("slow").animate({'top': icon.offset().top-window.scrollY, 'left': icon.offset().left + 20}, 1200, 
    function(){ $(this).remove(); }
  );

str.replace(/\(.*?\)$/, '');

Добавьте картинке data-атрибут со значением ID инпута, который за ней закреплен:

<img src="http://lorempixel.com/30/30/city" data-input="check-option-1">

Далее получайте ID чекнутого инпута

$('body').on('change', '.check', function(){
    let id = $(this).attr('id');
    if ($(this).prop('checked')) {
        let img = $('img[data-id="'+id+'"]').attr('src');
}
});

В коде могут быть ошибки, работоспособность не проверял.

UPD: добавил песочницу https://jsfiddle.net/qf8zgshw/

let img = $(this).parent().siblings('img').attr('src');

Вы пишете:

Нужно в localStorage хранить не только значения, но и ключи
Примерно вот так:

0: {
 id: id,
 p: текст параграфа
},

при этом у вас:

<p><input class="check" id="check-option-1" name="name" type="checkbox">
  <label for="check-option-1"></label>
  </p>
  <p class="copy">1</p>
  <p class="copy-2">1.1</p>

объясние, откуда должен взяться id, из какого именно элемента p долже браться текст?

['color', 'image'].forEach((item) => localStorage.removeItem(item));