[英]Position a Div "Fixed" Vertically and "Absolute" Horizontally within a "Position:Relative" Container Div
I'm looking for a way I can create a div which will be fixed on the page vertically, so if the user scrolls down, the div stays at the same place on the page.我正在寻找一种方法可以创建一个垂直固定在页面上的 div,因此如果用户向下滚动,该 div 将保持在页面上的同一位置。 But have it positioned absolutely horizontally, so if the users screen is narrower than my webpage, scrolling to the right or left will not cause the div to move with the screen and, in some cases, remain either half visible at the edge of the screen or off the page completely.
但是让它绝对水平放置,所以如果用户屏幕比我的网页窄,向右或向左滚动不会导致 div 随屏幕移动,并且在某些情况下,在屏幕边缘保持一半可见或完全离开页面。
This div must be within a "Position:Relative" Div.此 div 必须在“Position:Relative”Div 内。
I'm fairly sure there is no way to assign different positions to the varying axis of a div but this is the best way to describe the effect which I am hoping to achieve.我相当确定没有办法为 div 的不同轴分配不同的位置,但这是描述我希望达到的效果的最佳方式。
I have this so far, which is basically just a Fixed Div within a Relative Div.到目前为止,我有这个,它基本上只是一个相对 Div 中的固定 Div。
CSS CSS
#container {
position:relative;
width:700px;
height:1000px;
top:50px;
left:50px;
background-color:yellow;
}
#blue-box{
position:fixed;
width:100px;
height:100px;
background-color:blue;
margin-top:20px;
margin-left:400px;
{
HTML HTML
<div id="container">
<div id="blue-box"></div>
</div>
I have also created a jsFiddle to help demonstrate the problem.我还创建了一个jsFiddle来帮助演示这个问题。
This works fine for the vertical, but if you resize your web-browser so that it is narrower than the yellow box (container) and then scroll horizontally, the blue box will move with the page.这适用于垂直方向,但如果您调整 Web 浏览器的大小使其比黄色框(容器)窄,然后水平滚动,则蓝色框将随页面移动。 I'm hoping to stop that from happening.
我希望阻止这种情况发生。
If there is no way to achieve this through CSS, I'm perfectly happy to use JavaScript as long as it works with all modern browsers and both IE7 and IE8.如果没有办法通过 CSS 实现这一点,我非常乐意使用 JavaScript,只要它适用于所有现代浏览器以及 IE7 和 IE8。 (Which is why I have added the JavaScript tag)
(这就是我添加 JavaScript 标签的原因)
Can anyone help me out?谁能帮我吗?
With JQuery, use the scrollLeft() property of the document!使用 JQuery,使用文档的 scrollLeft() 属性! This would work
这会工作
$(window).scroll(function(event) {
$("#blue-box").css("margin-left", 400-$(document).scrollLeft());
});
See also也可以看看
http://jsfiddle.net/zhQkq/9/ http://jsfiddle.net/zhQkq/9/
Good luck!祝你好运!
Edit: If you want it to use your preset margin-left instead of a hard-coded "400", use编辑:如果您希望它使用预设的左边距而不是硬编码的“400”,请使用
$(window).scroll(function(event) {
$("#blue-box").css("margin-left", $("#blue-box").css("margin-left")-$(document).scrollLeft());
});
Using vanilla javascript would be something like this:使用 vanilla javascript 将是这样的:
var bb = document.getElementById('blue-box');
window.addEventListener('scroll',function(event){
bb.style.marginLeft = window.scrollX + 'px';
});
In modern browsers, as of 2020, you should try to use the CSS position:fixed;
在现代浏览器中,截至 2020 年,您应该尝试使用 CSS
position:fixed;
instead of JavaScript positioning because it is widely supported now.而不是 JavaScript 定位,因为它现在被广泛支持。
Here's my solution (tested in Opera and Firefox): http://jsfiddle.net/cCH2Z/2 The trick is to specify right: 0px;
这是我的解决方案(在 Opera 和 Firefox 中测试): http : //jsfiddle.net/cCH2Z/2诀窍是指定
right: 0px;
, this will position the box 0px from the right border of the window. ,这会将框定位在距离窗口右边框 0px 的位置。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.