javascript - Fixed DIV Positioning Issue -

i have been working on reporting template , not able figure out position of details contains (right hand side): http://relevantcodes.com/tools/extentreports2/extentjava210.html

i having issue scrolling not able figure out. please see 2 images below:

before scroll:

after scroll:

in 2nd image, notice space @ top when scroll happens on left size (where tests stored). happens div fixed wanted know if there way position top when scroll down?

another issue when open menu (by clicking bars in corner-top-left), left-container overlaps right-container. how can fix issue? setting new width right-container using js approach?

would love hear suggestions , find elegant solution issue not able figure out..

issue 1

1.remove .pinned { position: fixed !important;} @ line 6 in file(materialize.min.css).
2.use below js

$('.vh100').css('position', 'absolute')// add aboslute position default. $(window).scroll(function() {   if ($(window).scrolltop() > 48) // nav bar height 48 px   {     $('.vh100').css('position', 'fixed'); // add position fixed if scrolling done , scroll top greater 48 px nav bar     $('.vh100').css('margin-top', '-48px'); // when scroll have assign negative margin-top space not appeared.   } else {     $('.vh100').removeattr('style'); // remove margin-top     $('.vh100').css('position', 'absolute'); // , add position absolute   } }); 

issue 2(externaljava210.html --> line :3273)

add , remove position of .vh100 when .menu-toggle clicked.