The first requirement of this sidebar was that upon the user resizing the browser to a smaller width, the sidebar layout should switch to a more mobile-friendly stacked full-width layout. In addition, the components would reorder with some of the sidebar elements appearing before, in between, and after the main page content.
To achieve this restructure, a CSS-savvy coworker and I discussed our options and decided flex and media queries would be a helpful strategy. I set each component as a row in a row wrap flex box. To ensure that the content wrapped after two elements, I set a media query for larger screens of .home__item:nth-child(n + 3) should be "order: 1". On smaller browsers, that media query no longer applies and instead I give negative order values to some components to have them fall in the right order. A simplified version of this tactic would be as follows:
The next challenging requirement was to position the sidebar elements as fixed as the user scrolled down the page. The flex layout, however, meant each element in the sidebar had to be individually positioned rather than positioned as a group. In addition, the sidebar content could vary. There could be 1, 2, or 3 elements in the sidebar depending on the scenario and the user and this variable combination of content impact the positioning of each element. To add the necessary fixed positioning on scroll, I used a combination of added classes to position elements according to what content was on the page.
After accomplishing this fixed positioning, I then had to decide how to switch the content back to absolute positioning when the user scrolled to the bottom of the page. The expectation was that the footer of the page should then push the sidebar content up. To accomplish this, I would have to position the individual elements as absolutely positioned relative to the page wrap and position them from the bottom of the wrap. To accomplish this, I would need to know the combination of content on the page and the height of the elements, since both of those could vary. I made sure to execute these functions on page load to avoid any performance issues from performing them on scroll.
Next I wrote a function to use the infomation about the content combination and the height of the elements to apply the absolute positioning.
And finally I needed to include a function to remove this absolute positioning and restore the fixed positioning if the user scrolled back up the page.
Overall, I was proud that I was able to use a combination of CSS and JQuery to accomplish the goals the Product team had envisioned. Thinking out all different scenarios necessary and tweaking the code to fit these scenarios definitely took time, but it felt like time well spent. Next time I work on a similar feature I will be able to move faster and try even better ways to achieve this functionality. I'm sure there are plenty of opportunities for improvement with this code, and I certainly would be eager to hear about them.