I tried to reproduce your bug but I got no chance, maybe I am missing something Anyway I guess you need to add a flag weather the data has been added before or not because your condition is true more than one time and while you are scrolling
var added = false;
$(function() {
var $window = $(window);
var $width = $(window).width();
function windowWidth() {
if ( $width< 480 ) {
function top() {
var $top = $window.scrollTop();
if( $top < 80 ) {
$(".main-nav").css({
'position': '',
'width': '99.5%'
});
$(".thick-line-header").css("display","");
}
else {
var $homeTab = $('<li class="home"><a href="#top" >test</a></li>');
$(".main-nav li").css({
'position': 'fixed',
'width': '100%',
'top':'0',
'left':'0',
'margin-top':'0'
});
if(!added) {
$("#main-nav").prepend($homeTab);
added = true;
}
$(".thick-line-header").css("display","none");
}
};
$(window).scroll(top);
}
};
windowWidth();
});
I hope this can help :)