javascript - Bootstrap 菜单附加在带有品牌形象的滚动时收缩 - 移动行为

Question

借用一些例子，我创建了一个贴在页面顶部的 Bootstrap 导航栏，滚动导航栏时加上 Logo 图像的高度从 100 像素缩小到 50 像素，在台式电脑上完美运行，正常宽度浏览器。

对于小于 767px 的较小移动设备，我设置参数以启用汉堡菜单和简单的 Bootstrap 下拉菜单。

如果浏览器非常窄或在小型设备上，如果您第一次访问该页面并在最顶部单击汉堡包图标，菜单将出现在大约 50 像素处，位于 Logo 高度的中间(100 像素高)。在几分之一秒内，它会跳转到 Logo 下方 100 像素处它应该在的位置。我希望消除的正是这种尴尬的短暂行为。当您折叠菜单时也会发生这种情况。否则它会按计划工作。

我的javascript:

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

相关的CSS:

body {
  padding-top: 100px;
}

.navbar {
  min-height: 101px; /* to get the 100px tall image contained within navbar */
}

.navbar.shrink {
  min-height: 51px;
  background: white;
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

img {
  max-height: 100px;
  -webkit-transition: all 0.4s ease;
  transition: all 0.4s ease;
}

img.shrink {
  max-height: 50px;
  -webkit-transition: all 0.5s ease;
  transition: all 0.5s ease;
}

/* adjust top position of menu on small device due to larger logo */
@media (max-width: 767px) {
  .collapse { margin-top: 50px; }
  nav.navbar.shrink .collapse {
    margin-top: 0px;
    -webkit-transition: all 0.8s ease;
    transition: all 0.8s ease;
  }
}

看演示:

http://www.dottedi.biz/demo/code/public/navbars/shrinking-navbar+logo-scroll.html

Answer 1

你在这里定位了错误的选择器

代替

.collapse { 
  margin-top: 50px; 
}

在你的媒体查询中，应用

.navbar:not(.shrink) .navbar-collapse {
    margin-top: 50px;
}

这对你有用

见附件 img /image/uAVQr.jpg