这就是我想要完成的事情:
我需要一个与div右侧相距一定距离的按钮,无论视口大小如何,它都与div侧面的距离相同,但会随窗口滚动.
所以它始终是div右侧的x像素,但始终是视口顶部的y像素.
这可能吗？
Sco*_*ttS 50
(免责声明注:此处提供的解决方案在技术上并非" 绝对横向 ",如问题标题所述,但确实实现了OP最初想要的,固定位置元素与另一个的右边缘相距"X"距离但固定在其中垂直滚动.)
我喜欢这些类型的CSS挑战.作为概念的证明,是的,你可以得到你想要的.您可能需要根据需要调整一些内容,但这里有一些示例html和css通过FireFox,IE8和IE7(IE6,当然,没有position: fixed).
HTML:
<body>
<div class="inflow">
<div class="positioner"><!-- may not be needed: see notes below-->
<div class="fixed"></div>
</div>
</div>
</body>
CSS(边界和演示的所有维度):
div.inflow {
width: 200px;
height: 1000px;
border: 1px solid blue;
float: right;
position: relative;
margin-right: 100px;
}
div.positioner {position: absolute; right: 0;} /*may not be needed: see below*/
div.fixed {
width: 80px;
border: 1px solid red;
height: 100px;
position: fixed;
top: 60px;
margin-left: 15px;
}
关键是不要设置left或根本不设置right水平,div.fixed而是使用两个包装div来设置水平位置.的div.positioner是不需要的,如果div.inflow是固定宽度,随着左边距div.fixed可以设置在容器的已知宽度.但是,如果您希望容器具有百分比宽度,那么您将需要将div.positioner其推div.fixed到第一个的右侧div.inflow.
编辑:作为一个有趣的方面说明,当我设置overflow: hidden(应一个需要做的)对div.inflow有没有影响的固定位置的div被对方的边界之外.显然,固定位置足以将其从包含div的上下文中取出overflow.
Gri*_*inn 13
经过多次挖掘(包括这篇文章)后,我找不到我喜欢的解决方案.这里的接受的答案没有做OP的标题所读的,我能找到的最好的解决方案确实导致了跳跃的元素.然后,它击中了我:让元素"固定",检测何时发生水平滚动,并将其切换为绝对定位.这是结果代码:
HTML
<div class="blue">
<div class="red">
</div>
</div>
CSS
/* Styling */
.blue, .red {
border-style: dashed;
border-width: 2px;
padding: 2px;
margin-bottom: 2px;
}
/* This will be out "vertical-fixed" element */
.red {
border-color: red;
height: 120px;
position: fixed;
width: 500px;
}
/* Container so we can see when we scroll */
.blue {
border-color: blue;
width: 50%;
display: inline-block;
height: 800px;
}
JavaScript的
$(function () {
var $document = $(document),
left = 0,
scrollTimer = 0;
// Detect horizontal scroll start and stop.
$document.on("scroll", function () {
var docLeft = $document.scrollLeft();
if(left !== docLeft) {
var self = this, args = arguments;
if(!scrollTimer) {
// We've not yet (re)started the timer: It's the beginning of scrolling.
startHScroll.apply(self, args);
}
window.clearTimeout(scrollTimer);
scrollTimer = window.setTimeout(function () {
scrollTimer = 0;
// Our timer was never stopped: We've finished scrolling.
stopHScroll.apply(self, args);
}, 100);
left = docLeft;
}
});
// Horizontal scroll started - Make div's absolutely positioned.
function startHScroll () {
console.log("Scroll Start");
$(".red")
// Clear out any left-positioning set by stopHScroll.
.css("left","")
.each(function () {
var $this = $(this),
pos = $this.offset();
// Preserve our current vertical position...
$this.css("top", pos.top)
})
// ...before making it absolutely positioned.
.css("position", "absolute");
}
// Horizontal scroll stopped - Make div's float again.
function stopHScroll () {
var leftScroll = $(window).scrollLeft();
console.log("Scroll Stop");
$(".red")
// Clear out any top-positioning set by startHScroll.
.css("top","")
.each(function () {
var $this = $(this),
pos = $this.position();
// Preserve our current horizontal position, munus the scroll position...
$this.css("left", pos.left-leftScroll);
})
// ...before making it fixed positioned.
.css("position", "fixed");
}
});
我来到这里寻找类似问题的解决方案,其中有一个跨越窗口宽度并位于(可变高度和宽度)内容下方的页脚栏.换句话说,使页脚看起来相对于其水平位置"固定",但相对于其垂直位置保持其在文档流中的正常位置.在我的情况下,我将页脚文本右对齐,因此我可以动态调整页脚的宽度.这是我想出的:
<div id="footer-outer">
<div id="footer">
Footer text.
</div><!-- end footer -->
</div><!-- end footer-outer -->
#footer-outer
{
width: 100%;
}
#footer
{
text-align: right;
background-color: blue;
/* various style attributes, not important for the example */
}
(使用prototype.js).
class Footer
document.observe 'dom:loaded', ->
Footer.width = $('footer-outer').getDimensions().width
Event.observe window, 'scroll', ->
x = document.viewport.getScrollOffsets().left
$('footer-outer').setStyle( {'width': (Footer.width + x) + "px"} )
编译成:
Footer = (function() {
function Footer() {}
return Footer;
})();
document.observe('dom:loaded', function() {
return Footer.width = $('footer-outer').getDimensions().width;
});
Event.observe(window, 'scroll', function() {
var x;
x = document.viewport.getScrollOffsets().left;
return $('footer-outer').setStyle({
'width': (Footer.width + x) + "px"
});
});
这在FireFox中效果很好,在Chrome中也很好用(它有点紧张); 我没有尝试过其他浏览器.
我还希望页脚下面的任何空余都是不同的颜色,所以我添加了这个footer-stretchdiv:
...
</div><!-- end footer -->
<div id="footer-stretch"></div>
</div><!-- end footer-outer -->
#footer-outer
{
height: 100%;
}
#footer-stretch
{
height: 100%;
background-color: #2A2A2A;
}
请注意,要使#footer-stretch div工作,所有父元素直到body元素(可能还有html元素 - 不确定)必须具有固定高度(在本例中,height = 100%).
| 归档时间： |
|
| 查看次数： |
83883 次 |
| 最近记录： |