我们经常在淘宝网看到这样的特效,商品列表特别长,而商品列名称始终保持在最顶端。如果你把滚动条滚动至最上边了,那么它会自动判断是否到顶端了,然后一直置顶从而不怕遮挡。
这种特效是通过JavaScript和CSS实现的,在实际开发中有不少用途,下面是我找到的一个使用JavaScript制作的仿淘宝智能浮动的源代码,兼容性不错,在IE、Firefox、Chrome下都能正常工作。
在Z-Blog中使用这个特效代码需要注意,如果在侧边栏使用,则需要注意,侧栏中的栏目不能使用JavaScript动态加载,必须用静态的格式,否则在JavaScript会错误的计算页面高度,上下滚动的时候会出现错位现象。
(function(){
var oDiv=document.getElementById("float");
var H=0,iE6;
var Y=oDiv;
while(Y){H+=Y.offsetTop;Y=Y.offsetParent};
iE6=window.ActiveXObject&&!window.XMLHttpRequest;
if(!iE6){
window.onscroll=function()
{
var s=document.body.scrollTop||document.documentElement.scrollTop;
if(s>H){oDiv.className="div1 div2";if(iE6){oDiv.style.top=(s-H)+"px";}}
else{oDiv.className="div1";}
};
}
})();
<div id="box">
<div id="float" class="div1">
//随滚动移动的部分代码
</div>
</div>
#box{float:left;position:relative;width:295px;}
.div1{}
.div2{position:fixed;_position:absolute;top:3px;z-index:295;}
分享到:
相关推荐
在JavaScript编程领域,"Javascript 仿淘宝商品目录"是一个常见的项目实践,旨在通过JavaScript技术实现类似于淘宝或拍拍网站的商品分类导航功能。这个项目的核心在于利用前端技术动态展示商品类别,提供用户友好的...
总的来说,"仿淘宝网html网页模板"是一个很好的学习资源,它可以帮助初学者理解和实践HTML、CSS以及JavaScript在创建电商网站时的应用。通过分析和修改这个模板,你可以深入了解网页设计原则,提升你的前端开发技能...
JavaScript+CSS 精仿淘宝首页顶部菜单 JavaScript+CSS 精仿淘宝首页顶部菜单,淘宝顶部的工具条都知道吧,不是那种很标准的导航,每一个菜单项都细分有不同的导航功能,比如点击“我的淘宝”,会出现已购买宝贝,...
通过以上知识点的综合运用,你可以创建出一个功能完备、用户体验良好的JavaScript仿淘宝商城产品轮番展示特效。在实际开发中,还可以考虑引入现有的轮播库,如Swiper或Slick,它们已经封装好了许多细节,使得开发者...
浮动的javascript登录框浮动的javascript登录框
本文将详述如何实现“仿淘宝taobao商城类别菜单效果”,这是一个基于JavaScript(js)技术实现的动态菜单功能,旨在为用户提供清晰、直观且易用的导航体验。 淘宝商城的类别菜单以其层次分明、响应迅速的特点,深受...
Javascript仿Excel的选择效果 .html
【标题】"纯javascript仿金山苹果打字游戏"是一个基于JavaScript实现的项目,它旨在模拟经典的学习打字的游戏,如金山苹果打字软件。通过这个项目,开发者可以学习到如何用JavaScript来创建交互式的游戏应用。 ...
在本实践项目“JavaScript实战项目之仿淘宝首页”中,我们将深入探讨JavaScript、HTML、CSS等前端技术在构建复杂交互式网页中的应用。这个项目旨在帮助开发者提升在大前端领域中的实际开发技能,通过模仿淘宝首页的...
javascript仿flash实现图片切换,前端图片查看器
基于JavaScript的智能水印相机微信小程序源码+项目说明.tar基于JavaScript的智能水印相机微信小程序源码+项目说明.tar基于JavaScript的智能水印相机微信小程序源码+项目说明.tar基于JavaScript的智能水印相机微信小...
总的来说,"仿淘宝静态页面"项目涵盖了前端开发中的多个重要知识点,包括HTML5语义化、CSS3布局与样式、图像处理、JavaScript交互以及响应式设计。通过实践这个项目,新手开发者可以深入理解和掌握这些技术,为未来...
### 一、JavaScript 浮动 Div 的概念与实现 在网页设计中,浮动 Div 是指能够独立于页面其他元素自由移动的 Div 容器。通过 CSS 和 JavaScript 的结合使用,可以使 Div 元素在页面上自由移动,这种效果常用于弹出...
采用 Javascript 开发的网站前端浮动小人,具体效果可以见:https://www.dreamwings.cn 小人支持右键秘密链接,支持自动根据时间问候(早上好、中午好之类),支持自动间隔一段时间展示 hihokito 精美句子。
在“商城手机端vue仿淘宝商品详情demo”项目中,Vue.js 被用于构建一个类似淘宝的商品详情展示和购物车功能。Vue的核心特性包括数据绑定、组件系统和指令系统,使得开发者可以更高效地组织和管理代码。 1. **数据...
标题中的“仿淘宝手机商城模板HTML5.zip”表明这是一个基于HTML5技术的移动商城网站模板,设计风格模仿了淘宝网的界面和交互。这个模板专为手机端设计,旨在为移动用户创建一个类似淘宝的购物体验。HTML5是现代网页...
用javascript onclick时显示一个浮动的div用javascript onclick时显示一个浮动的div用javascript onclick时显示一个浮动的div用javascript onclick时显示一个浮动的div
【标题】"仿淘宝淘抢购...综上所述,"仿淘宝淘抢购"项目涵盖了HTML5、CSS3、JavaScript(包括jQuery和Swiper组件)等核心技术,同时涉及前端框架、响应式设计、用户体验优化等多个方面,是一个综合性的前端开发实践。
JavaScript浮动物理广告源码详解 在Web开发中,JavaScript是一种不可或缺的脚本语言,尤其在前端领域,它被广泛用于实现动态交互效果。本文将深入解析“javascript浮动的广告源码”,帮助开发者理解如何利用...
【标题】"仿淘宝等网站html代码"涉及的是网页设计领域,特别是针对电子商务网站的HTML代码实现。HTML(HyperText Markup Language)是构建网页的基础语言,用于定义网页内容的结构和样式。淘宝作为中国最大的在线...