1

Estou a tentar fixar uma div contendo duas imagens (uma abaixo da outra) porem seguindo exemplos e fazendo algumas modificações o resultado ficou bem diferente do esperado, quando vou dando scroll na pagina a div vai imediatamente para o lado esquerdo da pagina e retorna ao lado direito quando se chega ao final da pagina. Código:

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

Imagem quando a pagina colada no topo:

Colada no Topo

Imagem com Scroll

inserir a descrição da imagem aqui

1 Resposta 1

4

O problema passa pelo fato de estares a aplicar o plugin Affix num elemento que faz parte da estrutura base de CSS responsável por manter os elementos no seu local:

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

Nesta linha tens um conflito de interesses pois o elemento com a classe col-md-4 faz parte da estrutura de colunas que o Bootstrap fornece, mas o plugin Affix vai manipular de uma forma muito particular os estilos do elemento onde se encontra aplicado, indo isso causar o referido conflito de propriedades e valores CSS.

Solução

A solução passa por aplicar um outro elemento para servir de alvo ao plugin affix, elemento esse a ficar dentro da estrutura base da página, no teu caso a <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>

Desta forma, o elemento onde o plugin Affix funciona vai ficar sempre visível como esperado e vai ficar sempre no seu lugar conforme "manda" a estrutura da página.

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

Exemplo também no JSFiddle.


Nota: Reparei também que tinhas uma série de classes pull-right aplicadas, presumo que numa tentativa de meter as coisas a funcionar como pretendias. No meu exemplo retirei isso porque não fazem grande sentido no cenário que apresentaste.

10
  • Olá @Zuul apliquei sua resposta ao meu codigo e obtive o seguinte resultado: quando realizo o 1º scroll topo ao chão funciona perfeitamente na hora que retorna ao topo as imagens desaparecem (voltam ao topo instantaneamente) e o efeito scroll sessa (volta a ficar 100% colado no topo)
    – Ricardo
    Commented 1/01/2015 às 12:36
  • @RicardoHenrique Ou tens mais propriedades de CSS definidas para o elemento #right-sidebar que subscrevem as do Bootstrap, ou tens markup de HTML quebrada que causa comportamentos esquisitos ou tens algum JavaScript a quebrar o comportamento do plugin Affix.
    – Zuul
    Commented 1/01/2015 às 12:40
  • estarei verificando e já confirmo
    – Ricardo
    Commented 1/01/2015 às 12:42
  • Não existe propriedades ao elemento #right-sidebar, e não possuo javascript (alem do datepicker,jquery,bootstrap.js)
    – Ricardo
    Commented 1/01/2015 às 12:45
  • @RicardoHenrique Sobra então algum problema na markup de HTML... Uma coisa é certa, para o HTML que tens na pergunta, o problema foi identificado e a solução apresentada/comprovada. Quando testei as imagens andavam a passear da esquerda para a direita na página... depois de resolver como descrevi na pergunta o problema ficou ultrapassado....
    – Zuul
    Commented 1/01/2015 às 12:52

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .