Side floating menu in responsive website design. How to implement?

Question

css

Hello! The tricky problem I have is to make the menu block sticky on scroll after the header and unstick before the footer. The very problem is that when the height of the block along which it moves is fixed, then everything is fine, but then it decreases on high-resolution monitors and white space forms at the bottom of it, since the parent block with content has become larger, and when everything is converted to percentages , then the background is compressed to the size of the content pressed to the top of the block, and the block with the menu itself does not come off in front of the footer, but moves on, as if there is no border at all. For the sticky block I used jquery.sticky-kit . Please advise something sensible, how to implement the idea.

Answer 1

Hello, honestly I didn’t read much into the question, but it might help.
From an article on Habré, I found HTML5 UP for myself: HTML5 and CSS3 Responsive Templates.
There is a template there: read-only . Perhaps he will help you as an example.