jquery - Sidebar disappears when scrolled to top -

i'm working on site right made sidebar follow until hit footer.

demo site id : test pass : 2015

i made work fine, when scroll top(very top), side bar hide self.

when scroll little bit down or click f5 , refresh appear again.

here's javascript used function.

$(function(){ var target = $("#subcontainer");//select element want follow var footer = $("footer")//making sidebar stop @ footer var targetheight = target.outerheight(true); var targettop = target.offset().top;  $(window).scroll(function(){     var scrolltop = $(this).scrolltop();     if(scrolltop > targettop){         var footertop = footer.offset().top;          if(scrolltop + targetheight > footertop){             customtopposition = footertop - (scrolltop + targetheight)             target.css({position: "fixed", top:  customtopposition + "px"});         }else{             target.css({position: "fixed", top: "10px"});         }     }else{         target.css({position: "static", top: "auto"});     } }); 

});

how fix problem sidebar shown when scroll right up.

thank time!

instead of:

target.css({position: "static", top: "auto"}); 

just reset top css 0px:

target.css({top: "0px"}); 

this because original style on #subcontainer had position: fixed when first load page. thing changing top position value.

you should able simplify code further change top:

$(window).scroll(function(){     var scrolltop = $(this).scrolltop();     if(scrolltop > targettop){         var footertop = footer.offset().top;          if(scrolltop + targetheight > footertop){             customtopposition = footertop - (scrolltop + targetheight)             target.css({top:  customtopposition + "px"});         }else{             target.css({ top: "10px"});         }     }else{         target.css({top: "0px"});     } });