我如何阻止我的身体元素滚动到我的导航栏后面？

<div class="navbar">导航栏</div>
<div class="placeholder"></div>
<div class="content">页面内容</div>

.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 50px;
  background-color: #f1f1f1;
}

.placeholder {
  height: 50px;
}

.content {
  margin-top: 50px; /* 留出导航栏的高度 */
}

window.addEventListener('scroll', function() {
  var navbar = document.querySelector('.navbar');
  var content = document.querySelector('.content');
  var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
  var navbarHeight = navbar.offsetHeight;

  if (scrollTop >= navbarHeight) {
    content.style.marginTop = navbarHeight + 'px';
  } else {
    content.style.marginTop = '0';
  }
});