固定边栏——淘宝滚动效果

点击查看Demo

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
*{margin:0; padding:0;}
.main{overflow:hidden;}

.fl{float:left;}
.main .left{width:60%;/*height:4000px; */border-right:1px solid red; margin:0 10px 0 50px;}
.main .right{width:30%;}

</style>
</head>

<body>
    <div class="main">
        <div class="left fl">
            <div><img src="img/1.jpg"></div>
               <div><img src="img/2.jpg"></div>
            <div><img src="img/3.jpg"></div>
            <div><img src="img/4.jpg"></div>
            <div><img src="img/5.jpg"></div>
            <div><img src="img/1.jpg"></div>
               <div><img src="img/2.jpg"></div>
            <div><img src="img/3.jpg"></div>
            <div><img src="img/4.jpg"></div>
            <div><img src="img/5.jpg"></div>
            <div><img src="img/1.jpg"></div>
               <div><img src="img/2.jpg"></div>
            <div><img src="img/3.jpg"></div>
            <div><img src="img/4.jpg"></div>
            <div><img src="img/5.jpg"></div>
            <div><img src="img/1.jpg"></div>
               <div><img src="img/2.jpg"></div>
            <div><img src="img/3.jpg"></div>
            <div><img src="img/4.jpg"></div>
            <div><img src="img/5.jpg"></div>
            <div><img src="img/1.jpg"></div>
               <div><img src="img/2.jpg"></div>
            <div><img src="img/3.jpg"></div>
            <div><img src="img/4.jpg"></div>
            <div><img src="img/5.jpg"></div>
            <div><img src="img/1.jpg"></div>
               <div><img src="img/2.jpg"></div>
            <div><img src="img/3.jpg"></div>
            <div><img src="img/4.jpg"></div>
            <div><img src="img/5.jpg"></div>
            <div><img src="img/1.jpg"></div>
               <div><img src="img/2.jpg"></div>
            <div><img src="img/3.jpg"></div>
            <div><img src="img/4.jpg"></div>
            <div><img src="img/5.jpg"></div>
            <div><img src="img/1.jpg"></div>
               <div><img src="img/2.jpg"></div>
            <div><img src="img/3.jpg"></div>
            <div><img src="img/4.jpg"></div>
            <div><img src="img/5.jpg"></div>
            <div><img src="img/1.jpg"></div>
               <div><img src="img/2.jpg"></div>
            <div><img src="img/3.jpg"></div>
            <div><img src="img/4.jpg"></div>
            <div><img src="img/5.jpg"></div>
            <div><img src="img/1.jpg"></div>
               <div><img src="img/2.jpg"></div>
            <div><img src="img/3.jpg"></div>
            <div><img src="img/4.jpg"></div>
            <div><img src="img/5.jpg"></div>
            <div><img src="img/1.jpg"></div>
               <div><img src="img/2.jpg"></div>
            <div><img src="img/3.jpg"></div>
            <div><img src="img/4.jpg"></div>
            <div><img src="img/5.jpg"></div>
        </div>
        <div class="right fl" id="right">
            <div><img src="img/6.jpg"></div>
               <div><img src="img/7.jpg"></div>
            <div><img src="img/8.jpg"></div>
            <div><img src="img/9.jpg"></div>
            <div><img src="img/5.jpg"></div>
        </div>
    </div>

<script type="text/javascript" src="http://code.jquery.com/jquery.js"></script>
<script>
var jwindow = $(window);
jwindow.scroll(function(){
    var scrollHeight = jwindow.scrollTop();
    var screenHeight = jwindow.height();
    var sideHeight = $("#right").height();
    if(scrollHeight + screenHeight > sideHeight){
        $("#right").css({"position":"fixed","top":-(sideHeight-screenHeight),"right":0});
    }
    else{
        $("#right").css({"position":"static"});
    }
})

window.onload = function(){
    jwindow.trigger(‘scroll‘);
}

window.onresize = function(){
    jwindow.trigger(‘scroll‘);
}

</script>
</body>
</html>
时间： 2024-12-16 03:22:57

固定边栏——淘宝滚动效果的相关文章

Web API （scroll系列）、（仿淘宝侧边栏效果实现）、（mouseenter与mouseover的区别）、（动画的原理）、（缓动动画）

一 .三大系列中的scroll系列 : (1)scrollLeft |  scrollTop  :水平   |   垂直方向滚动出去的距离  : (2)scrollWidth |  scrollHeight   :内容的真是宽度  |  高度   : (3)滚动整个页面的时候  :   window . pageYOffset   : 二 .仿淘宝侧边栏效果实现 : 1.  找到关心的元素对象  : (1)banner区域  元素对象  : (2)侧边栏的元素对象   : (3)主体部分元素对象

淘宝放大镜效果

淘宝放大镜效果,其实就是一张小图片,还有一张大图片.鼠标移动,按比例显示大图的一部分,在大图的父元素上设置overflow:hidden,就OK了.这里面需要注意换算好大小图的比例. 代码地址:https://github.com/peng666/blogs/tree/gh-pages/floats 在线测试地址:http://peng666.github.io/blogs/floats/

原生JS实现简单的淘宝放大镜效果

大家经常去淘宝买东西会发现,淘宝上的放大镜效果挺有意思的,这里简单的实现了下,代码中的图片地址 亲们可以自行更换; <!DOCTYPE html> <html> <head> <title>放大镜</title> <meta charset="utf-8" /> <style type="text/css"> *{ margin: 0; padding: 0; } body{ hei

JQuery仿淘宝滚动加载图片

用 JQuery 制作随着显示页面的滚动条的滚动动态加载图片,适用于图片太多的页面,在访问网页时,可以先只加载第一屏要显示的图片,当用户进行向下滚动查看页面的时候,动态去加载这些图片,好处是减少页面第一次显示的流量,加快页面第一屏显示的速度.利辛县档案局 主要原理:通过 setInterval 定时事件,检测滚动条的位置,再进行 ajax 请求服务端数据,加载图片到页面上. <script type="text/javascript"> var iHeight = 0; v

关于获取坐标的一些记录 ——分析淘宝放大镜效果的原理

这是距离相关的 el.offsetTop 表示的是元素el到body的最顶部的距离 : 就是body有多高 就是多高的距离,不会因为缩放窗口而改变. el.offsetWidth 是el元素的看起来的宽度 ,padding也会被算上 el.clientWidth 是获取元素的宽度 这里就额外提一下. 以下是鼠标坐标的: e.movementY 是鼠标点相对于上一次的坐标的移动距离 一般都不准确 e.pageY 是鼠标点相对于body的距离 随着鼠标移动一直变化 以下是网上查到的一些资料 网页可见

原生js淘宝放大镜效果(第二版)

随便写写 <!DOCTYPE html> <html> <head> <title>放大镜</title> <meta charset="utf-8" /> <style type="text/css"> *{ margin: 0; padding: 0; } body{ height: 2000px; } #wrapleft{ width: 300px; height: 400px

React Native之ViewPagerAndroid仿淘宝首页顶部分类布局效果实现

转载请注明出处:http://blog.csdn.net/woshizisezise/article/details/51030410 大家好,趁着现在别人都去吃饭的时间,来给大家讲一讲React Native中Android部分的控件ViewPagerAndroid的讲解,这里特别提醒一下,我写的博客都是基于大家有一些React Native基础的前提下,因为关于React Native这一系列的博文我是最近开始更新,由于自身工作繁重(每天早上10点干到晚上10点,是不是很惨?),所以暂时还没

从网易与淘宝的font-size思考前端设计稿与工作流

1. 问题的引出 最近阅读白树的博文<移动web资源整理>时,他在博文中有一段指出,如果html5要适应各种分辨率的移动设备,应该使用rem这样的尺寸单位,同时给出了一段针对各个分辨率范围在html上设置font-size的代码: html{font-size:10px} @media screen and (min-width:321px) and (max-width:375px){html{font-size:11px}} @media screen and (min-width:376

从网易与淘宝的font-size思考前端设计稿与工作流 (转)

从网易与淘宝的font-size思考前端设计稿与工作流 阅读目录 1. 问题的引出 2. 简单问题简单解决 3. 网易的做法 4. 淘宝的做法 5. 比较网易与淘宝的做法 6. 如何与设计协作 7. 总结 本文结合自己对网易与淘宝移动端首页html元素上的font-size这个属性的思考与学习,讨论html5设计稿尺寸以及前端与设计之间协作流程的问题,内容较多,但对你的技术和工作一定有价值,欢迎阅读和点评:). 1. 问题的引出 最近阅读白树的博文<移动web资源整理>时,他在博文中有一段指出