当前位置：移动技术网 > IT编程>开发语言>JavaScript > CSS 网页顶部固定工具栏拖动无闪烁实现代码

CSS 网页顶部固定工具栏拖动无闪烁实现代码

2019年07月29日 | 移动技术网IT编程 | 我要评论

实际上细心的朋友会发现，这个顶部的工具条实则是一个平铺的背景图像，css起到固定背景的作用，也算是一种独特的实现方法。

<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="content-type" content="text/html; charset=gb2312"> 
<title>顶部拖动无闪烁菜单栏</title> 
<style type="text/css"> 
* 
{ 
    margin: 0px; 
    padding: 0px; 
} 
body { 
    background-image: url(); 
    background-attachment: fixed; 
} 
#topnavwrapper { 
    width: 980px; 
    text-align: left; 
    height: 31px; 
    margin: 0px auto; 
    z-index:100; 
    _position: relative ; 
    _top:0px; 
} 
#topnav { 
    width: 980px; 
    float: left; 
    display: block; 
    z-index: 100; 
    overflow: visible; 
    position: fixed; 
    top: 0px; /* position fixed for ie6 */ 
    _position: absolute; 
    _top: expression(documentelement.scrolltop + "px"); 
    background-image: url(/upload/2010-3/20100303232637297.gif); 
    background-repeat: no-repeat; 
    background-position: right; 
    height: 31px; 
} 
</style> 
</head> 
<body> 
<div id="topnavwrapper"> 
        <ul class="jd_menu" id="topnav"> 
<li></li> 
        </ul> 
</div> 
<table><tr><td height="1080"></td></tr></table> 
</body> 
</html>

[ctrl+a 全选注:如需引入外部js需刷新才能执行]

您可能感兴趣的文章:

如对本文有疑问，点击进行留言回复！！

js实现页面滚动返回顶部

许多网站的右下角都有一个可以使页面返回顶部的按钮例如这些网站：返回顶部我们可以用锚点链接来实现，但是锚点链接它突... [阅读全文]
JS函数传参时值传递与引用传递的区别

大家都知道在计算机内存中js的数据类型分为基础数据类型和引用数据类型基础数据类型number / string ... [阅读全文]
JavaScript开发中如何防抖(前端更好的用户体验)

在前端开发中会遇到一些频繁的事件触发，比如：resize、scroll、mousedown、mousemove、... [阅读全文]
做一个网页送给心动女孩子生日礼物(表白也合适)

如何做一个网页送给女朋友做生日礼物本文里面涉及到python，HTML ，css,JavaScript的知识，是... [阅读全文]
three.js 制作动态二维码的示例代码

今天郭先生说一下用canvas解析图片流，然后制作一个动态二维码的小案例，话不多说先上图，这是郭先生的微信二维码哦！1. 解析图片流canvas = docum... [阅读全文]
同事牛逼啊，写了个隐藏 bug，我排查了 3 天才解决问题！

最近线上监控 SFTP 连接频繁爆表，通过重启某个系统，连接数迅速下降，系统就能恢复正常，初步判断是应用程序连接... [阅读全文]
Redis实现自定义序列化方式

1. 如何实现redis的序列化？序列化：把对象转换为字节序列的过程称为对象的序列化。反序列化：把字节序列恢复为... [阅读全文]
【JavaScript笔记（一）】万丈高楼平地起 - 基本概念篇

基本数据类型：String,Boolean,Number,Undefined,Null引用数据类型：Object... [阅读全文]
方法和构造方法的区别

一、为什么要有构造方法本来已经有方法了，为什么要有构造方法呢？我们知道，方法是指参数经过一定的 ... [阅读全文]
轻松解决 org.apache.taglibs.standard.tlv.JstlCoreTLV 困惑

今天在整合smm项目时：遇到两个错误，分享给各位Failed to load or instantiate Ta... [阅读全文]

网友评论


验证码：

CSS 网页顶部固定工具栏拖动无闪烁实现代码

2019年07月29日 | 移动技术网IT编程 | 我要评论

您可能感兴趣的文章:

相关文章:

网友评论