O afixo Bootstrap começa no meio da página

Question

Quero várias seções em minha página, cada uma com uma navegação empilhada.A navegação empilhada deve permanecer na seção div.A primeira navegação empilhada fica na primeira seção.

A segunda navegação empilhada salta para baixo e para trás durante a rolagem.Alguém pode me explicar o que está acontecendo e como posso corrigir isso.

Demonstração:http://www.bootply.com/vAT4FJgSMS#

Answer 1

Você pode direcionar todas as suas barras laterais afixáveis ​​de uma só vez, dando-lhes alguma classe de identificação e, em seguida, aplicando afixo para cada elemento com a classe:

$('.sideNav').each(function() {
    $(this).affix({ /* options */ });
});

Então você só precisa definir a parte superior e inferior de cada seção.

$(this).affix({
    offset: {
        top: function(e) {
            var $curSection = $(e).closest('.row');
            return (this.top = $curSection.offset().top - 10);
        },
        bottom: function (e) {
            var $nextSection = $(e).closest('section').next('section');
            //if last element, go to bottom of page
            var bottom = ($nextSection.length === 0) ? 0 :
                         $(document).height() - $nextSection.offset().top;
            return (this.bottom = bottom);
        }
    }
});

affix-top e affix-bottom são aplicados quando o elemento não está mais dentro do intervalo do top e bottom.Normalmente, você deseja apenas que esses elementos retornem ao fluxo normal, então você pode definir seu css assim (ou até mesmo ignorá-los completamente, já que relativo é a posição padrão):

.affix-top,
.affix-bottom {
    position: relative;
}

Quando a classe affix é aplicada, você pode estilizar sua lista assim:

.affix {
    position: fixed !important; 
    top: 10px; 
}

Demonstração de trabalho no violino