这两天接了一个需求,页面是这样的 然后需求是页面中的这个表格当页面向上滚动,且表格的表头到达窗口上方时,表头悬浮在页面的上方,表格正常滚动,这样表格内的数据可以随时看到表头内容. 一开始我认为这是极简单的,就当页面滚动,判断表头到窗口的距离,当=0的时候触发事件然后让表头position:fixed不就万事大吉了吗?于是我对漂亮又萌萌哒的产品妹子说,放心吧,这个简单的很一会就能完事,当时我的表情是这样的 但是当我开始写(首先你要知道,我是个js小白,表问我为什么...),问题就来了.首先,这个页

<!DOCTYPE html> <head> <meta charset="UTF-8"> <title>吸顶和锚点链接</title> </head> <style> * { margin: 0; padding: 0; } .perent { background: #ccc; width: 100%; } p { text-align: center; } .header { width: 120

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" con

getElementsByTagName() getElementsByTagName() 方法可返回带有指定标签名的对象的集合. getElementsByClassName() 返回文档中所有指定类名的元素集合,作为 NodeList 对象. 自定义 getElementsByClassName 方法 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"

前言:一年前,博主分享过一篇关于bootstrapTable组件冻结列的解决方案  JS组件系列——Bootstrap Table 冻结列功能IE浏览器兼容性问题解决方案 ,通过该篇,确实可以实现bootstrapTable的冻结列效果,并且可以兼容ie浏览器.这一年的时间,不断有园友以及群里面的朋友问过我关于固定高度之后,冻结列页面效果不能对齐的问题,奈何博主太忙,一直没有抽空将这个问题优化.最近项目里面也不断有人提过这个bug,这下子不能再推了,必须要直面“惨淡的bug”,于是昨天利用一天的

WebBasic 1.web应用体系 课程大纲 1.web基础:做网页     2.结构:         a.html             勾勒网页结构及内容         b.css             美化网页         c.JavaScript<重点>             呈现动态数据和效果     3.JavaScript:         --Java程序员使用JS实现页面的业务逻辑         --美工做出静态页面(html+css) 设备 Chrome.

上一次学习了html5的drag和drop方法,传送门  就自己写了个例子加深自己对drag和drop的理解.不过一开始不是很简单,遇到了不少问题.还好网络万能的,什么都能查到,总算完成了. 说明和详解都在代码里. html和css代码如下: <table> <thead> <tr> <th>年龄</th> <th>姓名</th> <th>面试时间</th> <th>面试类型</t

 <script src="js/jquery.min.js" type="text/javascript"></script> <!--上划加载更多 tr--> <script src="js/dropload.js" type="text/javascript"></script> <script src="js/khData.js" t

效果体验:http://hovertree.com/texiao/js/4.htm 网站右下角悬浮视窗可关闭广告代码,可收缩.展开,关闭,内容区可自定义html,兼容IE8+.FireFox.Chrome.Safari等主流浏览器.广告图片尺寸300x250. 使用方法:在head区域引入样式表文件hvtcss4.css和JS文件hvtjs4.js注意: <link href="http://hovertree.com/texiao/js/4/hvtcss4.css" rel=&

看到有些网站logo鼠标悬浮上面的时候,会出现一道光,一闪而过,刚开始以为是gif图,已审查, 居然不是:现在就实现在这种效果: 先看看CSS实现的效果图: 看到没,就是这道刺眼的白光....   啊啊..我的眼睛.... 代码: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</titl

js让菜单栏一直悬浮在顶部,经典代码 很简单,你只需要把下面代码放到js中:$(function(){                //获取要定位元素距离浏览器顶部的距离        var navH = $(".menu").offset().top;        //滚动条事件        $(window).scroll(function(){                //获取滚动条的滑动距离                var scroH = $(this).s

思想:导航在这里只有两种状态,一种是初始状态.一种是固定布局状态.实现悬浮导航其实就是通过Javascript脚本语言控制导航的两种状态,主要是对两种状态成立条件的判断,明确了这些,实现起来就不会太难. 1.基础页面(HTML+CSS) 效果图: 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="content-type" content=&quo

这是一个网站JS控制的QQ悬浮客服:代码1document.writeln("<div id=\"feedback\"><div id=\"feedback_btn\"><a target=\"_blank\" href=\"http://wpa.qq.com/msgrd?v=3&uin=1326471529&site=qq&menu=yes\"><i

思想:导航在这里只有两种状态,一种是初始状态.一种是固定布局状态.实现悬浮导航其实就是通过Javascript脚本语言控制导航的两种状态,主要是对两种状态成立条件的判断,明确了这些,实现起来就不会太难. 1.基础页面(HTML+CSS) 效果图: 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="content-type" content=&quo

方法一: 使用jquery.freezeheader.js 固定表头: 1-: 初始化: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表格table固定thead表头</title> <style type="text/css"> table { border: 1px

简易实现浮动效果的首要因素是:获取滚动条距离浏览器顶部的距离,下面直接贴代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>js实现div效果悬浮</title> <style type="text/css"> #parentDIV { height: 2000px; } #suspensionBox { w

Atitit. 悬浮窗口的实现 java swing c# .net c++ js html 的实现 1. 建立悬浮窗口引用代码 1 1.1. 定义悬浮窗口,设置this主窗口引用,是为了在悬浮窗口中双击可缩小还还原主窗口.以及悬浮窗口右键菜单"显示主界面"中需要还原主窗 1 1.2. //设置主窗口关闭时,先关闭悬浮窗口.and系统托盘 1 1.3. 注入系统托盘图标,退出的时候儿也退出系统托盘 2 2. 悬浮窗口结构and重大的点 2 2.1. 要去掉标题栏: 2 2.2. Opa

鼠标进入显示悬浮窗,思路有简单有困难. 首先要注意的是我们要给悬浮窗设置position为absolute,不然我们改了 style.left style.top发现没有变化很尴尬.其余的内容看起来就很明了了. style部分 html,div,h1{margin: 0;padding: 0;} body{ background: #DE9191; } #box{ position: absolute; left: 50%; top: 50%; margin: -50px 0 0 -50px;

在我们的实际开发中,经常会遇到页面中需要悬浮效果,比如最早的客服联系,对联悬浮广告等,今天为大家介绍一些如何实现div悬浮的效果. 传统的fixed实现: 通过css中的属性position参数设为fixed,理由它相对于浏览器为绝对位置,通过设置right和bottom,使得div固定在右下角.例如: .demo{ position: fixed;bottom: 10px;right: 10px; } 但是这种实现,从一开始就悬浮在浏览器的右下角了.可以满足我们绝大多数需求,但是有时候会遇到这

JS缓冲运动案例:右侧居中悬浮窗 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>JS小案例:右侧缓冲悬浮框</title> <style> body { height: 2000px; margin: 0px; } #div1 { width: 100px; height: 150px