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

Question

借鉴一些示例，我创建了一个 bootstrap 导航栏，该导航栏贴在页面顶部，滚动时导航栏加徽标图像的高度从 100 像素缩小到 50 像素，在台式电脑，正常宽度的浏览器。

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

如果浏览器非常窄或在小型设备上，如果您第一次访问该页面并在最顶部单击汉堡包图标，菜单将出现在大约 50 像素处，位于高度的中间徽标（100 像素高）。在几分之一秒内，它会跳转到徽标下方 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 https://i.stack.imgur.com/uAVQr.jpg

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

Bootstrap menu affix shrinking upon scroll with brand image - mobile behavior

javascript

css

navbar

twitter-bootstrap