Мерцание в стилистике навигационной панели при прокрутке

У меня проблематичная проблема с моей нижней границей (навигационная ссылка) при прокрутке в определенном разделе. Я полагаю, что это не мерцание, а переход, который сбрасывается каждый раз, когда я просматриваю этот раздел. Например (см. Источник ниже), если мое окно в данный момент находится в разделе, и я мало прокручиваю, граница моего активного навигационного канала будет мерцать. Кроме того, если я держусь на полосе прокрутки и прокручиваю вниз, нижний край границы исчезает.Мерцание в стилистике навигационной панели при прокрутке

Я бы хотел: 1) Не прокручивать при прокрутке. 2) При прокрутке страницы с помощью полосы прокрутки держите рамку внизу.

http://jsfiddle.net/binhxn89/zzmbex55/16/

HTML:

<body> 
<div class="navbar"> 
    <div class="container cf"> 
     <ul> 
      <li><a href="#welcome" class="link active">Home</a></li> 
      <li><a href="#link1" class="link">Link1</a></li> 
      <li><a href="#link2" class="link">link2</a></li> 
      <li><a href="#link3" class="link">link3</a></li> 
      <li><a href="#link4" class="link">link4</a></li> 
      </ul> 
    </div> 
</div> 

<section id="welcome" class="welcome"></section> 
<section id="link1" class="link1"></section> 
<section id="link2" class="link2"></section> 
<section id="link3" class="link3"></section> 
<section id="link4" class="link4"></section> 
</body>

CSS:

body, html { 
    height: 100%; 
    color: #f3f3f3; 
    font-family: Arial, sans-serif; 
} 

body { 
    margin: 0; 
    overflow-x: hidden; 
} 

    .container { 
    width: 90%; 
    margin: 0 auto; 
} 

.navbar { 
    background: rgba(0,0,0, 0.9); 
    width: 100%; 
    position: fixed; 
    z-index: 20; 
} 
.navbar ul li { 
    list-style: none; 
    float: left; 
} 

.navbar ul li a { 
    color: #fff; 
    display: block; 
    font-size: 14px; 
    margin: 0 10px; 
    padding: 20px 5px; 
    text-decoration: none; 
    -webkit-transition: all 0.2s ease-in-out; 
    -moz-transition: all 0.2s ease-in-out; 
    transition: all 0.2s ease-in-out; 
} 

.navbar ul li a:hover, 
.navbar ul li a.active { 
    margin-top: -3px; 
    font-weight: bold; 
    padding-bottom: 8px; 
    border-bottom: 2px solid #fff; 
} 

section { 
    height:100%; 
    z-index: 10; 
    position: relative; 
} 

.welcome { 
    background: #ebebeb; 
} 

.link1 { 
    background: #aaa; 
} 
.link2 { 
    background: #bbb; 
} 
.link3 { 
    background: #ccc; 
} 
.link4 { 
    background: #ddd; 
}

JS:

$(document).ready(function() { 

$(window).scroll(function() { 
    var y = $(this).scrollTop(); 
    $('.link').each(function (event) { 
     if (y >= $($(this).attr('href')).offset().top - 10) { 
     $('.link').not(this).removeClass('active'); 
     $(this).addClass('active'); 
     } 
    }); 
    }); 

$('a[href*=#]:not([href=#])').click(function() { 
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) { 
     var target = $(this.hash); 
     target = target.length ? target : $('[name=' + this.hash.slice(1) +']'); 
     if (target.length) { 
     $('html,body').animate({ 
      scrollTop: target.offset().top 
     }, 600); 
     return false; 
     } 
    } 
    }); 
})

Если кто-то может помочь или направить меня к конкретному источнику regardin g этот вопрос, это было бы здорово. Благодаря!

источник

2015-01-16 binhxn89

В каких браузерах вы видите проблему? – Scriptable

Протестировано в Chrome и Firefox, присутствует в обоих. Кроме того, наблюдение; если вы закончите анимацию, эта проблема не появится. –

@Scriptable Я использую Chromium, но, я думаю, я бы хотел, чтобы он работал для каждого браузера. – binhxn89

Пожалуйста, смотрите here или посмотрите на код ниже. Сначала я вычисляю высоту одного элемента и получаю его положение. После этого я сравниваю часть с текущей позицией. Так что тариф, а не мерцание на Safari и Chrome, я надеюсь, что это исправит. Это швы, что ваше решение подняло несколько событий, если вы посмотрите на console.log(y); вы заметите много двойных значения для части 2, 3, 4 и 5.

$(window).scroll(function() { 
    var y = $(this).scrollTop(); 
    var sectionHeigth = $('section').height(); 
    var part = Math.round((y/sectionHeigth)); 

    $('.link').each(function(event) { 
     var position = $($(this).attr('href')).offset().top; 
     if ((part * sectionHeigth) != position) { 
      $(this).removeClass('active'); 
     } else { 
      $(this).addClass('active'); 
     } 
    }); 
});

Вот update на ваш комментарий. Я проверю, находится ли текущее положение между позицией start и start + height. Это все.

$(window).scroll(function() { 
    var y = $(this).scrollTop(); 
    $('.link').each(function(event) { 
     var position = $($(this).attr('href')).offset().top; 
     var a = $($(this).attr('href')).height(); 
     if (y >= position && y <= position + a) { 
      $(this).addClass('active'); 
     } else { 
      $(this).removeClass('active'); 
     } 
    }); 
});

источник

2015-01-16 20:59:01 hofmeister

Привет, я думаю, я должен был быть более конкретным, но ответ решил эту конкретную проблему, так что спасибо! Тем не менее, мне было интересно, знаете ли вы, как решить проблему, если высота раздела вообще не указана. Например: http://jsfiddle.net/binhxn89/zzmbex55/24/, эти навигационные ссылки не функционируют, как указано выше. Пожалуйста, дайте мне знать, можете ли вы исправить это! – binhxn89

@ binhxn89 Пожалуйста, посмотрите мое обновление. Это должно решить вашу проблему. – hofmeister

Привет, большое вам спасибо за ваш ответ, он работает! Я работаю над веб-сайтом одной страницы и начал добавлять контент в каждый раздел, который занимает около высоты окна. В дополнение к вашему последнему обновленному ответу, мне было интересно, как изменить навигационную ссылку, когда следующий раздел находится на полпути (или 3/4 пути), прокручивается из окна/высоты окна? Надеюсь, это последнее, что я попрошу. Вы были чрезвычайно полезны! – binhxn89

Мерцание в стилистике навигационной панели при прокрутке

ответ

Смежные вопросы