zoukankan html css js c++ java

一栏固定一栏跟随

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>一栏固定一栏跟随</title>
</head>
<style>
    body{padding:0; margin:0;}
    html body{_background-image:url(about:blank);_background-attachment:fixed}
    .main{width:1000px;margin:0 auto;}
    .left{width:700px; height:1000px; background: yellow; float:left; padding-top:200px;}
    .right{ width:300px;  float:right;background: #ccc; position: relative;}
    .other{ height: 200px;}
    .move{ width:300px; background:red; height:300px;}
</style>
<script src="http://files.cnblogs.com/tinyphp/jquery-1.3.2.min.js"></script>
<script>
        $(document).ready(function()
        {
            $(window).scroll(function()
            {
                    var a=$(document).scrollTop();
                    if(a>200)
                    {
                        $('.move').css({'position':'fixed','top':'0'});
                    }else{
                        $('.move').removeAttr('style');
                    }
            })
        })
</script>
<body>
    <div class="main">
        <div class="left">这里开始<br />左栏固定<br />左栏固定<br />左栏固定<br />左栏固定<br />左栏固定<br />左栏固定<br /></div>
        <div class="right">
            <div class="other">sdfsd</div>
            <div class="move">移动层</div>
        </div>
    </div>
</body>
</html>

_针对IE6帮助相对于窗口固定位置的元素实现无抖动效果

background-attachment:fixed 随着页面的滚动轴背景图片不会移动

查看全文

相关阅读:
url末尾的斜杠作用
 awk 工具可以很灵活地对文本进行处理，这里的 awk '{print $2}'是指第二列的内容，是运行的程序 ID。杀死指定进程
 nil和空切片
 WaitGroup源码设计，
2
t
Go内置的定时器
 分布式定时器
 1 2 交换
 order by 1 DESC 2 desc

原文地址：https://www.cnblogs.com/tinyphp/p/3570457.html