当我向上和向下滚动时，导航栏品牌不会被隐藏

Question

I'm using bootstrap for my navbar and the navbar brand is an image. I use a bit of javascript to make the navbar auto hide and show up based on scrolling. But the problem is my navbar brand(image) , still sticks to the top of the website without disappearing when scrolling unlike other navbar links. I couldn't find a solution yet.

html

<nav id="navbar" class="navbar navbar-expand-lg">
            <a  class="navbar-brand" href="#"><img class="lg" src="css/images/logo.png" alt=""></a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
            </button>
        
            <div class="collapse navbar-collapse nav-links" id="navbarSupportedContent">
                <ul class="navbar-nav ml-auto">
                    <li class="nav-item active">
                    <a class="nav-link" href="#">Home</a>
                    </li>
                    <li class="nav-item">
                    <a class="nav-link" href="#">About</a>
                    </li>
                    <li class="nav-item">
                    <a class="nav-link" href="#">Projects</a>
                    </li>
                    <li class="nav-item">
                    <a class="nav-link" href="#">Contact</a>
                    </li>
                </ul>
            </div>
        </nav>

css

.lg {
  width: 70px;
  height: 70px;
}

.nav-item {
  padding-left: 1rem;
  padding-right: 1rem;
}

.nav-link {
  font-size: 18px;
  font-weight: 500;
}


#navbar {
  background-color: #0a192f;
  position: fixed;
  top: 0;
  width: 100%;
  height: 90px;
  display: block;
  transition: top 0.3s;
}

#navbar a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 15px;
  text-decoration: none;
  font-size: 17px;
}

#navbar a:hover {
  background-color: #ddd;
  color: black;
}

javascript

var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
  var currentScrollPos = window.pageYOffset;
  if (prevScrollpos > currentScrollPos) {
    document.getElementById("navbar").style.top = "0";
  } else {
    document.getElementById("navbar").style.top = "-50px";
  }
  prevScrollpos = currentScrollPos;
}

Please help me with this issue. Thanks very much!

Answer 1

Are you executing your javascript code in the document.onLoad event? I think your issue is

If you're using jQuery, make sure you're running this piece of code in the

$(function() { ... });

block. If you're using vanilla JS, you should do it in the onLoad event:

window.addEventListener('load', function(event) {
   // your code here 
});

I did that a while back with jQuery, but I do it with classes. If it exceeds a given threshold (60px - the height of my header) then add a given class, else remove it.

$(function () {

      $(window).on('scroll', function () {
        checkForVerticalScrolling.call(this);
      });

      function checkForVerticalScrolling() {
        if ($(this).scrollTop() > 60) {
          $(".header-component").addClass('header-component-bg');
          $(".header-menu").addClass('header-menu-bg');
        } else {
          $(".header-component").removeClass('header-component-bg');
          $(".header-menu").removeClass('header-menu-bg');
        }
      }

      checkForVerticalScrolling.call(this);
    });

Hope that's useful.

Answer 2

I found the issue.

} else {
    document.getElementById("navbar").style.top = "-50px";
}

It happened because of this line of code. My navbar doesn't get disappeared completely , half of it still sticks to the top, but I couldn't see it because the navbar background color was set to transparent. so I changed "-50px" to "-90px" , now the navbar gets hidden completely. Thanks for taking your time to answer my question.