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

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

我需要在左侧放置一个徽标而不是文本，并且在用户向下滚动时应该减小其大小。
尽快提供帮助！
在此先感谢。使用Bootstrap向下滚动时收缩导航栏3

来源

2014-02-17 user3301160

你有没有试图自己解决这个问题？看起来不像它，因此downvote – Bojangles

“asap”相当便宜 – gosua

你可以简单地按照他们做的方式来做。如果您查看页面源代码，则只需在页面滚动时向body元素添加一个类。该类正在覆盖标题的显示格式。

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

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

来源

2014-02-17 07:06:18 DjDCH

滚动时已经记录在这里的萎缩很好的例子：http://www.bootply.com/109943

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

来源

2014-09-11 10:56:34 Yabs

你必须添加Java脚本实现此功能。 CSS类必须相应地更新以获得滚动效果的缩小。完整的例子显示在这个链接上。 http://www.bootply.com/109943#

来源

2015-11-03 21:57:05

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

回答

相关问题