php js特效代码如何用,Javascript实现吸顶特效（代码示例）

本篇文章给大家带来的内容是Javascript实现吸顶特效(代码示例)。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。

知识点

1.scroll家族和offset家族的结合运用

2.当nav的offsetTop大于屏幕卷去高度的时候，进行吸顶

3.添加一个固定类，如果满足条件，为nav加类名

运行效果

滚动页面时，保证导航栏吸顶

代码：

*{margin: 0;padding: 0;list-style: none;border:none}

img{vertical-align: top;width: 100%;}

section{width: 70%;margin: 0 auto;}

.nav{position: fixed;left: 0;top: 0;width: 100%}

window.addEventListener('load',function (ev) {

// 1. 求出头部高度

var navTopHeight = myTool.$('nav').offsetTop;

// 2. 监听页面滚动

window.addEventListener('scroll',function (ev1) {

var scrollTopHeight = myTool.scroll().top;

// 2.1 判断

if(scrollTopHeight >= navTopHeight){

myTool.addClassName(myTool.$('nav'),'nav')

}else{

myTool.removeClassName(myTool.$('nav'),'nav');

}

})

更多炫酷javascript特效代码，尽在：js特效大全

php js特效代码如何用,Javascript实现吸顶特效（代码示例）相关推荐

html图片快速轮播特效代码,轻松实现javascript图片轮播特效
本文实例介绍了javascript图片轮播特效的详细代码以及实现思路,分享给大家供大家参考,具体内容如下还是先来看一看效果图: 具体代码: 一.HTML代码分析 A版是一款手机DOTA应用,它涵盖了 ...
JQ实现吸顶效果代码
吸顶下过代码跟简单几行代码就可以了如果滚动的军力大于100,就改变导航的定位方式,否则就默认 $(function(){ $(window).scroll(function(){ if($(wind ...
html判断是否有某个元素,JS基础篇--如何用JavaScript判断dom是否有存在某class的值？...
例如: 判断html节点的class是否有no-js. 1.jquery的实现方式 $("html").hasClass('no-js'); jquery源码的实现方式: var ...
html js制作高级拼图,基于JavaScript实现十五拼图代码实例
顾名思义,十五拼图就是将游戏画面中的数字从上到下,从左到右按顺序从1到15排列下来,看起来很简单,但是玩起来不容易. css代码 body { font-family: cursive; font-s ...
html年会抽奖代码实例,基于JavaScript实现简单抽奖功能代码实例
为什么会做这个东西呢,纯属好玩,闲的其实是在上次班会的时候想到的,班会的时候叫人回答问题,没人回答当时就想,我如果抽签抽到你了,你还是不回答吗??好吧,一切都是扯淡先来看看页面效果吧: 点击抽取 ...
android 纯代码选项卡,纯javascript实现tab选项卡效果代码
提示:您可以先修改部分代码再运行买家中心卖家中心待处理订单(10) 待确定订单(本月购买额度17826.35元(返20元) 本年购买额度您的购买金额排第1名,奖励100元! 待处理订单(10) ...
js 延期执行_如何用javascript设置延时执行
152 **** **** 如何用javascript设置延时执行一.什么叫做JavaScript 的计时事件使用JavaScript可以实现代码的延时执行,也就是说当一个函数被调用时不立即执行某 ...
html js 3d图片轮播,js实现3D图片逐张轮播幻灯片特效代码分享
本文实例讲述了javascript实现3D图片逐张轮播幻灯片特效.分享给大家供大家参考.具体如下: 这是一款基于javascript实现3D图片逐张轮播幻灯片特效代码,实现过程很简单. 运行效果图:- ...
html 中如何写js代码提示错误,javascript怎么进行错误处理？
在ES3之前js代码执行的过程中,一旦出现错误,整个js代码都会停止执行,这样就显的代码非常的不健壮.从ES3开始,js也提供了类似的错误处理机制,从而让js代码变的更健壮,及时执行的过程中出现了异常 ...

php js特效代码如何用,Javascript实现吸顶特效（代码示例）

php js特效代码如何用,Javascript实现吸顶特效（代码示例）相关推荐

最新文章

热门文章