Question

我正在尝试在用户滚动时调整较小的导航栏。这是我的网址website

我插入了这个功能:(在wordpress中使用javascript / css / plugin）

    $(window).scroll(function() {
  if ($(document).scrollTop() > 50) {
    $('nav').addClass('shrink');
  } else {
    $('nav').removeClass('shrink');
  }
});

CSS：

  nav.art-nav{
  background-color:#ccc;
   -webkit-transition: all 0.4s ease;
   transition: all 0.4s ease;
}
nav.art-nav.shrink {
  min-height: 35px;
}

我已尽力编辑js fiddle中找到的示例为了适应我的网站，但无法让它调整大小，请给我任何建议，

谢谢

Answer 1

JSFiddle示例有效，因为导航栏没有固定的高度。您的.art-nav会这样做。

如果您将min-height: 35px;更改为height: 35px;，我认为它会有效。

Answer 2

我将上面改为

.art-nav{
  background-color:#ccc;
   -webkit-transition: all 0.4s ease;
   transition: all 0.4s ease;
}
.shrink {
  min-height: 35px;
}

现在正在运作 - 我希望这可以帮助其他人使用Artisteer创建的主题：）

滚动时调整Navbar的大小

2 个答案: