在引导过程中使用词缀控件的详细解决方案和保持布局美观的方法

词缀是引导程序中非常有用的控件，它可以监视浏览器滚动条的位置，并使您的导航始终处于页面的可视区域。当页面滚动时，导航将自动成为一个固定的布局（固定的）。它总是在用户的视图区域。让我们来讨论一下他的用法。首先，看看他的实现原理，它是通过实时修改页面元素的类属性来实现的。
开始的affxi顶级属性自动加词缀元素类
当滚动条滚动使导航接近页面顶部时，词缀顶部将在元素的类中转为词缀。
当滚动条被拖到页面底部时，词缀会自动变成词缀底部。
上面的过程完全控制了它自己的实现，没有我们的干预，我们只需要写一个好的CSS这些状态。
我们可以设置
贴上。
{
上图：150px；
}
词缀。
{
上图：20px； / /引导通常用于施工现场的头部有一个导航栏
}
在底部。
{
......
}
让我们看看它是如何使用它的。
1，通过数据属性
你只需要在你需要听的页面元素中添加数据=，然后用偏移量来确定一个元素的打开和关闭。

资产净值标签
数据偏移顶部= 190 >
教程一
教程2
教程三
数据偏移顶是页面顶部的词缀顶部状态元素的位置。当你滚动到页面的顶部时，我们可以设置粘贴样式来重置它的顶部值。

2。电话通过Javaｓｃｒｉｐｔ
示例代码如下所示：
$（# mynav的词缀（{）。
偏移：{
顶部：在页面滚动位置顶部的100 距离
底部：（函数）从页面的底部滚动
返回（this.bottom =
$（'。BS页脚）。OuterHeight（真的））
}
}
}）
HTML代码如下（只显示了核心代码）：
教程一
教程2
教程三

......

上面所描述的词缀的用法似乎已经在自举中完成，但在实际使用过程中我们会发现，当使用滚动页元素时，词缀的宽度会发生变化，从而导致随机的页面布局，所以我们定义词缀CSS来写它为最佳的模宽：
词缀{。
宽度：250px；
}
所以，当窗口足够大，是没有问题的，但是当拖动来改变窗口大小和布局会发现的地方，这个问题困扰了我很久，最后通过对bootcss源分析，我发现在所有的类词缀元素的网站增加了一个藏印隐藏隐藏XS SM这些属性，当屏幕是不满足要求的情况下可以隐藏的词缀，但易用性的影响，但布局在任何一种情况下是整洁的。
以上是对你的一个小介绍，说明如何使用词缀控件进行自举，并保持布局美观。我们希望能帮助你。如果你有任何问题，请给我留言，萧边会及时给您回复。谢谢您支持网站。