Question

我正在使用Bootstrap 3开发网站。我需要创建一个导航栏，当用户向下滚动时，该导航栏应缩小。
如某事 - http://osticket.com
我该如何创造呢？我使用Bootstrap的固定顶部示例作为起点 - http://getbootstrap.com/examples/navbar-fixed-top/

我需要在左侧放置一个徽标而不是文本，它应该减小其大小用户向下滚动。
需要帮助尽快！
提前致谢。

Answer 1

此处记录了滚动时缩小的好例子：http://www.bootply.com/109943

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

Answer 2

你可以像他们那样做。如果查看页面源，它们只是在滚动页面时向body元素添加一个类。该类正在覆盖标题的显示格式。

要检测页面是否已向下滚动，它们正在使用带有事件侦听器的javascript函数。你可以在这里查看函数源代码：

http://osticket.com/sites/all/themes/Porto/js/sticky.js

Answer 3

您必须为此功能添加java脚本。必须相应地更新CSS类以获得滚动影响的缩小。完整示例显示在此链接上。 http://www.bootply.com/109943#

使用Bootstrap 3向下滚动时收缩导航栏

3 个答案: