CSS+div网页设计，导航栏随页面上下滚动，导航栏宽度变化

最近在学习网站设计，在制作导航栏随网页上下滚动的时候，出现了一些错误，希望懂的小伙伴可以帮忙看一下。
我的错误如下：

当页面打开后导航栏是这样的：

但是页面向下拉的时候，虽然导航栏也跟着向下滑动了，但是导航栏的宽度发生了变化：

而我想他的样式不变，

相关代码如下，其中由于我想使页面在放大缩小的时候是同比例的放大缩小，所以设置了导航栏宽度为12%，内容的宽度是88%，且他们两个div外的总div宽度是1210px;这个我不想改变，不知道其他哪里出了问题，希望知道办法的小伙伴不吝赐教，实在感谢~

两张图没贴上~谢谢各位

position:fixed; 固定导航栏 一般这个是不动的

建议直接在样式中添加position:fixed定位，可以不用通过一个滚动事件来添加。另外，定位后的内容是脱离文档流的，fixed定位是相对于浏览器定位的。

兄弟我给你解释一下吧，我觉的问题在这里，你让那两个的Div 的宽度之和已经到了100% 了，但是你又给这两个DIV 设置了margin-left 那么，这两个DIV占据的宽度已经不是你的1210 px了，你明白了吗

设置成position:fixed;确实解决了我当前的问题，但是position:fixed;后我的导航栏width:12.0%;就不和主要的内容container-fluid成比例了，而是和参考屏幕成比，这样一来，我放大缩小页面之后，导航栏和主要内容的宽度比例就变化了，造成导航栏和主要内容之间有很大间隙，很不美观。
请问还有其他解决办法吗，谢谢~

用百分比设定元素的宽度，一般情况是指参考父元素的宽度，当position是fixed或absolute时，百分比是参考屏幕的宽度.

我觉的现在主要的问题在这儿，就是当我向下拉页面的时候，调用函数利用position:fixed;把导航栏固定在了页面上，这个时候导航栏width:12.0%;就不和主要的内容container-fluid成比例了，而是和参考屏幕成比，这样一来，导航栏的宽度就有下拉之前的和“主要的内容container-fluid成比例”变成了和“参考屏幕成比”了，这样一来我的导航栏的宽度当然发生了变化，就成了我帖子里的情况。