Проблема изменения размера окна для определения точки привязки - PullRequest
Новая
       13

Проблема изменения размера окна для определения точки привязки

0 голосов
/ 21 сентября 2018

На моей HTML-странице есть несколько разделов, создающих эффект вертикальной прокрутки.Каждый из этих разделов имеет ширину и высоту 100% экрана.Вверху страницы у меня также есть меню, установленное на position: fixed.Цвет текста меню изменяется, когда фиксированное меню достигает и определяет точку привязки путем прокрутки страницы.

Моя проблема заключается в том, что при изменении размера окна браузера я теряю определение точки привязки.Поэтому при прокрутке меню при наведении на якорь цвет меню не меняется. 

<header id="masthead" class="site-header"> Menu text </header>

<section id="section-1" class="hero"> Section 1 </section>
<section id="section-2" class="hero"> Section 2 </section>

<div class="anchor switch-menu-color"></div>

<section id="section-3" class="hero"> Section 3 </section>
<section id="section-4" class="hero"> Section 4 </section>

var anchor = $('.switch-menu-color').offset().top - 40,
  $window = $(window);

$window.on('load scroll resize', function() {
  if ($window.scrollTop() >= anchor) {
    $("#masthead").addClass("black-text");
  } else {
    $("#masthead").removeClass("black-text");
  }
});

Спасибо за помощь!

1 Ответ

0 голосов
/ 21 сентября 2018

Проблема в том, что вы когда-либо читали offset() элемента .switch-menu-color только при загрузке страницы.Это также необходимо сделать при изменении размера страницы, например: 

var anchor = $('.switch-menu-color').offset().top - 40,
  $window = $(window);

$window.on({
  'load scroll': setLinkColour,
  'resize': function() {
    anchor = $('.switch-menu-color').offset().top - 40;
    setLinkColour();
  }
});

function setLinkColour() {
  $('#masthead').toggleClass('black-text', $window.scrollTop() >= anchor);
}

Обратите внимание, что я разделил события load scroll и resize по соображениям производительности.Нет необходимости пересчитывать offset() при прокрутке страницы, только при изменении размера.

Также обратите внимание на использование toggleClass() с логическим аргументом, чтобы сделать код немного более лаконичным.

...