Jerry S Jerry S - 6 months ago 14
HTML Question

Navigation bar not resizing to browser screen

Here's the link to my code:
https://jsfiddle.net/81scw7eg/

MY JavaScript:

$(function() {
/* Stick the #bottomMenuBarContent to the top of the window */
var nav = $('#bottomMenuBarContent');
var navHomeY = nav.offset().top;
var isFixed = false;
var $w = $(window);
$w.scroll(function() {
var scrollTop = $w.scrollTop();
var shouldBeFixed = scrollTop > navHomeY;
if (shouldBeFixed && !isFixed) {
nav.css( {
position: 'fixed',
top: 0,
left: nav.offset().left,
width: nav.width()
});
isFixed = true;
} else if (!shouldBeFixed && isFixed) {
nav.css({
position: 'static'
});
isFixed = false;
}
});
});

/* Changes Navigation Bar Color on Scroll */
$(document).ready(function(){
var scroll_pos = 0;
$(document).scroll(function() {
scroll_pos = $(this).scrollTop();

if (scroll_pos > 50) {
$("#bottomMenuBarContent").css('background-color', '#2a2a2a');
} else {
$("#bottomMenuBarContent").css('background-color', 'grey');
}
});
});


I don't know why, but my navigation bar isn't resizing to my screen. Try opening up my site and resizing it to a smaller size. Now scroll down on the website so that the navigation bar changes colors, and then maximize the browser screen. For some reason it doesn't move along with it. Any ideas why?

Example Screenshot

Answer

in your example you set the width of the element to it's original width (which is in this case made by it's content and which doesn't go 100% of the screen the moment you switch from position: static to position: fixed)

just replace the line

width: nav.width()

with

right: 0
Comments