小编Nis*_*ola的帖子

降低网站上的导航栏高度

我有一个用bootstrap 4制成的固定导航栏。当我向下滚动页面时,我想减小导航栏的高度。当我尝试向下滚动页面时。高度不会降低。以下是我的浏览器的视频链接

链接到我尝试过的视频

想要这样的视频效果

我已经尝试过的一些代码

$(document).ready(function() {
  $('.nav-button').click(function() {
    $('.nav-button').toggleClass('change');
  });

  $(window).scroll(function() {
    var position = $(this).scrollTop();
    if (position >= 200) {
      $('.nav-menu').addClass('.custom-navbar');
    } else {
      $('.nav-menu').removeClass('.custom-navbar');
    }
  });
});
Run Code Online (Sandbox Code Playgroud)
body {
  font-family: 'Montserrat', sans-serif;
}


/* Header */

header {
  height: 100vh;
  background: linear-gradient(rgba(0, 0, 0, .4), rgba(0, 0, 0, .5)), url(images/header-img.jpeg) no-repeat center center/cover;
}


/* Navbar */

.nav-menu {
  background: linear-gradient(rgba(0, 0, 0, .3), rgba(0, 0, 0, .5));
  padding: 30px;
  transition: all .7s;
}

.menu-item {
  font-size: …
Run Code Online (Sandbox Code Playgroud)

html css jquery

2
推荐指数
1
解决办法
675
查看次数

标签 统计

css ×1

html ×1

jquery ×1