jquery - 修复 bootstrap col 内的图像-6ren

jquery - 修复 bootstrap col 内的图像

转载作者：行者123 更新时间：2023-12-01 08:41:36

24

4

我有一个带有 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/

24

4

0

文章推荐： jquery - 带有边距顶部的双滚动滞后

文章推荐： jakarta-ee - EJB - 性能问题(有更多的 EJB 会影响性能)

文章推荐： OpenGL和无限光位？

文章推荐： .net - 使用 NHibernate 进行查询

javascript - 修复 IE 的 div 宽度 @media 修复
我将一个 div 设置为 100% 宽度，当以 1024 分辨率查看页面时，宽度应从 100% 变为 1000px，我让它与@media 查询一起正常工作，并且在 FF、safari chrome 上
ckeditor - Domino 9.01 修复 3 CKEditor 错误 - 9.01 修复 1 上没有错误
希望有人能帮助我，我已经被困了几天了。将我的 Domino 服务器更新到 9.01 Fix 3 后，我在 javascript 控制台上不断收到错误消息: TypeError: this.edito
Java内存使用/修复
我们正在使用一个基于RMI的java应用程序。当我们运行应用程序时，即使应用程序处于理想阶段，内存使用量仍然不断增加。我们主要使用Vector和散列图数据结构。如何最大限度地减少java内存使用/修复
修复 IDM下载器假序列号错误优秀技巧分享
概述 Internet Download Manager (IDM)是最流行的 Windows 下载管理器。如果你平时工作中使用过IDM,您会惊叹 IDM 下载文件的速度有多快。IDM
authorization - 打开勇敢的浏览器时弹出错误？修复？
当我打开 brave 浏览器时，会打开一个窗口(如下所示)。它并没有真正干扰浏览器的处理。但令人担忧的是为什么这种情况一直发生...... Error On Opening Brave Browser
for-loop - 修复 For 循环中的错误
这是我今天在求职面试中被问到的一个问题: 看下面的代码: int n=20; for (int i =0; i
macports 修复/替换命令？
我不小心删除了/opt/local/bin/perl5.8.9 ，这似乎是 macports 编译的 perl 的主要二进制文件。现在我有很多取决于 perl5 的端口，但不想卸载并重新安装所有端口
haskell - 翻转修复/修复
>>>flip fix (0 :: Int) (\a b -> putStrLn "abc") Output: "abc" 这是使用翻转修复的简化版本。我在一些 YouTube 视频中看到了这种使用
java - 修复 NetworkOnMainThreadException
这个问题已经有答案了: How can I fix 'android.os.NetworkOnMainThreadException'? (64 个回答) 已关闭 3 年前。我在 Android 应
python - 修复 UnboundLocalError
def main(): cash = float(input("How much money: ")) coins = 0 def changeCounter(n): whil
mysql - 查询优化/修复
前一周我遇到了类似的问题，查询需要永远运行。在编写此查询时，我尝试应用从其他查询中学到的一些知识，但执行起来需要很长时间。运行查询的两个单独部分时，每个部分需要 2 分钟才能完成，这是可以接受的，但
CSS 'Dropdown' 修复
下午，我的 CSS 有问题。第三个下拉菜单放错了，我没有解决办法。这是我想要的: 之前: http://i53.tinypic.com/2qu85z8.png 之后: http://i51.tiny
ios - NSInternalInconsistencyException 修复
更新方法: override func tableView(_ tableView: UITableView, commit editingStyle: UITableViewCellEditingS
导航栏折叠的 CSS 修复
我知道这是一个很多人都遇到过的问题，但我不熟悉 Less 并且是 Bootstrap 的新手，我正在寻找一种全 CSS 解决方案来防止我的导航栏折叠到 768 像素以下:
javascript - 可调整大小的粘性页脚与内容重叠 - 修复
在我的布局中，我创建了以下 jsfiddle 托管的可调整大小的粘性页脚。但是，在调整大小时它与内容重叠。有没有办法让它在所有浏览器上都能响应？ http://jsfiddle.net/9aLc0mg
javascript - 修复 if 语句以停止移动
我想要实现的目标 racer-offset 是为了让用户可以设置图像可以以 px 为单位移动多远。偏移量管理偏移量。 Speed-racer 告诉我们图像在滚动过程中移动的速度。我的问题是它不会停止。
c++ - 修复/改进自动换行功能
我有一个简单的自动换行函数，它接受一个长字符串作为输入，然后将该字符串分成更小的字符串，并将它们添加到一个数组中，以便稍后输出。现在最后一两个字没有输出。这是主要问题。但是，我还想改进功能。我知道这有
禁用按钮的 JQuery 修复
我试图在使用每个 slider 之前禁用“下一步”按钮，我不确定为什么在单击不再是 class="not-clicked"的同一个 slider 时取消禁用该按钮. JSFiddle: (这里看起来有
java - 修复 NullPointerException？
这个问题已经有答案了: What is a NullPointerException, and how do I fix it? (12 个回答) 已关闭 8 年前。如何让程序输出所有信息？ IT
菜单鼠标悬停的 CSS 修复
On this page ，在“生活”下有一个带有自动生成的子菜单的菜单。子菜单存在一些问题(它会闪烁并改变大小——如果你滚动它就会看到)。我需要以某种方式覆盖它当前正在读取的 css 并使其统一。

首页

博学

6Ren·AI

商城

jquery - 修复 bootstrap col 内的图像