I am working on a sidebar which has currently playing music at the top and a play queue below. The album artwork has a button to be able to resize the artwork to show more of the play queue.

The play queue also has jQuery nicescroll;

Calling jQuery nicescroll

$('.playQ').niceScroll({ zindex: 1000000, cursorborder: "0px solid #ccc", cursorborderradius: "2px", cursorcolor: "#ddd", cursoropacitymin: 0.1 });

Album Cover Resize

// Album Controls $(".cover .controls .scale").click(function() { if ($(this).parent().width() === 210) { $(".currently_playing .cover").animate({ height: "50px", width: "50px", margin: "20px 100px 0 100px" }); $(".currently_playing").animate({ height: "250px" }); $(".cover .controls .scale").css({ 'background-position' : 'top right' }); $(".right-sidebar .nicescroll-rails").css({ top: "430px" }); } else { $(".currently_playing .cover").animate({ height: "210px", width: "210px", margin: "20px 20px 5px 20px" }); $(".currently_playing").animate({ height: "410px" }); $(".cover .controls .scale").css({ 'background-position' : 'top left' }); $(".right-sidebar .nicescroll-rails").css({ top: "270px" }); } });

The problem is that upon page load, everything works as it should, however upon resizing the album artwork and the .playQ is moved up, the scrollbar stays exactly where is was, still works to scroll the element, just in the wrong place, however upon opening up the Google Chrome developers tab which must trigger a resize event, the scrollbar locates to where it should.

Browsing StackOverflow, I've tried several attempts to resolve this;

$(".playQ").getNiceScroll().resize(); // No Effect $(".playQ").getniceScroll().resize(); // No Effect $(".playQ").getniceScroll().resize(); // No Effect $(".playQ").niceScroll(); // No Effect $('.playQ').live('click', function(e){ // Broke Script $('body').on('click', '.playQ', function(e){ // No Effect