Абсолютно позиционированный div не распознает родительский div

У меня очень специфическая проблема с сайтом, над которым я работаю. У меня есть JQuery-анимированный термометр в нижней части сайта. Если размер вашего браузера меньше высоты термометра, что-то в позиционировании заставляет его прокручиваться выше позиции: фиксировано; Панель навигации. Вы можете увидеть эту проблему здесь, если ваше окно браузера мало.

Вот мой CSS для термометра.

.thermo1 {
    position: relative;
}

.thermometer {
    float: left;
    position:relative;
    margin-left:460px;
    margin-top:-550px;
}
.thermometer {
    width:50px;
    height:550px;
    position: relative;
    background: #302720;
    border:0px solid #aaa;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
    border-radius: 20px;
}
.thermometer .track {
     height:530px;
     top:10px;
     width:40px;
     border: 1px solid #302720;
     -webkit-border-radius: 18px;
     -moz-border-radius: 18px;
     -ms-border-radius: 18px;
     -o-border-radius: 18px;
     border-radius: 18px;
     position: relative;
     margin:0 auto;
     background: rgb(255, 255, 255);
     background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgb(94, 75, 62)), color-stop(1%, rgb(255, 255, 255)));
     background: -webkit-linear-gradient(top, rgb(0, 0, 0) 0%, rgb(255, 255, 255) 10%);
     background: -o-linear-gradient(top, rgb(0, 0, 0) 0%, rgb(255, 255, 255) 10%);
     background: -ms-linear-gradient(top, rgb(0, 0, 0) 0%, rgb(255, 255, 255) 10%);
     background: -moz-linear-gradient(top, rgb(0, 0, 0) 0%, rgb(255, 255, 255) 10%);
     background: linear-gradient(to bottom, rgb(0, 0, 0) 0%, rgb(255, 255, 255) 10%);
     background-position: 0 -1px;
     background-size: 100% 5%;
}   
.thermometer .progress {
     height:0%;
     width:100%;
     border-bottom: 0px solid rgb(143, 24, 67);
     -webkit-border-radius: 8px;
     -moz-border-radius: 12px;
     -ms-border-radius: 12px;
     -o-border-radius: 12px;
     border-radius: 12px;
     background: rgb(143, 24, 67);
     background: rgba(143, 24, 67, 0.9);
     position: absolute;
     bottom:0;
     left:0;
}
.thermometer .goal {
     position:absolute;
     top:0;
}
.thermometer .amount {
     display: inline-block;
     padding:0 5px 0 50px;
     border-top:1px solid black;
     font-family: Trebuchet MS;
     font-weight: bold;
     color:#302720;
}
.thermometer .progress .amount {
     padding:0 50px 0 5px;
     position: absolute;
     border-top:1px solid #302720;
     color:#302720;
     right:0;
}

И мой HTML

<div id="thermo1" class="thermometer">
    <div class="track">
        <div class="goal">
            <div class="amount">25000</div>
        </div>
        <div class="progress">
            <div class="amount">0</div>
        </div>
    </div>
</div>

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