Изменение фона панели навигации при прокрутке

Я хочу начать с прозрачного фона, а затем для background-color: rgba(255, 255, 255, 0.6); перейти к навигации, когда зритель начнет прокручивать страницу вниз.

Это то, что у меня есть, поэтому HTML-страница тянет код JS.

<head>
<script src="nav.js" type="text/javascript"></script>
</head>

Это то, что я имею для navbar. Я не очень хочу весь navbar изменить с прокруткой, просто inner, logo изображение должно быть прозрачным.

 <nav class="navbar" >
    <img src="images/logo.png" class="logo">
    <div id="inner" id="top">

    <ul>
      <li><a href="index.html" title="Home">HOME</a></li>
      <li><a href="about.html" title="About">ABOUT</a></li>
      <li><a href="contact.html" title="Contact">CONTACT</a></li>
    </ul>
    </div>
</nav>

Вот мой CSS (если больше нужно, я могу опубликовать).

#inner{
width:140px;
float:right;
margin-right:5px;
text-align:justify;
}
.navbar a {
font-size: 14px;
font-family:SinkinSansLight;
letter-spacing:5px;
line-height: 20px;
border:none;
padding: 2px ;
text-decoration: none;
margin-top: 10px;
}

Наконец, мой js, который был просто скопирован из других тем на SO и скорректирован с помощью идентификатора из моего css.

function checkScroll(){
var startY = $('#inner').height() * 2; //The point where the navbar changes in px

if($(window).scrollTop() > startY){
    $('#inner').addClass("scrolled");
}else{
    $('#inner').removeClass("scrolled");
}
}

if($('#inner').length > 0){
$(window).on("scroll load resize", function(){
    checkScroll();
});
}

Извините, что так много всего, я просто вижу, что многим людям нужно больше кода, чем предоставляется, и я пробовал несколько вариантов с js. Спасибо за помощь!

Источник

1 ответ

Изменить: обнаружил проблему. Вы пытаетесь использовать jQuery, но не включили его в страницу. Разместите на своем сайте jQuery.

Я не совсем уверен, что вы спрашиваете, потому что код JQuery, который вы опубликовали, работает нормально... Он добавляет класс scrolled в #inner когда пользователь прокручивает.

Вот фрагмент с вашим кодом. Я добавил переход к #inner и цвет фона для #inner.scrolled и установите высоту на теле, чтобы вы могли прокручивать и видеть, как оно работает.

function checkScroll() {
  var startY = $('#inner').height() * 2; //The point where the navbar changes in px

  if ($(window).scrollTop() > startY) {
    $('#inner').addClass("scrolled");
  } else {
    $('#inner').removeClass("scrolled");
  }
}

if ($('#inner').length > 0) {
  $(window).on("scroll load resize", function() {
    checkScroll();
  });
}
body {
  height: 1000px;
}
#inner {
  width: 140px;
  float: right;
  margin-right: 5px;
  text-align: justify;
  position: fixed;
  transition: background-color 1s;
}
#inner.scrolled {
  background-color: rgba(255, 0, 0, 0.6);
}
.navbar a {
  font-size: 14px;
  font-family: SinkinSansLight;
  letter-spacing: 5px;
  line-height: 20px;
  border: none;
  padding: 2px;
  text-decoration: none;
  margin-top: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="navbar">
  <img src="images/logo.png" class="logo">
  <div id="inner">
    <ul>
      <li><a href="index.html" title="Home">HOME</a>
      </li>
      <li><a href="about.html" title="About">ABOUT</a>
      </li>
      <li><a href="contact.html" title="Contact">CONTACT</a>
      </li>
    </ul>
  </div>
</nav>

Источник
Другие вопросы по тегам