Question

借用一些例子，我创建了一个贴在页面顶部的自举导航栏，滚动导航栏加上徽标图像从100 px缩小到50 px高度，完美地在台式机上工作，正常宽度浏览器。

如果移动设备小于767px，我设置参数以启用汉堡包菜单和简单的引导程序下拉菜单。

如果您首次访问该页面并且位于最顶层的浏览器非常狭窄或位于小型设备上，则单击汉堡包图标，菜单将显示为大约50像素，位于徽标高度的中间位置（100px高）。在不到一秒的时间内，它会以100px的速度跳到徽标下面。我希望消除这种尴尬的短暂行为。折叠菜单时也会发生这种情况。否则它按计划工作。

我的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菜单附加缩小 - 移动行为

1 个答案: