Question

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

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

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

你知道我怎么做吗

非常感谢你的帮助。

Answer 1

bootstrap词缀是你的html上的任何元素你只需要在你的js目录中添加boostrap.js并配置de top和/或bottom你需要更改这个元素我有一个例子你有一个导航标题

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

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

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

确定这个词缀正在你的html中运行，但是nav不会更改到固定位置，你需要为添加了词缀的新类添加一个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();
       }
    });

Bootstrap词缀和文字+徽标转换

1 个答案: