文档章节

用Javascript和jQuery分别完成侧边栏固定滑动

 伟俊22
发布于 2016/02/12 23:31
字数 826
阅读 11
收藏 0

HTML部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>固定侧边栏</title>
    <style>
        *{padding:0;margin:0;}
        .container{width:980px;  margin:20px auto;}
        nav{  width:980px; height:200px;background-color:#CCCCCC;border:1px solid #000000;margin-bottom:20px;}
        .content{position:relative;}
        main{width: 70%;margin-right:2%;border:1px solid #000000;float:left;margin-bottom:10px;padding-bottom:10px;}
        main div{width:200px;height:180px;margin:10px 0 0 15px;display:inline-block;border:1px solid #000000;}
        main div img{width:180px;height:160px;margin:12px 0 0 12px;}
        #aside1{border:1px solid #000000;background-color:#CCCCCC;height: 600px;width:257px;float:right;}
        footer{border-top:1px solid #000000;height:30px;background-color:#CCCCCC;clear:both;}
    </style>
    <script src="jquery-1.4.2.min.js"></script>
    <script src="js.js"></script>
</head>
<body>
<div class="container" id="container">
    <nav></nav>
    <div class="content">
        <main id="main">
            <div><a href="javascript:void(0)"><img src="home3.jpg" /></a></div>
            <div><a href="javascript:void(0)"><img src="home3.jpg" /></a></div>
            <div><a href="javascript:void(0)"><img src="home3.jpg" /></a></div>
            <div><a href="javascript:void(0)"><img src="home3.jpg" /></a></div>
            <div><a href="javascript:void(0)"><img src="home3.jpg" /></a></div>
            <div><a href="javascript:void(0)"><img src="home3.jpg" /></a></div>
            <div><a href="javascript:void(0)"><img src="home3.jpg" /></a></div>
            <div><a href="javascript:void(0)"><img src="home3.jpg" /></a></div>
            <div><a href="javascript:void(0)"><img src="home3.jpg" /></a></div>
            <div><a href="javascript:void(0)"><img src="home3.jpg" /></a></div>
            <div><a href="javascript:void(0)"><img src="home3.jpg" /></a></div>
            <div><a href="javascript:void(0)"><img src="home3.jpg" /></a></div>
            <div><a href="javascript:void(0)"><img src="home3.jpg" /></a></div>
            <div><a href="javascript:void(0)"><img src="home3.jpg" /></a></div>
            <div><a href="javascript:void(0)"><img src="home3.jpg" /></a></div>
            <div><a href="javascript:void(0)"><img src="home3.jpg" /></a></div>
            <div><a href="javascript:void(0)"><img src="home3.jpg" /></a></div>
            <div><a href="javascript:void(0)"><img src="home3.jpg" /></a></div>
            <div><a href="javascript:void(0)"><img src="home3.jpg" /></a></div>
            <div><a href="javascript:void(0)"><img src="home3.jpg" /></a></div>
            <div><a href="javascript:void(0)"><img src="home3.jpg" /></a></div>
            <div><a href="javascript:void(0)"><img src="home3.jpg" /></a></div>
            <div><a href="javascript:void(0)"><img src="home3.jpg" /></a></div>
            <div><a href="javascript:void(0)"><img src="home3.jpg" /></a></div>
            <div><a href="javascript:void(0)"><img src="home3.jpg" /></a></div>
            <div><a href="javascript:void(0)"><img src="home3.jpg" /></a></div>
            <div><a href="javascript:void(0)"><img src="home3.jpg" /></a></div>
            <div><a href="javascript:void(0)"><img src="home3.jpg" /></a></div>
            <div><a href="javascript:void(0)"><img src="home3.jpg" /></a></div>
            <div><a href="javascript:void(0)"><img src="home3.jpg" /></a></div>
            <div><a href="javascript:void(0)"><img src="home3.jpg" /></a></div>
            <div><a href="javascript:void(0)"><img src="home3.jpg" /></a></div>
            <div><a href="javascript:void(0)"><img src="home3.jpg" /></a></div>
            <div><a href="javascript:void(0)"><img src="home3.jpg" /></a></div>
            <div><a href="javascript:void(0)"><img src="home3.jpg" /></a></div>
            <div><a href="javascript:void(0)"><img src="home3.jpg" /></a></div>
        </main>
        <aside id="aside1">
    asasdfsdafsdafsdf
        </aside>
    </div>
    <footer></footer>
</div>
</body>
</html>

JS部分

///**
// * Created by Administrator on 2016/2/12.
// */
//
//
//var getId=function (id){
//    return document.getElementById(id);
//};//设置一个用来获取元素的方法
//var createEvent=function (obj,event,fun){
//    if(obj.addEventListener){
//        obj.addEventListener(event,fun,false);
//    }
//    else if(obj.attachEvent){
//        obj.attachEvent("on"+event,fun);//IE9以下支持这个方法,事件前要加上on
//    }
//};//该方法用来制作事件
//var asideo;
//createEvent(window,"scroll",function(){
//    asideo=getId("aside1");
//    console.log(asideo);
//    var scrollheight =document.body.scrollTop;//获得滑动的高度
//    var contentheight =getId("main").offsetHeight - asideo.offsetHeight;
//
//    if(scrollheight>220 && scrollheight<contentheight+220){
//        asideo.style.position="absolute";
//        asideo.style.right="0px";
//        asideo.style.top=scrollheight-220 +"px";
//    }else if (scrollheight<=220){
//        asideo.style.position="absolute";
//        asideo.style.right="0px";
//        asideo.style.top="0px";
//    }
//});
$(document).ready(function(){
    var aside=$("#aside1");
    $(window).scroll(function(){

        var scrollHeight=$(window).scrollTop();
        var contentHeight=$("#main").height()-aside.height();

       if(scrollHeight>220&&scrollHeight<contentHeight+220){
           aside.css({
               position:"absolute",
               right:"0px",
               top:scrollHeight-220+"px"
           });
       }else if(scrollHeight<=220){
           aside.css({
               position:"absolute",
               right:"0px",
               top:"0px"
           });
       }
    });
});
//1、使用scroll事件方法设置事件
//2、获得滚动的高度
//3、获得两个元素的高度差
//4、利用css设置aside的position从而得到想要的效果

© 著作权归作者所有

粉丝 1
博文 14
码字总数 11780
作品 0
深圳
私信 提问
37个超级棒的 jQuery菜单插件

导航是网站设计最重要的元素之一。一个优秀的导航菜单要简洁易用,方便用户。而用 jQuery 菜单插件制作出来的动态导航则能很好的满足这一点。jQuery 是一个轻量级的 JavaScript 框架,兼容 ...

墙头草
2012/03/22
18.3K
11
《JavaScript实用效果整理》系列分享专栏

整理一些使用的JavaScript效果,在Web开发中遇到的比较好的动态效果,都收藏在这里,对以后的网站开发增加不少的色彩 《JavaScript实用效果整理》已整理成PDF文档,点击可直接下载至本地查阅...

开元中国2015
2018/10/29
0
0
8款实用jQuery插件实例欣赏及源码下载

jQuery的确是一款非常轻巧强大的JS框架,相信每一位WEB开发者都非常喜欢他。许多jQuery插件不仅开源,而且代码和设计都十分优雅,对自己的JS开发能力也会有很大提高。下面分享8款实用jQuery插...

yykj
2012/12/12
5
0
《基于JQuery和CSS的特效整理》系列分享专栏

《基于JQuery和CSS的特效整理》已整理成PDF文档,点击可直接下载至本地查阅 https://www.webfalse.com/read/201724.html 文章 一款基于jQuery的颜色拾取器 分享一款基于jQuery的QQ表情插件 ...

kaixin_code
2018/11/04
0
0
15 个最新的 jQuery 插件 —— 2013年11月

现如今,jQuery被认为是网页开发的主心骨。它是一个精炼的JavaScript库,可以极大简化页面在事件处理、动画、Ajax交互方面的设计和开发工作。 随着越来越多的jQuery插件的出现,开发者们可以...

oschina
2013/11/26
6.6K
24

没有更多内容

加载失败,请刷新页面

加载更多

android6.0源码分析之Camera API2.0下的Preview(预览)流程分析

本文将基于android6.0的源码,对Camera API2.0下Camera的preview的流程进行分析。在文章android6.0源码分析之Camera API2.0下的初始化流程分析中,已经对Camera2内置应用的Open即初始化流程进...

天王盖地虎626
6分钟前
0
0
java 序列化和反序列化

1. 概述 序列恢复为Java对象的过程。 对象的序列化主要有两 首先我们介绍下序列化和反序列化的概念: 序列化:把Java对象转换为字节序列的过程。 反序列化:把字节序列恢复为Java对象的过程。...

edison_kwok
18分钟前
0
0
分布式数据一致性

狼王黄师傅
59分钟前
1
0
经验

相信每位开发者在自己开发的过程中,都会反思一些问题,比如怎样提高编程能力、如何保持心态不砍产品经理、996 之后怎样恢复精力……最近开发者 Tomasz Łakomy 将他 7 年的开发生涯中学习到...

WinkJie
今天
4
0
从源码的角度来看SpringMVC

SpringMVC核心流程图 简单总结 首先请求进入DispatcherServlet 由DispatcherServlet 从HandlerMappings中提取对应的Handler 此时只是获取到了对应的Handle,然后得去寻找对应的适配器,即:H...

骚年锦时
今天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部