gpt4 book ai didi

jquery - 调整窗口大小时保持 "position: fixed"div 的水平位置

转载 作者:太空宇宙 更新时间:2023-11-03 18:33:14 25 4
gpt4 key购买 nike

我有一个两栏式网站,右侧栏在滚动时会更改为固定位置。这是 CSS:

#sidebar {
padding: 5px;
width: 200px;
float: left;
background-color: yellow;
}

.fixed {
position: fixed;
padding: 5px;
background-color: yellow;
}

.span8 {
padding: 5px;
width: 400px;
float: left;
background-color: blue;
}

这是javascript: var position = $('#sidebar').position(); var offset = $("#sidebar").offset();

    $(window).scroll(function() {          

if ($(window).scrollTop() > offset.top) {
$('#sidebar').addClass('fixed');
$('.fixed').css("top", 0);
$('.fixed').css("left", position.left);
}

else {
$('#sidebar').removeClass('fixed');

}


});

这是 html:

大标题

<div class="span8">
<h4>This is the main column</h4>
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.<p>
</div>
<div id="sidebar">
<h4>Hello!</h4>
<p>This is a fixed a fixed sidebar on scroll</p>
</div>

一切正常,请参阅 jsfiddle http://jsfiddle.net/LennartJagt/MAKYb/2/唯一的问题是,当用户调整窗口大小时,侧边栏保持在其原始水平位置。我不知道如何在调整大小时进行这项工作。

烦人的是 jsfiddle 使它看起来很完美,但在没有 jsfiddle 的浏览器中它不起作用。任何帮助将不胜感激!

伦纳特

最佳答案

无法重现您的问题,对我来说它有效。但它偶尔会闪烁和消失。

一些建议:

1) 为什么不使用纯 CSS?这个,没有任何 javascript,非常适合我:

#sidebar {
padding: 5px;
width: 200px;
background-color: yellow;
position:relative;
left:410px;
top:0;
}


.span8 {
padding: 5px;
width: 400px;
float: left;
background-color: blue;
position:absolute;
}

2) 你这里有什么:

$('.fixed').css("left", position.left);

仅当 position.left 为 0 时才有效。要使其始终有效,请指定它以像素为单位,如下所示:

$('.fixed').css("left", position.left + "px");

3) 这完全未经测试,但假设您的原始代码适合您,也许这会起作用。很简单:将定位代码包装到一个函数中,然后在窗口滚动和窗口调整大小事件中调用此函数:

function positionSidebar() {
var position = $('#sidebar').position();
var offset = $("#sidebar").offset();

if ($(window).scrollTop() > offset.top) {
$('#sidebar').css('fixed');
$('#sidebar').css("left", position.left);
}

else {
$('#sidebar').removeClass('fixed');
}
}

$(window).scroll(function() {
positionSidebar();
});

$(window).resize(function() {
positionSidebar();
});

关于jquery - 调整窗口大小时保持 "position: fixed"div 的水平位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19346631/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com