affix - Bootstrap 词缀和文本 + 徽标移位

Question

我是使用引导程序的新手，我对词缀导航栏非常感兴趣。（滚动时停留在底部然后转到顶部的那个）。

但是，我会尝试但我无法复制这个网站的效果：http: //www.blastprocessor.co.uk/

经过多次研究，我无法找到如何使菜单的文本（位于中心）在向下滚动时像动画一样向右（或向左）移动。并且徽标也出现了。

你知道我该怎么做吗

非常感谢你的帮助。

Answer 1

引导词缀适用于 html 上的任何元素，您只需在 js 目录中添加 boostrap.js 并配置顶部和/或底部，您需要更改此元素我有一个示例，您有一个导航标题

<nav class="navbar navbar-inverse" role="navigation" id="affix-nav">

例如，在您的 js 文件中，您需要这一行

$('#affix-nav').affix({
offset: {
  top: 100
}})

好的，词缀在您的 html 中运行，但导航没有更改为固定位置，您需要为带有词缀的新类添加一个 css

nav.affix{
width: 100%!important;
top: 0;}

现在您可以在您的网页中看到词缀导航栏，您也可以尝试使用此导航栏

<nav class="navbar navbar-inverse" role="navigation" id="affix-nav" data-spy="affix" data-offset-top="125">

而且你不需要 js 文件作为词缀

在导航上玩元素检查我的下一个例子

$(window).scroll(function(){
       var height = $(this).scrollTop();
       var brand = $(".navbar-brand");
       if (height > 125){
         brand.show('slow');   
       }
       else{
          brand.hide();
       }
    });