html中各种js效果图,JS各种实用的效果（合集）

给大家介绍几种实用的JS的使用，代码很简单，很容易理解。

一.固定菜单栏

实现效果：当页面向下滚动时，菜单栏始终固定在页面的最上方。

HTML：

• 菜单1
• 菜单2

CSS:(根据实际情况设置CSS):

.nav ul li a:hover{

width:78px;

height:26px;

line-height:28px;

border:1px solid red;

color:red;

background:#fff;

}

JS代码:

// 定义菜单栏离页面顶部的距离，默认为200var divOffsetTop = 500;//滚动事件

window.οnscrοll=function(){

var div = document.getElementById("divId");// 计算页面滚动了多少(需要区分不同浏览器)

var topVal = 0;if(window.pageYOffset){

topVal = window.pageYOffset;}else if(document.documentElement.scrollTop ){//IE678 的非quirk模式

topVal = document.documentElement.scrollTop;

}else if(do