Affix(Bootstrap) in div with images does not work

Asked

Viewed 322 times

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 from expected, when I go scrolling on the page the div immediately goes to the left side of the page and returns to the right side when you arrive at the end 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 page pasted at top:

Colada no Topo

Image with Scroll

inserir a descrição da imagem aqui

html css twitter-bootstrap bootstrap-3

1 answer

4


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

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

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

Solution

The solution is to apply another element to target the affix plugin, an element that stays within the base structure of the page, in your case the <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 plugin Affix works will always be visible as expected and will always stay in your place as "send" the page structure.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="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>

Also in the Jsfiddle.

Note: I also noticed that you had a series of classes pull-right applied, I assume in an attempt to get things to work as intended. In my example I took that because they don’t make much sense in the scenario you presented.

  • Hello @Zuul I applied your answer to my code and got the following result: when I do the first scroll top to the ground works perfectly at the time it returns to the top the images disappear (return to the top instantly) and the scroll effect)

  • @Ricardohenrique Or you have more CSS properties defined for the element #right-sidebar who subscribe to Bootstrap, or have broken HTML Markup that causes weird behaviors or have some Javascript breaking the behavior of the Affix plugin.

  • I’ll be checking in and checking in

  • There are no properties for the #right-sidebar element, and no javascript (other than datepicker,jquery,bootstrap.js)

  • @Ricardohenrique There are then some problems in the HTML Markup... One thing is certain, for the HTML you have in question, the problem has been identified and the solution presented/proven. When I tested the images were walking from left to right on the page... after solving as I described in the question the problem was outdated....

  • I added the integral code, with the content of the contents of the contents, something else when the pull-right was excluded it had the function of making the images position itself to the right inside the two columns of the grid system since they do not occupy 100% of the grid

  • @Ricardohenrique Another thing, if the HTML of the question is inside another HTML and this other HTML is broken or with attributes that will break the functioning of the Affix plugin, you have to analyze this to identify the problem. We do not have access to all your HTML and edit now the question to add another problem is an incorrect procedure, you must put a new question to deal with this new problem.

  • I added the whole body

  • @Ricardohenrique However, I don’t know if you read my answer, but use CSS classes like pull-right and/or pull-left in places where there may be a conflict of interest with the Framework and/or the Affix plugin will bring unexpected results. Use and pull-right should be in the element to be floated or in a wrapper of the element never in the element that is part of the base structure of the page, namely the col-X.

  • I removed the pull-right images

Show 5 more comments

Browser other questions tagged html css twitter-bootstrap bootstrap-3

You are not signed in. Login or sign up in order to post.