关于stickup让元素固定位置的插件解析

关于stickup让元素固定位置的插件解析

最近学习了一款js插件，就是可以让页面滚动时顶部导航始终在顶部，不滚动时，在原来的位置。现在跟大家分享下这款插件的具体用法。

首先，我们需要下载插件对应的代码。我们打开boot中文网，在首页的“Bootstrap”相关优质项目推荐部分就可以看到我们的stickup插件

我们打开stickup的链接，下滑到安装指南一项，我们店家Visit Github在github上面去查看这个项目的代码

然后把代码克隆到本地或者下载压缩文件到本地。我们点击Clone or Download按钮就会弹出在桌面查看和下载到本地的两个选项

我们选择下载到本地，就可以将代码下载到本地，之后在下载文件夹中将其解压缩进行查看（红线圈出来的部分就是解压缩出来的内容）

我们再回到页面去看安装指南，提示我们需要将stickUp的js文件引用到文档当中，并且引用相应的js代码在stickUp js文件的后面。

然后，我们在压缩文件中找到对应的js文件，将其单独拷贝出来，然后新建一个html文档，要求必须有导航或者重新找一个有导航栏的页面。

我们将jquery的js文件和stickUp的js文件引入，并引用相应的js代码，由于我们页面的class和示例并不一致，所以我们需要把我们需要固定的元素换掉示例中的navbar-wrapper

这样，当我们滚动屏幕的时候，导航栏就自动始终固定在页面的最顶部了。