0

I am trying to have this navigation sidebar that slides away some time after the mouse leaves, making the text-part expand. The thing is, that whenever the sliding function starts, the page jumps to the top. There's no "#" used, I tried overflow-y: scroll, return false at the end of the function, preventDefault, but nothing works.

Here's the js code

$(document).ready(function(){
    $("#navbar").delay(5000).animate({left: "-=15%"});
    $("#navwrap").css("width","2%").css("position","fixed");
    $("#bodywrap").delay(5000).animate({width: "90%"});

    $("#navbar").mouseleave(function(){
        $(this).stop(true, true).delay(3000).animate({left: "-=15%"});
        $("#bodywrap").delay(3000).animate({width: "90%"});
        $("#navwrap").css("width","2%").css("position","fixed");
    });

    $("#navwrap").mouseenter(function(){
        $("#navbar").stop(true,false);
        $("#bodywrap").stop(true,false);
        if ($("#navbar").css("left") != "0%"){
            $("#navbar").animate({left: "0%"});
            $(this).css("width","15%").css("position","initial");
            $("#bodywrap").animate({width: "75%"});
        };
    });
});

And here's the fiddle: http://jsfiddle.net/uuw2dzry/1/

Addriuss
  • 3
  • 2
  • Your example doesn't jump to the top in chrome. It seems to work fine – Turnip Sep 17 '15 at 17:58
  • Jumps to the top in firefox. – S1r-Lanzelot Sep 17 '15 at 17:59
  • it jumps to the top in Chrome. The issue is in the animation of the $("#bodywrap"). Perhaps you could get the scroll position prior to the animation and animate not only the width but also the scrollTop. But I had no luck myself on your fiddle. – Gregg Duncan Sep 17 '15 at 18:30

1 Answers1

0

Much of the animations and delays can be done by CSS

http://jsfiddle.net/fkL57v9d/

Your code is overly complicated and leaves room for bugs and undesired results.
I'd consider re-creating this page in a simpler way.

spencer.sm
  • 19,173
  • 10
  • 77
  • 88
  • yeah I'm not quite used to javascript yet, there's a lot of complicated code because I couldn't think of a simpler way at the moment and was too happy about it finally working to keep on thinking about it, thanks a lot! :) – Addriuss Sep 17 '15 at 21:56