Bootstrap Carousel Captions

Question

I am using a Bootstrap carousel as page background in a one page website with parallax effects.

It works well except for one problem. The caption shows in the parallax part of the page. Is there any way to make the caption disappear once you scroll down the page?

            <div id="myCarousel" class="carousel slide" data-ride="carousel">
            <!-- Indicators  -->
            <ol class="carousel-indicators">
                <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
                <li data-target="#myCarousel" data-slide-to="1"></li>
                <li data-target="#myCarousel" data-slide-to="2"></li>
            </ol>
            <!-- Wrapper for slides -->
            <div class="carousel-inner" role="listbox">
                <div class="item active">
                    <img src="images/Image-1.jpg" alt="Image 1">
                    <div class="carousel-caption">
                        <h3>Caption 1 goes here </h3>
                    </div>
                </div>

                <div class="item">
                    <img src="images/Image-2.jpg" alt="Image 2">
                    <div class="carousel-caption">
                        <h3>Caption 2 goes here </h3>
                    </div>
                </div>

                <div class="item">
                    <img src="images/Image-3.jpg" alt="Image 3">
                    <div class="carousel-caption">
                        <h3>Caption 3 goes here</h3>
                    </div>
                </div>

            </div>

            <!-- Left and right controls -->
            <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
            </a>
            <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
            </a>
        </div>


.carousel{
    height:700px;
}

.carousel .item {
 position:fixed;
 left:0 !important;
width: 100%; 
height:100%;
}

    .carousel-inner img{
    width: 100%; /* Set width to 100% */
  margin: auto;
}

.carousel-caption h3 {
    font-size:xx-large;
 }

.carousel-caption {
    top: 70%; 
    bottom:auto; 
}

Answer 1

If I got this right then your problem is your css.

.carousel-caption {
    top: 70%; 
    bottom:auto; 
}

Make 70% something like 40% or just 50px;