Fixed DIV Positioning Issue

Question

I have been working on my reporting template and not able to figure out position of the details contains (right hand side): http://relevantcodes.com/Tools/ExtentReports2/ExtentJava210.html

I am having an issue with scrolling which I am not able to figure out. Please see the 2 images below:

Before scroll:

After scroll:

In the 2nd image, notice the extra space at the top when the scroll happens on the left size (where all tests are stored). It happens as the DIV is fixed but I wanted to know if there is a way to position it to the top when we scroll down?

Another issue is that when we open the menu (by clicking the bars in the corner-top-left), the left-container overlaps the right-container. How can I fix this issue? Is setting a new width for the right-container using js a good approach?

Would love to hear your suggestions and hopefully find an elegant solution to this issue which I am not able to figure out..

Answer 1

For your first problem, I believe the only way you'd be able to acomplish that is by a javascript listener - listening for when the user scrolls and changing the position from position:absolute/relative to position:fixed after they scroll down Ypx . Disclaimer : there could be a css way of doing it i am not aware of.

For your second problem with the overlapping, I would set the div that slides out to position:absolute so that instead of moving the whole page (and taking resources redrawing all the elements) it just glides over the rest of your content. Maybe put a background behind it that fades out the content behind it.

Hope this helps.

Answer 2

Your second problem goes away if you remove the fixed position on that second column, everything rearranges nicely without that. I would say that the best approach is to remove that .pinned rule from your CSS and handle the position of the column with JS.

Get the height of your nav and the dashboard (regardless of it being visible or not), then compare that resulting height to your scroll position. With that you should be able to place that column precisely where you want it.

Answer 3

Issue 1

1.Remove .pinned { position: fixed !important;} at line 6 in file(materialize.min.css).
2.Use below JS

$('.vh100').css('position', 'absolute')// to add aboslute position by default.
$(window).scroll(function() {
  if ($(window).scrollTop() > 48) // nav bar height is 48 px
  {
    $('.vh100').css('position', 'fixed'); // add position fixed if scrolling is done and scroll top is greater than 48 px which is the nav bar
    $('.vh100').css('margin-top', '-48px'); // when scroll up you have assign negative margin-top so that the space will not be appeared.
  } else {
    $('.vh100').removeAttr('style'); // remove margin-top
    $('.vh100').css('position', 'absolute'); // and add position absolute
  }
});

Issue 2(ExternalJava210.html --> Line :3273)

add and remove position of .vh100 when .menu-toggle is clicked.