Affix (Bootstrap) in div with images does not work

Question

Affix (Bootstrap) in div with images does not work

Navigation

#1 by (4 votes)

1

I'm trying to fix a div containing two images (one below the other) but following examples and making some modifications the result was very different than expected, when I scroll the page div immediately goes to the left side of the page and returns to the right side when you reach the bottom of the page. Code:

<body>
    <nav class="navbar navbar-default navbar-fixed-top" role="navigation"><!--------- START Navbar --------->
        <div class="container">
            <div class="navbar-header"><!-- START Brand and toggle get grouped for better mobile display -->
                <button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 
                    <span class="sr-only">Toggle navigation</span> 
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button> 
                <a class="navbar-brand" href="#">Meu Site</a>
            </div><!-- END Brand and toggle get grouped for better mobile display -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"><!-- START Collect the nav links, forms, and other content for toggling -->
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="#">News</a></li>
                    <li><button type="button" class="btn btn-info navbar-btn" data-toggle="modal" data-target="#login_modal">Login</button></li>
                    <li><button type="button" class="btn btn-info navbar-btn" data-toggle="modal" data-target="#create_account_modal">Create Account</button></li>
                </ul>
                <form class="navbar-form span7 text-center" role="search" id="search-form" action="../PHP/ValidateForm.php" method="get">
                    <div class="form-group">
                        <label class="radio-inline"><input type="radio" name="result_type" value="videos">Videos</label>
                        <label class="radio-inline"><input type="radio" name="result_type" value="photos" checked="">Photos</label>
                        <label class="radio-inline"><input type="radio" name="result_type" value="tumblr">Tumblr</label>
                    </div>
                    <div class="input-group">
                        <a href="#" class="btn btn-info input-group-btn" id="gly_button">
                            <span class="glyphicon glyphicon-th"></span>
                        </a>
                        <input class="form-control" type="text" name="search_input" placeholder="Search" />
                        <div class="input-group-btn">
                            <button class="btn btn-default" type="submit" name="search_form_submit" value="search">Search</button>
                        </div>
                    </div>
                </form>
            </div><!-- END Collect the nav links, forms, and other content for toggling -->
        </div>
    </nav><!--------- END Navbar --------->

    <div class="wrapper" role="main"><!-- START Content -->
        <div class="container"><!--- START Site Content --->
            <div class="row">
                <div id="conteudo" class="col-md-8"><!-- START News -->
                    <div class="row">
                        <div class="col-md-12 news_conteudo">
                            <div class="row">
                                <img class="news_thumb" src="../../app.images/7.jpg" />
                                <div class="news_information">
                                    <button class="btn btn-xs btn-info" href="#" type="button">Publisher</button><br /><br />
                                    <span class="title">Titulo</span><br />
                                    <p class="texto">Resumos Resumos Resumos Resumos Resumos
                                    Resumos Resumos Resumos Resumos Resumos Resumos Resumos Resumos Resumos Resumos Resumos
                                    Resumos Resumos Resumos Resumos Resumos Resumos Resumos Resumos Resumos Resumos Resumos</p>
                                    <span><span class="glyphicon glyphicon-eye-open pull-left" style="font-size:19px;"></span>
                                    <span class="views pull-left">13.023 Views</span></span>
                                    <span class="pull-right publish_date">Published in 12/December/2014</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row span7 text-center" id="video_pagination"><!-- START Pagination -->
                        <nav>
                            <ul class="pagination">
                                <li>
                                    <a href="#" aria-label="Previous">
                                        <span aria-hidden="true">&laquo;</span>
                                    </a>
                                </li>
                                <li><a href="#">1</a></li>
                                <li><a href="#">2</a></li>
                                <li><a href="#">3</a></li>
                                <li><a href="#">4</a></li>
                                <li><a href="#">5</a></li>
                                <li>
                                    <a href="#" aria-label="Next">
                                        <span aria-hidden="true">&raquo;</span>
                                    </a>
                                </li>
                            </ul>
                        </nav>
                    </div><!-- END Pagination -->
                </div> <!-- END News -->
                <div id="right-sidebar" class="col-md-4"><!-- START Left Sidebar -->

                        <div data-spy="affix" data-offset-top="70" data-offset-bottom="300">
                            <img src="../../app.images/4.jpg"/>
                            <img  src="../../app.images/4.jpg"/>
                        </div>

                </div><!-- END Left Sidebar -->
            </div>
        </div><!--- END Site Content --->
    </div><!-- END Content -->
    </body>

Image when the page pasted to the top:

ScrollImage

html css twitter-bootstrap bootstrap-3

asked by anonymous 31.12.2014 / 13:39

1 answer

How can I share an Image by Mail, Bluetooth, etc? Simulate a Click event without clicking using jQuery

score 4 · Accepted Answer

The problem is that you are applying the Affix plugin in an element that is part of the CSS framework responsible for keep the elements in place:

<div id="right-sidebar" class="col-md-4 pull-right" data-spy="affix" data-offset-top="70" data-offset-bottom="200">

In this row you have a conflict of interest because the element with the col-md-4 class is part of the column structure that Bootstrap provides, but the Affix will manipulate in a very particular way the styles of the element where it is applied, this will cause said conflict of properties and CSS values.

Solution

The solution is to apply another element to target the plugin affix, this element to be within the base structure of the page, in your case <div class="col-md-4"/> :

<!-- a estrutura da página -->
<div id="right-sidebar" class="col-xs-4">
    <!-- o elemento onde o Affix vai funcionar -->
    <div data-spy="affix" data-offset-top="70" data-offset-bottom="200">
        <img src="../../app.images/4.jpg" />
        <img src="../../app.images/4.jpg" />
    </div>
</div>

In this way, the element where the Affix plugin works will always be visible as expected and will always stay in its place "sends" the structure of the page.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="wrapper" role="main">
  <!-- START Content -->
  <div class="container">
    <!--- START Site Content --->
    <div class="row">
      <div id="conteudo" class="col-xs-8">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pharetra ut libero sed sodales. Vivamus mollis, justo sit amet rutrum porta, turpis ex eleifend massa, quis rhoncus velit odio laoreet eros. Proin faucibus libero vel augue aliquam,
        a placerat risus tincidunt. Donec vulputate tincidunt massa, eget placerat urna convallis quis. Ut pellentesque elit sed nibh pellentesque, eu lacinia massa sodales. Duis tempor dolor vel est mollis, a tempus erat blandit. Quisque id arcu non
        massa molestie congue. Proin in imperdiet ipsum. Phasellus non velit vulputate, mollis dui vel, facilisis elit. Duis massa odio, ornare eu ante a, molestie faucibus massa. Sed egestas placerat massa, vel placerat massa faucibus eget. Nam imperdiet
        justo viverra mauris efficitur, ac semper libero laoreet. Morbi ut ante sem. Ut tincidunt, dui semper facilisis tristique, libero magna condimentum mi, eu ultricies mauris sapien non nunc. Duis lacinia mauris augue, id tincidunt tortor tempor
        ut. Aliquam in imperdiet velit. Curabitur eget mi urna. Nullam consectetur arcu nulla, nec molestie odio iaculis ac. In sit amet eros ullamcorper, rutrum arcu non, efficitur arcu. Suspendisse a ligula quam. Nulla commodo augue id feugiat eleifend.
        Nam in mi tristique, dapibus nisl nec, suscipit quam. In condimentum lorem vel augue mattis varius. Integer eget mi sed metus dapibus congue. Quisque nibh felis, pellentesque a justo non, ullamcorper aliquam turpis. Quisque aliquam scelerisque
        gravida. Aliquam ullamcorper lectus vitae sagittis efficitur. Vestibulum condimentum nibh non sem consectetur congue. Nunc hendrerit finibus sem, eget ornare odio gravida sit amet. Nullam a nisi porta, tincidunt felis vel, rutrum mauris. Vivamus
        et posuere ante. Nunc quis augue quis orci consequat aliquet. Quisque venenatis scelerisque lectus, non vestibulum nunc. Nunc quis turpis ut ligula blandit euismod vel ac lectus. Nam eros felis, imperdiet sed lobortis at, pharetra nec augue. Nam
        ex dui, pellentesque vel maximus ut, pulvinar vitae dolor. Aenean sapien felis, varius vitae malesuada sed, convallis ut dui. Quisque venenatis consequat sapien, a placerat nunc fermentum sit amet. Nam maximus vitae tellus non mollis. Nunc luctus
        augue eros, id volutpat sapien pellentesque eget. Ut ornare tellus varius, suscipit justo vel, iaculis justo. Phasellus in porttitor lacus. Sed ultrices mi vitae magna egestas, id porttitor ipsum eleifend. Sed tincidunt nulla mi, eget bibendum
        purus facilisis eu. Curabitur ante urna, molestie vitae tempor vel, malesuada ut mauris. Aenean posuere sit amet nisi et ornare. Pellentesque at neque iaculis, tincidunt quam eget, posuere quam. Maecenas ornare egestas eros eget dictum. Donec
        maximus, lorem at rhoncus faucibus, lectus nisi consequat lacus, pellentesque aliquet diam felis a lorem. Integer porttitor massa sed quam lacinia egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;
        Duis lacinia arcu pretium, vulputate urna dignissim, tempus ante. Sed placerat nunc ut dapibus eleifend. Donec iaculis arcu libero. Ut feugiat, lacus in vestibulum consectetur, libero lacus porttitor orci, at tristique massa erat in felis. Quisque
        at lacinia odio. Fusce sodales libero sed augue placerat scelerisque. Curabitur lorem massa, laoreet eget convallis quis, feugiat ut lectus. Nam rutrum semper lectus a posuere.</div>
      <!--- START Right Sidebar --->
      <div id="right-sidebar" class="col-xs-4">
        <div data-spy="affix" data-offset-top="70" data-offset-bottom="200">
          <img src="../../app.images/4.jpg" />
          <img src="../../app.images/4.jpg" />
          <br/>Olá, eu não vou sair daqui!
        </div>
      </div>
      <!-- END Right Sidebar -->
    </div>
  </div>
  <!--- END Site Content --->
</div>
<!-- END -->
</div>

Example also in JSFiddle .

Note: I also noticed that you had a series of pull-right classes applied, I assume in an attempt to get things working as you intended. In my example I removed this because it does not make much sense in the scenario you presented.