Add a sticky div to the 'Package details' page that will keep the name of the Package visible when the user scrolls

[johnmhoran]

The title says it all. I already wrote the HTML and CSS code for this earlier today -- for an initial draft, at least -- and will start with that when I tackle this issue.

One question: do we want or need a non-white background? A thick bottom border or a bottom box-shadow will make the div more visible when it rests at the top of the page, but we will also have two more rows below it, newly added in my work on issue #1228, which I had contemplated displaying as a 3-row table -- we might have a design/display conflict to resolve when we reach this point.

[pombredanne]

We could either make the "purl" row sticky... our we could also add the purl to the blue "package details" bar and make this bar sticky?
Would you have some screenshot to paste as I reckon you made some prototype?

[johnmhoran]

Thanks @pombredanne and good idea. Here are several screenshots of the current prototype. Please treat this as just a working draft intended to prompt comments and ideas.

This one combines the sticky div (the top row with purl pkg:npm/sequelize@3.19.3) -- I changed the yellow background to white for discussion purposes -- with the two new rows I created for the closest non-vuln and the latest non-vuln. (I agree that it does look cleaner with a white background. ;-))

This is the page at rest (before scrolling):

. . . and after a little scrolling:

[johnmhoran]

I spoke too soon about opening a PR -- I'd done the exploratory work in my 1228 branch I think, so I'll either open a new branch for this issue or tackle it in the 1228 branch. @pombredanne Do you have a preference?

[pombredanne]

@johnmhoran my preference is for smaller focused PRs as they are easier to merge

[johnmhoran]

Thanks @pombredanne -- I'll handle the sticky div with a separate branch and a separate PR.