Конфликт между javascript и медиа-запросами - PullRequest
Новая
       5

Конфликт между javascript и медиа-запросами

0 голосов
/ 22 января 2020

Я создал скрипт для модификации моей панели навигации, когда пользователь прокручивает страницу вниз. Мне нужно изменить верхнее значение для моей отзывчивой кнопки меню (#menu-btn)

. После выполнения сценария мой ul принимает имя класса scrolled, и применяются все стили, кроме top значение, которое установлено в 19px из-за медиа-запроса.

Это то, чего я не понимаю. Это как приоритет для медиа-запроса?

Спасибо за вашу помощь.

Вот моя навигация 

<ul class="nav justify-content-center">
        <li><a id="menu-btn"><img src="img/menu-icon.png" alt=""></a></li>
        <li class="nav-item">
            <a id="logo-lc" class="nav-link active" href="index">
                <img src="img/logo-lc.svg" width="60px" />
            </a>
        </li>
        <li class="nav-item" id="li-services">
            <a class="nav-link" href="services">Services</a>
        </li>
        <li class="nav-item" id="li-creations">
            <a class="nav-link" href="creations">Créations</a>
        </li>
        <li class="nav-item" id="li-presentation">
            <a class="nav-link" href="presentation">Présentation</a>
        </li>
        <li class="nav-item" id="li-contact">
            <a class="nav-link" href="contact">Contact</a>
        </li>
    </ul>

Вот мой медиа-запрос для маленького экрана 

@media screen and (max-width: 600px) {
  .nav li{
    width: 100%;
    text-align: center;
  }
  .nav li a{
    display: inline-block;
  }
  .nav #li-services, .nav #li-creations, .nav #li-presentation, .nav #li-contact{
    display: none;
  }
  #menu-btn{
    position: absolute;
    top: 19px;
    left: 19px;
    z-index: 99;
  }
  #menu-btn img{
    max-width: 32px;
    z-index: 99;
    cursor: pointer;
  }
}

А вот мой скрипт для прокручиваемой навигационной панели 

window.onscroll = function() {scrollFunction()};

function scrollFunction() {
  if (document.body.scrollTop > 100 || document.documentElement.scrollTop > 100) {
    $( ".nav-link" ).css( "font-size", "18px" );
    $("#menu-btn").css("top", "8px");
  }
  else {
    $( ".nav-link" ).css( "font-size", "23px" );
    $("#menu-btn").css("top", "19px");
  }
}

$(function () {
  $(document).scroll(function () {
    var $nav = $(".nav");
    $nav.toggleClass('scrolled', $(this).scrollTop() > $nav.height());
  });
});
...