0

Есть html разметка, страница скролится по горизонтали, причем перелистывается не по странице а плавный скролл, меню остается статически и не скролится, проблема в том что страницы на которых фон белый, ссылок не видно...

Подскажите как решить проблему, пожалуйста, вот разметка скроллинга.

<header class="white-color">
  <div class="container-fluid header-top">
    <div class="row border-row">
      <div class="col-xl-2 l left-section-top logos">
        <a href="#page1" class="logo-section" data-page="page1"></a>
      </div>
      <div class="col-xl-7">
        <div class="top-menu">
          <a href="#2" data-page="page2">О компании</a>
          <a href="#3" data-page="page3">Клиенты</a>
          <a href="#4" data-page="page4">Услуги</a>
          <a href="#5" data-page="page6">Автопарк</a>

          <a href="#vacancy" data-page="page9">Вакансии</a>
        </div>
      </div>
      <div class="col-xl-3">
        <div class="contacts">
          <a href="tel:+99999999" class="tel">+799999999</a>
          <a href="mailto:999999" class="eml">9999999</a>
        </div>
        <div id="burger">
          Меню
        </div>
      </div>
    </div>

  </div>
</header>

<div id="makeMeScrollable">
  <div class="scrollWrapper kinetic-active">
    <article id="1" class="slider__item about page1">Верстка страницы 1</article>
    <article id="2" class="slider__item about page2">Верстка страницы 2</article>
    <article id="3" class="slider__item about page3">Верстка страницы 3</article>
  </div>
</div>

2
  • Добавить шрифту белый text-shadow ?) Commented 13 июн. 2020 в 13:03
  • Тогда text-shadow будет и на первом слайде, мне нужно что бы когда на ссылку заходит второй слайд ссылка меняла свой цвет
    – ilyaaa521
    Commented 13 июн. 2020 в 14:16

1 ответ 1

0

Как вариант можно "слушать" скрол и на определенных брейкпоинтах, когда появляется белый фон у ссылок менять с помощью js цвет ссылок на контрастный.

window.addEventListener('scroll', function() {
  // тут пишешь условия срабатывания на определенном интервале
});

Соответственно ставишь определяешь второй брейкпоинт на котором цвет ссылок возвращается в обычное состояние.

2
  • var scrollPos = 0; $(window).scroll(function(){ var st = $(this).scrollLeft(); if (st > scrollPos){ $(".top-menu a").css("color", "red"); } else { $(".top-menu a").css("color", "black"); } scrollPos = st; }); Сделал так и не работает
    – ilyaaa521
    Commented 13 июн. 2020 в 14:37
  • codepen.io/Fainor/pen/jOWrMgb Смысл я думаю понятен. Тут подключен Jq
    – Fainor
    Commented 13 июн. 2020 в 15:32

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.