我有一个带有 col-md-4 和 col-md-8 的 Bootstrap 行，col-md-4 包含一个图像，另一个 col 包含内容，我希望该图像在 col 中保持固定，当我仅向下滚动可滚动的内容和固定在 col 内的图像，我该怎么做？
.footer{
height: 150px;
background-color: red;}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<html>
<body>
<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">Navbar</a>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<div class="row">
<div class="col-md-3"><img src="http://via.placeholder.com/50x50"></div>
<div class="col-md-3"><img src="http://via.placeholder.com/50x50"></div>
<div class="col-md-3"><img src="http://via.placeholder.com/50x50"></div>
<div class="col-md-3"><img src="http://via.placeholder.com/50x50"></div>
</div>
<div class="row">
<div class="col-md-4">
<img src="https://media.giphy.com/media/ry0gJdDrfKREs/giphy.gif">
</div>
<div class="col-md-8">
Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content
</div>
</div>
<div class="footer"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>最佳答案
你可以尝试像这样的 jQuery 解决方案:
$(window).scroll(function() {
if ($(window).scrollTop() > 110 && $(window).scrollTop() < 300) {
$('.scroll-img').css('margin-top', ($(window).scrollTop() - 110) + 'px');
}
});.footer {
height: 150px;
background-color: red;
}
img {
max-width: 100%;
}<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<nav class="navbar navbar-toggleable-md navbar-light bg-faded">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand" href="#">Navbar</a>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
</ul>
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="text" placeholder="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
</form>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col-xs-3"><img src="http://via.placeholder.com/50x50"></div>
<div class="col-xs-3"><img src="http://via.placeholder.com/50x50"></div>
<div class="col-xs-3"><img src="http://via.placeholder.com/50x50"></div>
<div class="col-xs-3"><img src="http://via.placeholder.com/50x50"></div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-xs-4">
<img src="https://media.giphy.com/media/ry0gJdDrfKREs/giphy.gif" class="scroll-img">
</div>
<div class="col-xs-8" id="content">
Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content
Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content
Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content
Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content
Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content Content
</div>
</div>
</div>
<div class="footer"></div>
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>现在您只需根据您的内容控制我使用的值即可。
关于jquery - 修复 bootstrap col 内的图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46496563/