Twitter Bootstrap Question posted in

Making an element within a fixed div scroll over – Twitter bootstrap

Building a site on twitter bootstrap 3.

I have a jumbotron with text, buttons, and a picture of myself. I want the picture of myself + the white div below to scroll up and over the jumbotron. I was able to get the white div to do so with z-index.

Visual representation of what I want

enter image description here

My problem is, how do I get the picture of myself to do the same? It’s inheriting properties from the containing div, and I can’t seem to override it.

  1. The bottom of the image is being cut off by the white div, even if I put a higher z-index.

  2. The image is fixed, doesn’t move when I scroll.

I would provide a codepen, but it would take me a while to make. Here’s the gist of the code:

<div class="jumbotron hero">
      <div class="container"> 
        <div class="row row-grid">
          <div class="col-lg-7 col-lg-offset-0 col-md-6 col-md-offset-0 col-sm-8 col-sm-offset-2 col-xs-8 col-xs-offset-2 text-center" id="header-text">
            <h1>Hi, I'm Giovanni.</h1>
            <h3>I'm a Marketing Professional and Public Speaking Coach</h3>
            <div class="btn-toolbar text-center" role="group" id="header-buttons">
              <a href="#marketing" class="btn btn-lg btn-primary" id="primarycta">Marketing</a>
              <a href="#publicspeaking" class="btn btn-lg btn-warning" id="secondarycta">Public Speaking</a>
            </div>
          </div>
          <div class="col-lg-5 col-lg-offset-0 col-md-6 col-md-offset-0 col-sm-12 col-sm-offset-0 col-xs-8 col-xs-offset-2 gio-image"><!--This is the image I want to move -->
          </div>
        </div>
      </div>
    </div>

<div class="container" id="scrollover">

      <div class="row" id="marketing">
        <div class="col-lg-10 col-lg-offset-1 text-center"><h1 class="bodyh1">Marketing</h1></div>
      </div>
      <div class="row">

<!-- Etc... -->

CSS:

.hero {
  padding-top:140px;
  height:600px;
  min-height:400px;
  background-size:cover;
  overflow: visible;
  position: fixed;
  right:0;
  left:0;
  z-index:-1;
}

#scrollover {
  position: absolute;
  top: 70%;
  z-index:2;
  background: white;
  width:100%;
}
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I figured it out. I'm not sure if my approach is the right way to do it, but it works.

    I took 

    <div class="col-lg-5 col-lg-offset-0 col-md-6 col-md-offset-0 col-sm-12 col-sm-offset-0 col-xs-8 col-xs-offset-2 gio-image"><!--This is the image I want to move -->
</div>

    and moved it in between the end of the jumbotron div and the beginning of the #scrollover container.

    Then I used relative positioning to place it above and to the right of where it would naturally sit. I gave it a higher z-index so it would sit on top of both divs.

    With this approach, I had to use some media queries to make sure it moved along with the rest of the page and didn't cover anything. But, overall, it works like a charm.


  2. 0

    try giving a position:fixed to your .row or .row-gridclass.

    You can also make it so that the positiong:fixed is added when you start scrolling down.

    Check this pen. I know it’s not the prettiest css, but it should give you a general idea of what I mean

    EDIT

    Try giving your image a background-attachment:fixed;

    .image {
  background-image: url('https://media-cdn.tripadvisor.com/media/photo-s/0e/9a/e3/1d/freedom-tower.jpg');
  background-size:100%;
  height:300px;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

#other {
  width:50%;
}
    <div class="image">

</div>

<section id="other">
  What is Lorem Ipsum?
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</section>

<section id="other">
  What is Lorem Ipsum?
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</section>

<section id="other">
  What is Lorem Ipsum?
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</section>

<section id="other">
  What is Lorem Ipsum?
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</section>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search