Блог

Я хочу уменьшить панель навигации при прокрутке заголовка. Пока что я добился того, что панель навигации осталась вверху, как и планировалось, но я не могу понять, как получить доступ к ‘#navbar a’ через второй скрипт.

Как вы можете видеть, мне удалось просто реализовать ‘navbar’ (который не показан), но как только я попытался реализовать ‘#navbar a’, это стало очень сложно, так что с этим вопросом мне нужна помощь. Как я могу создать переменную ‘#navbar a’?

Первый файл / css /style:

 #navbar a {
      float: left;
      display: block;
      color: #f2f2f2;
      text-align: center;
      width: 25%;
      text-decoration: none;
      font-size: 35px;
    }
  

Второй скрипт

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

    var navbar = document.getElementById("navbar");
    var sticky = navbar.offsetTop;

    function myFunction() {
      if (window.pageYOffset >= sticky) {
        navbar.classList.add("sticky")
            navbar.style.align = 'auto';
            navbar.style.padding = '0px';
            navbar.style.width = '100%';
      } else {
        navbar.classList.remove("sticky");
          navbar.style.width = '80%';
          navbar.style.padding = '0, 10px';
      }
    }
  

Вы должны присвоить класс или идентификатор тегу и выбрать класс, используя этот идентификатор или class

 var navLink = document.getElementById("navbar").getElementsByClassName("class-name"); 
/* This will return an array
You can either use Foreach or access array elements.
*/


navLink[0].textContent = "Text Changed ";
navLink[1].style.color = "red ";
navLink[2].style.color = "Blue ";  

 <div id="navbar">
       <a class="class-name">Change First text</a>
       <a class="class-name">Change Second text</a>
       <a class="class-name">Change Third text</a>
    </div>  

Также другим лучшим вариантом является начать использовать jQuery, чтобы вы могли легко делать что-то вроде

var NavLink = $(‘#navbar a’)