Twitter-bootstrap 3 barra lateral afixada sobrepondo conteúdo quando a janela é redimensionada e também o rodapé

Question

Estou tendo problemas com uma barra lateral sobreposta quando uso o affix para bootstrap 3 e redimensiono a janela.Existe uma maneira de adicionar alguma classe css para que, em vez de sobrepor a coluna, o menu seja fixado no topo?

Além disso, a coluna está sobreposta ao rodapé.Qualquer ajuda seria muito apreciada.Parece que muitas pessoas estão tendo o mesmo problema.

Aqui está o HTML:

<div class="container">
<div class="row">
    <div class="col-md-4 column">
                <ul id="sidebar" class="nav nav-stacked" data-spy="affix" data-offset-top="130">
              <li><a href="#software"><b>Software</b></a></li>
                    <ul>
                       <li><a href="#features">Features</a></li>
                       <li><a href="#benefits">Benefits</a></li>
                       <li><a href="#costs">Costs</a></li>
                    </ul>

           </ul>

    </div>
    <div class="col-md-8 column">
            <p>blah, blah, blah</p>
            <hr>
          <a class="anchor3" id="top" name="software"></a>
            <h2 style="font-weight:bold;">Software</h2>
 <p>
 blah, blah, blah...</p><br><br>

    </div>
   </div>
  </div>

Aqui está o CSS:

#sidebar.affix-top {
position: static;
}

#sidebar.affix {
position: fixed;
top: 100px;
}

Answer 1

Demonstração: http://bootply.com/104634

Você só deve aplicar o affix quando a largura da tela é maior que 992 pixels (o ponto de interrupção no qual o Bootstrap col-md-* começa a empilhar verticalmente).

.affix-top,.affix{
    position: static;
}

@media (min-width: 992px) {

  #sidebar.affix-top {
  position: static;
  }

  #sidebar.affix {
  position: fixed;
  top: 100px;
  }
}

Além disso, se você quiser usar o affix em larguras menores, você pode alterar suas colunas para col-sm-* ou col-xs-*.

Answer 2

Eu queria que o afixo respondesse ao redimensionar as colunas, então encontrei uma solução bem simples.

O que faremos é combinar a largura do nosso afixo com a largura da coluna em que ele se encontra quando a grade for redimensionada.

Para fazer isso, basta fornecer sua coluna e afixar um ID.(Ou alguma forma de referenciar os elementos com javascript)

Optei por uma solução javascript.

function fixAffix() {
    try {

        // Bootstrap affix will overflow columns 
        // We'll fix this by matching our affix width to our affixed column width
        var bb = document.getElementById('affixColumn').getBoundingClientRect(),
            columnWidth = bb.right - bb.left;

        // Make sure affix is not past this width.
        var affixElm = document.getElementById('affixDiv');
        affixElm.style.width = (columnWidth - 30) + "px";

        // We can also define the breakpoint we want to stop applying affix pretty easily
        if (document.documentElement.clientWidth < 975) 
            affixElm.className = "";
        else
            affixElm.className = "affix";

    }
    catch (err) {
        alert(err);
    }
}



$(window).resize(function () {
       fixAffix();
   });

$(document).ready(function () {
    fixAffix();
});

Incluí código para remover o afixo em pontos de interrupção especificados.Isso é específico do meu aplicativo, mas provavelmente você também desejará fazer algo assim para interromper o afixo em dispositivos menores.