как переместить образ бренда на навигационную панель?

Question

как переместить образ бренда на навигационную панель?

Я пытаюсь создать навигационную панель, где изображение бренда может быть перемещено при прокрутке вниз, как показано на http://www.agilent.com/home

Я знаю, как addclass использовать jquery, но я не знаю, как добавить изображение при прокрутке вниз или есть ли какой-либо другой способ сделать этот эффект.

Как я могу достичь этого эффекта? Заранее спасибо!

javascript,jquery,html,css,

1

Ответов: 1

JavaScript, JQuery, HTML, CSS,

Похожие вопросы

score 1 · Accepted Answer

1 принят

Вам нужно использовать два изображения. Один на заголовке и один на навигаторе.

Этот фрагмент будет определять, находится ли navbar сверху и добавляет stickyкласс в элемент nav.

$(window).scroll(function() {
  if ($(window).scrollTop() > $("nav").offset().top) {
    $("nav").addClass("sticky");
  } else {
    $("nav").removeClass("sticky");
  }
});

Когда элемент nav использует stickyкласс, он должен отображать логотип nav.

nav .logo {
  display: none;
}
nav.sticky {
  position: fixed;
  top: 0;
}
nav.sticky .logo {
  display: inline;
}

jsfiddle demo