用Javascript和jQuery分別完成側邊欄固定滑動

時間 2019-12-05

標籤 javascript jquery 分別完成側邊欄固定滑動欄目 JavaScript 简体版

原文原文鏈接

HTML部分javascript

<!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部分css

///**
// * 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"
           });
       }
    });
});
//一、使用scroll事件方法設置事件
//二、得到滾動的高度
//三、得到兩個元素的高度差
//四、利用css設置aside的position從而獲得想要的效果

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。