时间戳

首页 > 解决方案 > 我怎样才能开发一个没有跳跃的响应式和粘性导航栏？

javascript - 我怎样才能开发一个没有跳跃的响应式和粘性导航栏？

问题描述

我有一个响应式标题，随着屏幕尺寸的变化而变化。这证明很难创建一个粘性和响应式导航栏，因为标题大小总是在变化时不会跳转。我正在使我的网站对移动设备友好，这是我已经研究了几个小时的问题。

我尝试将导航栏包装在 div 包装器中以及其他一些建议的东西以防止它跳跃。

HTML：

<img src="banner.png" alt="Kayla Mustion - Full-Stack Web Developer" class="responsive">
</head>

<body>

<div class="navbar" id="navbar">
    <a class="active" href="index.html">Home</a>
    <a href="projects.html">Projects</a>
    <a href="photography.html">Photography</a>
    <a href="blog.html">Blog</a>
    <a href="contact.html">Contact</a>
    <a href="javascript:void(0);" class="icon" onclick="mobileMenu()">
        <i class="fa fa-bars"></i>
    </a>
</div>

页面底部的Javascript：

<script>
function mobileMenu() {
  var x = document.getElementById("navbar");
  if (x.className === "navbar") {
    x.className += " responsive";
  } else {
    x.className = "navbar";
  }
}   

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

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

function stickyNav() {
  if (window.pageYOffset >= sticky) {
    navbar.classList.add("sticky")
  } else {
    navbar.classList.remove("sticky");
  }
}


</script>

CSS：

.responsive {
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 10px;
    width: 95%;
    height: auto;
}

.navbar {
  overflow: hidden;
  background-color: #B2861E;
  position: sticky;
  scroll-behavior: smooth;
}

.navbar a {
  float: left;
  display: block;
  color: #453C32;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.navbar a:hover {
  background-color: #4F5D75;
  color: #453C32;
}

.navbar a.active {
  background-color: #453C32;
  color: #B2861E;
}

.navbar .icon {
  display: none;
}

.content {
  padding: 30px;
}

.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}

.sticky + .content {
  padding-top: auto;
}

我希望导航栏在到达顶部时保持不变，而不是在到达某个像素点时跳跃，无论屏幕大小如何。我发布了与本节相关的内容，但如果需要，可以将整个代码上传到某处。

标签： javascripthtmlcssnavbarsticky

解决方案

好的，所以我添加了一些引导程序，因为我经常使用引导程序并找到了一些我想尝试的代码。我将导航栏包装在一个粘性顶级引导包装器中。希望这对将来的人有所帮助！

本质上，现在无论我的响应式标题图像大小如何，导航栏都会粘在页面顶部。这样它可以响应，我不必为标题设置任何特定的大小。

推荐阅读