nav bar after scroll stretch too much - html

Question

I have nav bar and I'm using js to make my nav bar position fixed. After scrolling down because i adding width 100% my nav bar stretch more then it should and it goes over my layout
my script
$(window).on("scroll", function(){
if ($(window).scrollTop()) {
$('nav').addClass('sticky');
} else {
$('nav').removeClass('sticky');
}
})
Css
.sticky {
position: fixed;
top: 0;
width: 100%;
}
link to website so you can see what is happening is click here

Answer 1

I recomend you to use the position stick property
For example: nav { position: sticky; top: 0px; }. You should use it inside a container with height defined.
Reference: https://developer.mozilla.org/pt-BR/docs/Web/CSS/position#Sticky_positioning

Answer 2

.sticky {
position: fixed;
top: 0;
width: 100%;
}
Here you just can give the width value in pixels, what you want. Or if you wanna use it with relative values, you can make a container for it, because it will count the position from the parent element, give a fix width value to the container, and add your element to it.

Answer 3

.sticky {
position: fixed;
top: 0;
width: 100%;
}
could be your problem here.
Change 100% to the actual width you want, because your object is leaving the header object with a static positioning and as so the width isn't regulated any more. This fix is quick but also dirty. Consider changes in your layout have to be applied to all divs with static width, as well as responsive features are harder to implement. Option B would be a much better solution here.
Another solution is to insert a between the page div and your objects and set the fixed width there. Sub-divs allow for aligning objects. Inside objects at 100% width will line up to the next div up in the document tree.