спасибо за проверку этой проблемы.

Мне было интересно, есть ли способ запретить Bootstrap 3 с фиксированной верхней панелью навигации от 'мерцающий» или прыгать вверх и вниз при автоматической прокрутке с помощью плагина jQuery.

Активный пример здесь:

http://startbootstrap.com/templates/grayscale/

Если вы посмотрите этот шаблон на мобильном телефоне (я использую iPhone 4), используйте строку меню и нажмите на ссылку. Плагин jQuery перенесет вас в раздел страницы, но посмотрите на верхнюю строку меню. Он мерцает и танцует вокруг, как сумасшедший, и недействительно оставайся на месте.

Вот код, связанный с этим примером, но большинство других примеров яЯ видел, как люди делали одно и то же по-разному с помощью Bootstrapбыли одинаковыми.

HTML:

    
        
            
                
            
            <a class="navbar-brand" href="#page-top">
                  <span class="light">Start</span> Bootstrap
            </a>
        

        
        
            
                
                
                    <a href="#page-top"></a>
                
                
                    <a href="#about">About</a>
                
                
                    <a href="#download">Download</a>
                
                
                    <a href="#contact">Contact</a>
                
            
        
        
    
    


...

JQuery:

//jQuery for page scrolling feature - requires jQuery Easing plugin
$(function() {
    $('.page-scroll a').bind('click', function(event) {
        var $anchor = $(this);
        $('html, body').stop().animate({
            scrollTop: $($anchor.attr('href')).offset().top
        }, 1500, 'easeInOutExpo');
        event.preventDefault();
    });
});

CSS:

Сочетание стандартного Bootstrap 3 CSS и следующих пользовательских стилей:

.navbar {
    margin-bottom: 0;
    border-bottom: 1px solid rgba(255,255,255,.3);
    text-transform: uppercase;
    font-family: Montserrat,"Helvetica Neue",Helvetica,Arial,sans-serif;
    background-color: #000;
}

.navbar-brand {
    font-weight: 700;
}

.navbar-brand:focus {
    outline: 0;
}

.navbar-custom a {
    color: #fff;
}

.navbar-custom .nav li a {
    -webkit-transition: background .3s ease-in-out;
    -moz-transition: background .3s ease-in-out;
    transition: background .3s ease-in-out;
}

.navbar-custom .nav li a:hover,
.navbar-custom .nav li a:focus,
.navbar-custom .nav li.active {
    outline: 0;
    background-color: rgba(255,255,255,.2);
}

.navbar-toggle {
    padding: 4px 6px;
    font-size: 16px;
    color: #fff;
}

.navbar-toggle:focus,
.navbar-toggle:active {
    outline: 0;
}

Опять же, лучший способ повторить проблему - протестировать этот образец сайта с помощью мобильного устройства:

http://startbootstrap.com/templates/grayscale/

При тестировании на ПК проблема не возникает.

Спасибо за прочтение! Если ты'я уже нашел решение этой проблемы, яЯ хотел бы услышать это, или если выготовы принять трещину в этом, это будет очень цениться!