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

最新推荐文章于 2021-06-03 17:24:03 发布

weixin_33994444

最新推荐文章于 2021-06-03 17:24:03 发布

阅读量103

点赞数

文章标签： javascript python ViewUI

原文链接：https://my.oschina.net/u/2619877/blog/614606

版权

2019独角兽企业重金招聘Python工程师标准>>>

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从而得到想要的效果

转载于:https://my.oschina.net/u/2619877/blog/614606