Фон панели навигации исчезает при обновлении страницы - PullRequest
Новая
       11

Фон панели навигации исчезает при обновлении страницы

0 голосов
/ 18 мая 2018

Так что сейчас у меня есть навигационная панель, которая исчезает, когда она находится вверху страницы, и когда вы прокручиваете, она возвращается обратно. Это нормально, но когда вы обновляете страницу, а навигационная панель не находится вверху страницыфон панели навигации снова исчез, потому что вам нужно прокрутить, чтобы вызвать функциюЕсть ли способ выполнить то же самое, не используя событие прокрутки?Или способ использовать функцию прокрутки, но также сохранять непрозрачность панели равной 1, когда страница обновляется, а панель навигации находится не в верхней части страницы.Заранее спасибо.

JQUERY 

$(document).ready(function(){
        var navbar = $(".navcontainer");
        $(window).scroll(function(){
           var scrollPosition = $(window).scrollTop();
           if (scrollPosition === 0){
              navbar.css("background-color", "rgba(32, 52, 74, 0");
           }else {
              navbar.css("background-color", "rgba(32, 52, 74, 1");
          }
       });
  });

CSS 

.navcontainer{
  padding: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  width: 100%;
  z-index: 1;
  transition: background-color .2s ease-in-out;
}

1 Ответ

0 голосов
/ 18 мая 2018

Я бы порекомендовал вам сделать это.Таким образом, вы можете повторно использовать метод при загрузке страницы, а также в событии прокрутки 

$(document).ready(function () {
    checkHeaderStatus()
    $(window).scroll(function () {
        checkHeaderStatus()
    });
});

function checkHeaderStatus() {
    var navbar = $(".navcontainer");
    var scrollPosition = $(window).scrollTop();
    if (scrollPosition === 0) {
        navbar.css("background-color", "rgba(32, 52, 74, 0");
    } else {
        navbar.css("background-color", "rgba(32, 52, 74, 1");
    }
}
...