Вертикальное фиксированное положение, когда прокрутка bugg

Question

Я пытаюсь сделать что-то на своем сайте, но это не сработает, как будто у меня есть это в виду. На моем сайте находится div на position: absolute. Когда я прокручиваю вниз, он должен прокручивать страницу, но когда она похожа на 20px с верхней стороны экрана, элемент должен быть исправлен.
Проблема в том, что она работает, но когда элемент должен быть fixed, он работает и не делает того, что я хочу.

Я понимаю, что я имею в виду, если нет, спросите его в комментарии, и я попытаюсь его прояснить.

Чтобы сделать все более ясным, здесь жизнь просмотра с ошибкой: http://www.eranmachiels.nl

код я использую:

[HTML]

<div class="personalInfo"> 
    <div class="photo"> 
     <img src="assets/web-gallery/me.jpg" /> 
    </div> 
    <span class="me">Eran Machiels</span> 
    <span class="somethingMore">An 18 years old webdeveloper</span> 
</div> 

[SASS]

.personalInfo { 
    position: absolute; 
    margin: 0 auto; 
    color: #fff; 
    @include text-shadow(1px 1px #000); 
    text-align: center; 
    font-size: 15px; 
    z-index: 2; 
    width: 212px; 

    .photo { 
     border: solid 6px #fff; 
     overflow: hidden; 
     height: 150px; 
     width: 150px; 
     margin: auto; 
     @include border-radius(50%); 

     img { 
      width: 150px; 
      height: 150px; 
      margin-left: -2px; 
      @include border-radius(50%); 
     } 
    } 

    .me { 
     font-size: 20px; 
     font-weight: bold; 
     display: block; 
    } 
} 

[jQuery]

if($(window).scrollTop() + 20 > $('.personalInfo').offset().top) { 
    $('.personalInfo').css({ 
     'position': 'fixed', 
     'top': 20 
    }).find('.me, .somethingMore').stop().fadeOut(100); 


} else { 
    $('.personalInfo').css({ 
     'position': 'fixed', 
     'top': $(window).height()/2 - $('.personalInfo').height()/2 + 'px' 
    }).find('.me, .somethingMore').stop().fadeIn(100); 
} 

+20 и top: 20 - это потому, что я хочу, чтобы элемент остановился, когда осталось 20 пикселей до того, как он достиг вершины страницы.
Возможно, это что-то очень глупо, но я не могу получить решение.
Заранее благодарим!

Answer 1

Не загромождайте свои css и jquery. Сделай это проще.

CSS:

.notScrolling{ 
    position: relative 
    margin: 0 auto; 
    top: 100px; 
} 
.whenScrolling { 
    position: fixed; 
    top: 20px; 
    left: 0; 
    right:0; 
} 

Jquery:

$(document).ready(function(){ 
function scroll() { 
    if ($(window).scrollTop() >= someValue) { 
     $('.className').removeClass('notScrolling').addClass('whenScrolling'); 
    } else { 
     $('.className').removeClass('whenScrolling').addClass('notScrolling'); 
    } 
} 
document.onscroll = scroll; 
}); 

Надеется, что это помогает.