Menu secured in place within the wrapper

Question

Menu secured in place within the wrapper

My website is contained in a wrapper with a max width, and I have a fixed side menu that can be toggled with a button.

The problem I am facing is keeping the fixed side menu within the page wrapper. Fixed elements are typically positioned relative to the window rather than the parent element.

Here is an example using position: fixed: https://jsfiddle.net/okavp4p1/

As shown in the link above, the menu extends beyond the viewport instead of staying within the wrapper (grey area).

https://i.sstatic.net/mioNI.gif

To work around this issue, I utilized position: absolute: https://jsfiddle.net/5q3hn1fq/

In this updated version, the menu remains inside the wrapper as intended.

https://i.sstatic.net/SYFFl.gif

However, I had to add extra jQuery code to mimic fixed positioning during scrolling.

// Fix menu
$(window).on('load scroll resize', function() {
    navigation.find('ul').css('top', $(window).scrollTop());
});

Unfortunately, this method causes glitches and lag on most browsers. While the scrolling animation in the example may not show much issues, it becomes very apparent when implemented on a site with more elements.

Check out how it looks like when scrolling down the page:

https://i.sstatic.net/jOaC4.gif

I considered disabling scrolling when the menu is open but I am seeking advice or suggestions from others. Can anyone offer assistance?

javascript jquery html css

Answer 1

Answer №1

If you're looking for a workaround, here's one that might help. You could create an invisible fixed bar at the top using position:fixed with a height of 1px and no background-color.

Inside this bar, you can place your navigation and set it to float:right. By giving the navigation a width of 0 and then transitioning its width on button click to something like 100px, you can achieve the desired effect.

Using jQuery, you can dynamically adjust the height of the navigation to match the window height when resizing the window or showing it.

Check out this JSFiddle for a live example: https://jsfiddle.net/ahmadabdul3/pptggn6v/1/

To avoid any jumping around, keep in mind not to add padding directly to the navigation. Instead, consider wrapping the navigation in a container and setting the nav width to something like 90% to simulate padding.

For a demonstration of how the padding should be handled, refer to this updated fiddle: https://jsfiddle.net/ahmadabdul3/pptggn6v/2/

Answer 2

If you're looking for a workaround, here's one that might help. You could create an invisible fixed bar at the top using position:fixed with a height of 1px and no background-color.

Inside this bar, you can place your navigation and set it to float:right. By giving the navigation a width of 0 and then transitioning its width on button click to something like 100px, you can achieve the desired effect.

Using jQuery, you can dynamically adjust the height of the navigation to match the window height when resizing the window or showing it.

Check out this JSFiddle for a live example: https://jsfiddle.net/ahmadabdul3/pptggn6v/1/

To avoid any jumping around, keep in mind not to add padding directly to the navigation. Instead, consider wrapping the navigation in a container and setting the nav width to something like 90% to simulate padding.

For a demonstration of how the padding should be handled, refer to this updated fiddle: https://jsfiddle.net/ahmadabdul3/pptggn6v/2/

Answer 3

Answer №2

If you are experiencing issues with performance across various browsers, consider rewriting your function in plain JavaScript instead of using jQuery.

Although I did not observe any jittery movement in Chrome, using the code below can potentially lessen the strain on the browser.

$(window).on('load scroll resize', function() {
    document.getElementById('nav-list').style.top = window.scrollY + 'px';
});

https://jsfiddle.net/hb4zsL6g/

Answer 4

If you are experiencing issues with performance across various browsers, consider rewriting your function in plain JavaScript instead of using jQuery.

Although I did not observe any jittery movement in Chrome, using the code below can potentially lessen the strain on the browser.

$(window).on('load scroll resize', function() {
    document.getElementById('nav-list').style.top = window.scrollY + 'px';
});

https://jsfiddle.net/hb4zsL6g/

Menu secured in place within the wrapper

Answer №1

Answer №2

Similar questions

Ways to align div elements

`Developing data-driven applications with MVC3 using object binding`

Some images fail to load on Ember in the production environment

The AJAX load event listener triggers prior to receiving a response from the server

What is the process for eliminating the hover effect on a Bootstrap button?

The alert feature is triggered when any button is pressed

What is the best way to include a specific stylesheet for Blackberry Curve devices based on certain conditions

Angular-nvd3: maintaining consistent spacing between data points along the x-axis

Is there a way to dynamically refresh the options in a select dropdown using jQuery?

What does it mean in Javascript when b1 is undefined while o1 has a value and is equal to b1?

Is there a way to import a module generated by typescript using its name directly in JavaScript?

A guide on determining the return type of an overloaded function in TypeScript

Is there an alternative to the jQuery :contains selector?

Building multiple files in React allows developers to divide their code

The JQuery JavaScript function fails to complete its execution

Personalizing the Navigation Bar

Efficient Ways to pass information to an Object within a nested function

Is there a way to sustain audio playback even after the current track has finished?

iframe-based cross-site file upload

Transform in-line elements using specific HTML attributes using CSS styling