Навбар показать после прокрутки с эффектом перехода - PullRequest
Новая
       48

Навбар показать после прокрутки с эффектом перехода

3 голосов
/ 29 апреля 2020

На полотне c горизонтальная навигационная панель с относительным положением, блок дисплея. После прокрутки более 150 пикселей у меня есть код javascript, чтобы изменить его положение на фиксированное. Таким образом, панель появляется для пользователя ... Теперь вопрос:

Как я могу сделать (постепенно увеличивать или уменьшать) эффект перехода?

Вот скрипка: скрипка

Css: 

#navigation-panel {
  transition: all 1s linear;
}

Js: 

$(window).scroll(function () {
    console.log($(window).scrollTop());
    if($(window).scrollTop() > 150) {
        $('#navigation-panel').css('opacity', 1);
        $('#navigation-panel').css('position', 'fixed');
        $('#navigation-panel').css('opacity', 0);

    } else {
        $('#navigation-panel').css('position', 'relative');
    }
});

Я пытался установить в javascript (в css был переход: все 1 с;) :

  • непрозрачность 0;
  • положение: фиксированное;
  • непрозрачность 1

или альтернативы, такие как

  • margin-top -50px (высота панели 50px);
  • позиция: фиксированная;
  • margin: 0;

Но переход не работает ...

Есть предложения?

1 Ответ

3 голосов
/ 29 апреля 2020

Это должно сделать работу: 

$(window).scroll(function () {
  if($(window).scrollTop() > 150) {
    $('#navigation-panel').css('position', 'fixed');
    $('#navigation-panel').css('top', 0);
  } else {
  $('#navigation-panel').css('position', '');
    $('#navigation-panel').css('top', '-100%');
  }
});
.container {
  height: 1000px;
}


#navigation-panel {
  transition: all 0.5s;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="navigation-panel">
  <ul id="main-menu">
    <li>
      <a href="#about-us" class="smooth-scroll">About us</a>
    </li>
    <li>
      <a href="#services" class="smooth-scroll">Services</a>
    </li>
    <li>
      <a href="#contact" class="smooth-scroll">Contact</a>
    </li>
  </ul>
</div>

<div class="container"></div>
...