Bom, como você não postou nenhum código e comentou estar utilizando Bootstrap
, vou passar algumas referências do próprio site deles. O próprio Bootstrap
possui esse sua resposta, que seria o uso do 'Affix
'.
Ele cria um elemento e faz com que ele seja fixado após um determinado scroll. Toda a documentação você pode acompanhar neste link: http://getbootstrap.com/javascript/#affix
Além do css você também vai precisar do pacote javascript do bootstrap
, que pode ser customizado na área de download: http://getbootstrap.com/customize/
Para a questão de responsive, vai muito do layout que você possui. Geralmente em mobile, não se usa isso, pois fica feio, apertado, poluído. É melhor que você remova essa opção em mobile. O próprio bootstrap possui isso, com 'hidden-xs
' ou 'hidden-md
', leia mais aqui: http://getbootstrap.com/css/#responsive-utilities
Ou como o seu exemplo, se o header for essa sidebar fixa, basta você utilizar um css para deixar ele fixado. Exemplo: 'position:fixed; top:0;
' ou um próprio feature do CSS para essa opção: http://getbootstrap.com/components/#navbar-fixed-top
Qualquer dúvida que você tenha, referente ao Bootstrap, dê uma olhada no site deles, existe uma documentação muito completa e com muitas opções.
Espero ter ajudado