Bootstrap position 3 affixe après rafraîchir la page

Question

J'ai configuré un affixe qui fonctionne la plupart du temps, comme on peut le voir sur cette page: http://wisderm.com/ingredients/Green+Tea+Extract

Ceci est mon code pour modifier dynamiquement les décalages d'affixes:

// nav-pills is the class of the <ul> element of the sidebar 
// #hero-unit is the jumbotron 

// where to start scrolling from 
$('.nav-pills').affix({ 
    offset: { top: function() { return $('#hero-unit').outerHeight(true)+10; } } 
}); 

// after changing from affix-top to affix 
$('.nav-pills').on('affixed.bs.affix', function() { 
    $('.nav-pills').css("margin-top", function() { return -$('#hero-unit').outerHeight(true)+10; }); 
}); 

// after changing back to from affix to affix-top 
$('.nav-pills').on('affixed-top.bs.affix', function() { 
    $('.nav-pills').css("margin-top", 0); 
}); 

Le problème est, une fois que je fais défiler vers le bas à un endroit où affix-top a été changé en affix et j'actualise la page, l'affixe qui charge est beaucoup plus bas sur la page qu'il devrait être. Pourquoi cela se passe-t-il et comment puis-je le réparer?

Answer 1

Eh bien, cela est une vieille question, mais la réponse aider quelqu'un:

Votre problème est résolu par ajoutant les écouteurs d'événements avant d'initialiser l'affixe.

Voir fil dans Github https://github.com/twbs/bootstrap/pull/14331

essayez ceci:

// after changing from affix-top to affix 
$('.nav-pills').on('affixed.bs.affix', function() { 
    $('.nav-pills').css("margin-top", function() { return -$('#hero-unit').outerHeight(true)+10; }); 
}); 

// after changing back to from affix to affix-top 
$('.nav-pills').on('affixed-top.bs.affix', function() { 
    $('.nav-pills').css("margin-top", 0); 
}); 
$('.nav-pills').affix({ 
    offset: { top: function() { return $('#hero-unit').outerHeight(true)+10; } } 
});