`
RepublicW
  • 浏览: 83237 次
  • 性别: Icon_minigender_1
  • 来自: 大连
社区版块
存档分类
最新评论

JavaScript仿淘宝智能浮动

 
阅读更多
我们经常在淘宝网看到这样的特效,商品列表特别长,而商品列名称始终保持在最顶端。如果你把滚动条滚动至最上边了,那么它会自动判断是否到顶端了,然后一直置顶从而不怕遮挡。

  这种特效是通过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 仿淘宝商品目录"是一个常见的项目实践,旨在通过JavaScript技术实现类似于淘宝或拍拍网站的商品分类导航功能。这个项目的核心在于利用前端技术动态展示商品类别,提供用户友好的...

    仿淘宝网html网页模板

    总的来说,"仿淘宝网html网页模板"是一个很好的学习资源,它可以帮助初学者理解和实践HTML、CSS以及JavaScript在创建电商网站时的应用。通过分析和修改这个模板,你可以深入了解网页设计原则,提升你的前端开发技能...

    JavaScript+CSS 精仿淘宝首页顶部菜单

    JavaScript+CSS 精仿淘宝首页顶部菜单 JavaScript+CSS 精仿淘宝首页顶部菜单,淘宝顶部的工具条都知道吧,不是那种很标准的导航,每一个菜单项都细分有不同的导航功能,比如点击“我的淘宝”,会出现已购买宝贝,...

    JavaScript 仿淘宝商城产品轮番展示特效

    通过以上知识点的综合运用,你可以创建出一个功能完备、用户体验良好的JavaScript仿淘宝商城产品轮番展示特效。在实际开发中,还可以考虑引入现有的轮播库,如Swiper或Slick,它们已经封装好了许多细节,使得开发者...

    浮动的javascript登录框

    浮动的javascript登录框浮动的javascript登录框

    仿淘宝taobao商城类别菜单效果

    本文将详述如何实现“仿淘宝taobao商城类别菜单效果”,这是一个基于JavaScript(js)技术实现的动态菜单功能,旨在为用户提供清晰、直观且易用的导航体验。 淘宝商城的类别菜单以其层次分明、响应迅速的特点,深受...

    Javascript仿Excel的选择效果 .html

    Javascript仿Excel的选择效果 .html

    纯javascript仿金山苹果打字游戏

    【标题】"纯javascript仿金山苹果打字游戏"是一个基于JavaScript实现的项目,它旨在模拟经典的学习打字的游戏,如金山苹果打字软件。通过这个项目,开发者可以学习到如何用JavaScript来创建交互式的游戏应用。 ...

    JavaScript实战项目之仿淘宝首页

    在本实践项目“JavaScript实战项目之仿淘宝首页”中,我们将深入探讨JavaScript、HTML、CSS等前端技术在构建复杂交互式网页中的应用。这个项目旨在帮助开发者提升在大前端领域中的实际开发技能,通过模仿淘宝首页的...

    javascript仿flash实现图片切换

    javascript仿flash实现图片切换,前端图片查看器

    基于JavaScript的智能水印相机微信小程序源码+项目说明.tar

    基于JavaScript的智能水印相机微信小程序源码+项目说明.tar基于JavaScript的智能水印相机微信小程序源码+项目说明.tar基于JavaScript的智能水印相机微信小程序源码+项目说明.tar基于JavaScript的智能水印相机微信小...

    仿淘宝静态页面

    总的来说,"仿淘宝静态页面"项目涵盖了前端开发中的多个重要知识点,包括HTML5语义化、CSS3布局与样式、图像处理、JavaScript交互以及响应式设计。通过实践这个项目,新手开发者可以深入理解和掌握这些技术,为未来...

    javascript浮动div,可拖拽div,遮罩层(div和iframe实现)

    ### 一、JavaScript 浮动 Div 的概念与实现 在网页设计中,浮动 Div 是指能够独立于页面其他元素自由移动的 Div 容器。通过 CSS 和 JavaScript 的结合使用,可以使 Div 元素在页面上自由移动,这种效果常用于弹出...

    Spig 网站浮动小人 (javascript)

    采用 Javascript 开发的网站前端浮动小人,具体效果可以见:https://www.dreamwings.cn 小人支持右键秘密链接,支持自动根据时间问候(早上好、中午好之类),支持自动间隔一段时间展示 hihokito 精美句子。

    商城手机端vue仿淘宝商品详情demo

    在“商城手机端vue仿淘宝商品详情demo”项目中,Vue.js 被用于构建一个类似淘宝的商品详情展示和购物车功能。Vue的核心特性包括数据绑定、组件系统和指令系统,使得开发者可以更高效地组织和管理代码。 1. **数据...

    仿淘宝手机商城模板HTML5.zip

    标题中的“仿淘宝手机商城模板HTML5.zip”表明这是一个基于HTML5技术的移动商城网站模板,设计风格模仿了淘宝网的界面和交互。这个模板专为手机端设计,旨在为移动用户创建一个类似淘宝的购物体验。HTML5是现代网页...

    用javascript onclick时显示一个浮动的div

    用javascript onclick时显示一个浮动的div用javascript onclick时显示一个浮动的div用javascript onclick时显示一个浮动的div用javascript onclick时显示一个浮动的div

    仿淘宝淘抢购

    【标题】"仿淘宝淘抢购...综上所述,"仿淘宝淘抢购"项目涵盖了HTML5、CSS3、JavaScript(包括jQuery和Swiper组件)等核心技术,同时涉及前端框架、响应式设计、用户体验优化等多个方面,是一个综合性的前端开发实践。

    javascript浮动的广告源码

    JavaScript浮动物理广告源码详解 在Web开发中,JavaScript是一种不可或缺的脚本语言,尤其在前端领域,它被广泛用于实现动态交互效果。本文将深入解析“javascript浮动的广告源码”,帮助开发者理解如何利用...

    仿淘宝等网站html代码

    【标题】"仿淘宝等网站html代码"涉及的是网页设计领域,特别是针对电子商务网站的HTML代码实现。HTML(HyperText Markup Language)是构建网页的基础语言,用于定义网页内容的结构和样式。淘宝作为中国最大的在线...

Global site tag (gtag.js) - Google Analytics