jQuery右侧滑动快速导航条

Posted 程序员的碎碎念

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jQuery右侧滑动快速导航条相关的知识,希望对你有一定的参考价值。

平时浏览网站的时候要是网站很长,滑下来后还要返回到开头部分的header来点击导航就显得很不方便,在这里使用JQ来实现右侧的滑动导航条,先来看看效果图吧:

使用jq其实也比较简单啦:你先弄好相应的css样式和html代码,接着直接插入jquery.min.js,然后调用插件。

jQuery右侧滑动快速导航条

css样式

html代码

js代码

jQuery 效果 - animate() 方法

animate() 方法执行 CSS 属性集的自定义动画。

该方法通过CSS样式将元素从一个状态改变为另一个状态.

$(selector).animate(styles,speed,easing,callback)

styles:必需,规定产生动画效果的css样式和值

speed:可选,规定动画的速度

easing:可选,规定在不同的动画点中设置动画速度的easing函数

callback:可选,animate函数执行完成后,要执行的函数。

相信你们能看懂这些代码,理解起来不难的,真正难的是直接写出来哦,不懂的可以直接百度呢!。

(原文写于2017.8.18)

以上是关于jQuery右侧滑动快速导航条的主要内容,如果未能解决你的问题,请参考以下文章

根据浏览器的滑动条 固定导航栏

Js控制网页滑动的时候顶部导航条变成半透明实例

iOS下简单实现滑动导航条

jQuery特效 | 导航底部横线跟随鼠标缓动

Android ScrollView去掉右侧滑动条

底部应用栏在使用片段导航时向上/向下滑动(导航架构组件)