gpt4 book ai didi

css - 如何在 Bootstrap 中将 div 位置从相对设置为固定

转载 作者:行者123 更新时间:2023-11-28 05:12:52 26 4
gpt4 key购买 nike

这是我最初的 HTML 结构(我使用的是 Bootstrap 框架)

<html>
<body>
<header>My header</div>
<div class="container-fluid">
<div class="row">
<div id="list" class="col-md-7"></div>
<div id="map" class="col-md-5"></div>
</div>
</div>
<footer>My Header</footer>
</body>

还有CSS:

#list
{
height : 2500px /* For the exemple */
}

#map
{
height : 500px
}

#map.affix {
position: fixed;
top: 70px;
right: 0;
}

最初我的 div #map 位置是相对

当 div (#map) 在屏幕上可见直到 div #list 底部时,我想将 div #map 的位置设置为 fixed

最后,当我的 div #map 到达 div #list 的底部时,我想再次将我的 div 设置为相对位置。

对于这个场景,我使用了bootstrap的词缀插件:

$('#map').affix({
offset: { top: $('#map').offset().top }
});

但是当我的滚动到达 div #map 时,它从屏幕上消失了(因为位置是固定的并且我的 div#map 的宽度是流动的)

如何以我的初始大小(当它处于position:relative时)显示屏幕顶部/右侧固定位置的 div #map?

有人能解决这个问题吗?感谢您的帮助!

这是我想要的场景:

enter image description here

最佳答案

你想做这样的事情吗?

http://jsfiddle.net/b43hj/3503/

<header>My Header</header>
<div class="container-fluid">
<div class="row">
<div id="list"></div>
<div id="theFixed">SOMETHING</div>
</div>
</div>
<footer>My Footer</footer>

#theFixed {
height : 300px;
background: red;
position: fixed;
top: 700px;
right: 0px;
width: 40%;
}
#list {
height: 2500px;
width: 200px;
background: green;
}

$(window).scroll(function(){
$("#theFixed").css("top",Math.max(0,700-$(this).scrollTop()));
});

关于css - 如何在 Bootstrap 中将 div 位置从相对设置为固定,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39456357/

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