jessica jessica - 3 years ago 82
CSS Question

fixed image inside bootstrap col

I have a bootstrap row with col-md-4 and col-md-8, the col-md-4 contains an image and the other col contains content, i want this image to stay fixed in the col and when i scroll down only the content to be scrollable and the image fixed inside the col, how can i do that?



.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>




Answer Source

you may try a jQuery solution like this :

$(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>

Now you only have to control the values i used depending on your content.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download