84669 orang belajar
152542 orang belajar
20005 orang belajar
5487 orang belajar
7821 orang belajar
359900 orang belajar
3350 orang belajar
180660 orang belajar
48569 orang belajar
18603 orang belajar
40936 orang belajar
1549 orang belajar
1183 orang belajar
32909 orang belajar
我想达到下面所述的效果
页面分两大块儿,①所指的p宽度固定,高度不固定,居中
p
②所指的p要紧贴着①;并且不随着页面的滚动而滚动【或者说②处于浏览器窗口固定的位置】;
我所不能解决的问题
如果对②使用position:fixed,那么当浏览器窗口不固定的时候,如何才能让它紧贴着①;或者说②的left或right属性怎么取值?
position:fixed
left
right
有想过浏览器窗口宽度发生变化时,用js去调整②的left或right取值。。。
大家有什么技巧来实现这种效果吗
走同样的路,发现不同的人生
<style type="text/css"> *{ margin:0; padding:0; } p{ width:1000px; height:auto; background:green; margin:0 auto; position:relative; } h1{ width:100%; height:200px; } p{ width:200px; height:200px; background:red; position:fixed; left:50%; top:50%; margin:-100px 0 0 500px; } </style> </head> <body> <p> <h1>1</h1> <h1>2</h1> <h1>3</h1> <h1>1</h1> <h1>2</h1> <h1>3</h1> <h1>1</h1> <h1>2</h1> <h1>3</h1> <h1>1</h1> <h1>2</h1> <h1>3</h1> </p> <p></p>
不知道你要是不是这样,如果你的整体宽度大于1366的话,可能你就要缩小中心的那个板块宽度,那么久需要用一点JS (还有就是fixed 兼容到IE7, 如果你要兼容到IE6就需要用js编辑右边的板块在保持在在右边了)
把 2 放到 1 中,用定位使其位置溢出到 1 右边。
我觉得应该只能用js去解决了jquery的代码如下
//监视窗口大小变动事件 $(window).resize(function (){ var ①=$("①") var ①offset=①.offset(); //用元素距离左面的像素+元素本身的宽度 var ②left=①offset.left+①.outerWidth() $("②").css('left',②left) }) //在页面加载完毕之后手动执行一下reszie事件 $(window).trigger('resize')
(楼上正解)如果不考虑兼容性,还可以这样:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> </head> <body> <p class="main"></p> <p class="aside"></p> </body> </html>
$mainWidth: 240px; $asideWidth: 100px; html,body { margin: 0; box-sizing: border-box; } .main { margin: 20px auto; width: $mainWidth; height: 4000px; border: 1px solid #333; } .aside { position: fixed; top: 200px; right: 0; left: 0; margin: auto; width: $asideWidth; height: 100px; border: 1px solid #333; transform: translateX(($mainWidth+$asideWidth)*.5+10px); }
结果展示:http://codepen.io/huangxutao/pen/VjawEO/
不知道你要是不是这样,如果你的整体宽度大于1366的话,可能你就要缩小中心的那个板块宽度,那么久需要用一点JS (还有就是fixed 兼容到IE7, 如果你要兼容到IE6就需要用js编辑右边的板块在保持在在右边了)
把 2 放到 1 中,用定位使其位置溢出到 1 右边。
我觉得应该只能用js去解决了
jquery的代码如下
(楼上正解)如果不考虑兼容性,还可以这样:
HTML
SCSS
结果展示:
http://codepen.io/huangxutao/pen/VjawEO/