类似天猫商品详情随浏览器移动的示例代码

使用该函数，必须集成于jquery包

原理：当浏览器移动到某个指定位置时，该图层上浮，然后加入一个样式，让该div层定位于浏览器顶部


代码如下:

//控制头部购物车的显示
function fixshow(min_height){
min_height ? min_height = min_height : min_height = 830;
$(window).scroll(function(){
var s = $(window).scrollTop();
if( s > min_height){
$("#proBuyTip").fadeIn(100);
$(".fixtabwrap").addClass("topfixed");
}else{
$("#proBuyTip").fadeOut(200);
$(".fixtabwrap").removeClass("topfixed");
};
});
};

代码如下:

.topfixed {
position: fixed !important;
top: 0px;
left: 0px;
z-index: 999;
width: 100%;
background-color: white;
position: absolute;
_top: expression(eval(document.documentElement.scrollTop));
}

赞 (0)

相关推荐

  • 仿当当网淘宝网等主流电子商务网站商品分类导航菜单

    仿当当网淘宝网等主流电子商务网站商品分类导航菜单

    本文实现了一个分类导航的菜单,和大多数流行的电子商务网站类似. 菜单的实现难点主要在CSS的编写上,并没有用到太多的JS. 下面只介少几处关键点,详细的实现可以直接查看源代码.所有的代码都在一个sidebar.html文件中. (1) 在图片中的标号1的开口如何实现? 开口右边是一个postion被设置成absolute的div, 这个div向左刚好偏移了1px, 使得左边的菜单栏压住其边框,而选中的菜单又边框是白色,就形成了缺口. (2) 在图片中标号2处如何实现每个连接不会中间换行? 可以把

  • Jquery 最近浏览过的商品的功能实现代码

    <script type="text/javascript" src="JS/jquery.js"></script> //与Prototype 类似的框架 <script type="text/javascript" src="JS/JCookie.js"></script> //插件 复制代码 代码如下: /*JCookie.js * / jQuery.cookie = fu

  • JQuery实现的购物车功能(可以减少或者添加商品并自动计算价格)

    购物车点击可以减少或者添加商品并自动计算价格: 购物车中可能有这样的功能,那就是点击按钮可以实现商品数量的减少或者增加,并且能够实时的计算出总的商品价格,下面就通过代码实例介绍一下如何实现此功能,当然下面的这个模拟实现的购物车难登大雅之堂,但是可以从中得到一些启发或者相关的知识点,代码如下: 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title&

  • PHP实现采集抓取淘宝网单个商品信息

    调用淘宝的数据可以使用淘宝提供的api,如果只需调用淘宝商品图片名称等公开信息在自己网站上,使用php中的 file_get_contents 函数实现即可. 思路: file_get_contents(url) 该函数根据 url 如 http://www.baidu.com 将该网页内容(源码)以字符串形式输出(一个整字符串),然后配合preg_match,preg_replace等这些正则表达式操作就可以实现获取该url特定div,img等信息了.当然前题是淘宝在单个商品页面的结构是固定的

  • JAVAEE model1模型实现商品浏览记录（去除重复的浏览记录）（一）

    JAVAEE model1模型实现商品浏览记录（去除重复的浏览记录）（一）

    在javaee中Model1模型是以jsp页面为中心的,jsp既要对浏览器的request做出逻辑处理(使用javabean),访问数据库也要显示出相关的页面. 在model1模型中,没有servlet. Model1结果图如下: Model1的可维护性  可扩展性都是较差的  只适合小项目. 首先运行结果 goods.jsp <%@page import="entity.Items"%> <%@page import="dao.ItemsDao"

  • asp.net下使用jQuery.AutoComplete完成仿淘宝商品搜索自动完成功能(改进了键盘上下选择体验)

    asp.net下使用jQuery.AutoComplete完成仿淘宝商品搜索自动完成功能(改进了键盘上下选择体验)

    首先来看一些效果图: 这个是淘宝首页的搜索效果 京东首页的搜索效果 我修改的jQuery.AutoComplete实现的效果 一.实现效果分析 我要实现的效果就是和GOOGLE类似,需要满足一下3个要求(因为这样我认为是最好的用户体验,毕竟GOOGLE做了那么久了): .首先根据关键字列出关键字相关的信息(包含统计信息) .可以使用键盘上下键选择(默认不选中第一条),文本框内容根据选择信息变换 .当选择第一或者最后一条时再向上或向下则取消选中,文本框中内容还原回原先输入的内容(这点比较重要,京东

  • 基于jquery的商品展示放大镜

    直接上代码吧(一共也才100来行,小东西) 复制代码 代码如下: $(document).ready(function() { _el("biggerPic").style.marginLeft = (0 - (getOffsetNumber(_el("biggerPic").style.width) - getOffsetNumber(_el("container").style.width))) + "px"; _el(&

  • Android时光轴实现淘宝物流信息浏览效果

    Android时光轴实现淘宝物流信息浏览效果

    本文实例为大家分享了Android时光轴的制作方法,供大家参考,具体内容如下 1. 效果 2.分析和实现 2.1效果实现: 之前想了一下这种效果,因为只需要用到自己的项目中所以采用图片直接布局的形式去实现效果,虽然效果实现了,但是后来发现了出了很多问题:第一Android的分辨率太多了直接设置xxxdp难免有部分机型出现不适配的情况,第二我们与右边这部分需要对齐的问题这个就比较头大. 所以目前的实现效果方式是这样子的: 1.自定义TimerLineMarker,根据自定义属性获取点和线的背景资源

  • PHP 类商品秒杀计时实现代码

    要求要有小时分钟秒的实时倒计时的显示,用户端修改日期时间不会影响到倒计时的正常显示(也就是以服务器时间为准). 其实这和很多的考试等系统的时间限制功能同样的要求. 总不能用ajax每秒都获取服务器时间吧,所以实时倒计时一定要用javascript实现.这很简单,网上一大把的例子. 现在问题是解决用户端修改日期时间对我们的显示的影响. 解决的办法是计算出用户端的时间和服务器的时间差,这样问题的完成解决了. 这样只需要运行一次php,实时倒计时的时间就和服务器的时间同步了. 理论是同步的,但实际测试

  • Android仿淘宝商品浏览界面图片滚动效果

    Android仿淘宝商品浏览界面图片滚动效果

    用手机淘宝浏览商品详情时,商品图片是放在后面的,在第一个ScrollView滚动到最底下时会有提示,继续拖动才能浏览图片.仿照这个效果写一个出来并不难,只要定义一个Layout管理两个ScrollView就行了,当第一个ScrollView滑到底部时,再次向上滑动进入第二个ScrollView.效果如下: 需要注意的地方是: 1.如果是手动滑到底部需要再次按下才能继续往下滑,自动滚动到底部则不需要 2.在由上一个ScrollView滑动到下一个ScrollView的过程中多只手指相继拖动也不会导

随机推荐