我们经常在淘宝网看到这样的特效,商品列表特别长,而商品列名称始终保持在最顶端。如果你把滚动条滚动至最上边了,那么它会自动判断是否到顶端了,然后一直置顶从而不怕遮挡。
这种特效是通过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浮动广告代码
浮动广告是一种常见的网络广告形式,它在网页上以动态的方式...总之,浮动广告的实现涉及JavaScript的事件处理、DOM操作和动画原理。通过合理的编程和设计,可以创建出既吸引用户注意力又不影响用户体验的浮动广告。
浮动的javascript登录框浮动的javascript登录框
JavaScript仿招聘网站是一个适合初学者的实践项目,它完全基于JavaScript编写,旨在帮助学习者深入理解和应用JavaScript语言,特别是前端开发中的技术。这个项目可能涵盖了HTML结构设计、CSS样式布局以及JavaScript...
JavaScript多级联动浮动菜单 第二版,包含仿京东商城商品分类菜单、仿window xp右键菜单、仿淘宝拼音索引菜单,上一个版本基本实现了多级联动和浮动菜单的功能,但效果不是太好,使用麻烦还有些bug,实用性不高。...
在本话题中,我们关注的是如何使用JavaScript实现一种特定的广告展示方式——浮动广告。这种广告通常会在网页的角落或者侧边栏中持续移动,吸引用户的注意力。当用户将鼠标悬停在广告上时,广告的移动会暂停,以提供...
浮动广告在网页设计中是一种常见的营销手段,它通常以JavaScript实现,可以在用户浏览页面时持续显示,以此提高广告的曝光率。本文将深入探讨如何使用JavaScript来创建浮动广告,以及涉及的相关技术点。 首先,我们...
本文将详述如何实现“仿淘宝taobao商城类别菜单效果”,这是一个基于JavaScript(js)技术实现的动态菜单功能,旨在为用户提供清晰、直观且易用的导航体验。 淘宝商城的类别菜单以其层次分明、响应迅速的特点,深受...
Javascript仿Excel的选择效果 .html
在网页设计中,"jQuery页面滚动时层智能浮动定位"是一种常见的交互效果,它使得页面上的某些元素(如导航栏、侧边栏广告或者提示信息)在用户滚动页面时始终保持在可视区域,提供更好的用户体验。这种效果是通过...
总的来说,通过学习和实践这个仿淘宝商品图列表及产品放大功能的JavaScript代码,开发者不仅可以掌握网页动态交互的基本技巧,还能了解如何利用JavaScript优化网页性能,提升用户体验。这是一个很好的实践项目,对于...
【标题】"纯javascript仿金山苹果打字游戏"是一个基于JavaScript实现的项目,它旨在模拟经典的学习打字的游戏,如金山苹果打字软件。通过这个项目,开发者可以学习到如何用JavaScript来创建交互式的游戏应用。 ...
JavaScript中的浮动层(Floating Layer)技术是网页动态效果和交互设计中的重要概念,它允许创建在用户鼠标移动时跟随或响应的元素。这种技术在学习JavaScript时尤其有用,因为它可以帮助理解DOM操作、事件处理和CSS...