Hi Morgan and Anil  

I was able to reproduce the scrolling down as well, but my browser actually "jitters" as well. See attached screencast.

p3.mov 6.8 MB • Download

For the document details area at the top, Melissa and I agree with adding a Expand link/icon to reveal this information without the user having to scroll all the way up. 

Here are some rough wires. Please match P3 styling, however.

Hello Morgan ,

We have resolved scrolling issues mentioned in above video. We have also developed show/hide document details. Please review both and let us know your feedback.

Hi Anil ,

The automatic scrolling issue to the bottom is resolved, but further to the video below there are some issues with the show/hide document details that need to be refined.

Thanks,

Morgan

Problems with hide-show document details (25-Oct-18).mp4 13 MB • Download

Hello Morgan ,

This issue has been resolved. Please review and feedback.

Hi Anil ,

The scrolling from Show/Hide Document Details is improved, but it still jumps slightly when it converts from Hide to Show. Could we refine this a little further. Perhaps Kevin can assist if necessary.

Thanks,

Morgan 

Hi Morgan ,

Yes, it would be great if Kevin  can assist us on this.

Anil  

The should be pretty straightforward, I'll do my best to explain how to fix it.

You have Javascript in place to detect when the user has scrolled to the navigation bar and make it sticky, however when that element becomes sticky you are affecting the structure of the page causing the content to shift.

The solution I would recommend is to wrap the navigation bar in a new <div> element with a unique class that you can use to detect scrolling. Give that new element a static height based on the height of the navigation bar. In this case ~43px (use window.resize to change the height to match the height of the child element dynamically for responsive). 

When that new element has been scrolled to you can make the child navigation bar sticky but leave the new element static so that the page structure remains the same.

Currently you have this element:
<div class="row navClassAdd documentTagDisplay sticky1" id="row5"></div>

Wrap it with a new element:
<div class="sticky__wrapper" style="height:43px;">
  <div class="row navClassAdd documentTagDisplay sticky1" id="row5"></div>
</div>

Change the JS to detect when .sticky__wrapper has been scrolled to and make the child (sticky1) positioned fixed to the browser. 

sticky__wrapper will be used as a trigger zone on the page to cause the navigation bar to become sticky instead of using a single element for both the display and the trigger.

Hello Kevin ,

Thanks for your help.

We have done changes as you suggested but looks like it still jump a little. Can you please check and suggest if we implemented it correctly? 

Anil  

It's looking much better so far. The only issue now is it looks like you are overcompensating the offset for the main sticky header in the scroll detection.

In your script that detects when the .sticky__wrapper has been scrolled to You would just need to add the height of #headerDisplay to the check.

something similar to this:

if ($(window).scrollTop() >= $('.sticky__wrapper').offset().top + $('#headerDisplay').outerHeight()){ } 

Hi Anil ,

What's the status of this to-do?

Thanks,

Morgan 

Hello Morgan ,

The sticky menu improved but it still jumps a little. Can you please check and confirm if it works?

Hi Anil ,

Yes, the menu has improved, but there is still a bit of jump. I'll mark this to-do complete for now, but it will have to be addressed post-prototype. 

Thanks,

Morgan