Handling browser window resizes

At the moment, our <aside> element will be fixed in place as soon as the page scrolls, which suits our needs while the browser remains the same size.

However, if the window is resized for some reason, the <aside> element will fall out of its fixed position and could be lost outside of the boundaries of the viewport. In this task, we'll fix that by adding an event handler that listens for the window's resize event.

Engage Thrusters

To maintain the fixed element's correct location relative to the rest of the page, we should add the following code directly after the one() method that we added in the last task:

win.on("resize", function () {
    if (fixedEl.css("position") === "fixed") {
        var wrapperPos = wrapper.offset().left,
            wrapperWidth = wrapper.width(),
            fixedWidth = (wrapperWidth / 100) * percentWidth;

        fixedEl.css({
            width: fixedWidth,
            left: wrapperPos + wrapperWidth - fixedWidth,
  ...