2 weixin 35706605 weixin_35706605 于 2017.08.28 21:38 提问

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

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

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

图片说明

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

图片说明

而我想他的样式不变,

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

图片说明

图片说明

图片说明

8个回答

huang931027
huang931027   2017.08.29 09:11
兄弟我给你解释一下吧,我觉的问题在这里,你让那两个的Div 的宽度之和已经到了100% 了,但是你又给这两个DIV 设置了margin-left 那么,这两个DIV占据的宽度已经不是你的1210 px了,你明白了吗
weixin_35706605
weixin_35706605 回复Luffy_fans_zh: 好啦我知道怎么改啦,已经改好了,还是谢谢你啦~(*^__^*)
3 个月之前 回复
weixin_35706605
weixin_35706605 回复Luffy_fans_zh: 感谢~按你的方法修改了,问题解决了,两个DIV在一行不会分行了,但是导航栏在下拉的时候宽度任然会变啊,好无奈(ㄒoㄒ)
3 个月之前 回复
huang931027
huang931027 回复Jioke_c: 你想让两个DIV在一行的话,用 float
3 个月之前 回复
huang931027
huang931027 回复十里35706605: 那不简单吗,你把两个DIV的宽度的比例稍微改一下,一个 11% , 一个87% ,应该就可以了吧。你把margin-left 也写成百分比的形式,这样只要两个div的宽度和这个margin-left的比例之和是100%就行了
3 个月之前 回复
weixin_35706605
weixin_35706605 感谢~我开始也是这么想的,可是我如果把那两个margin-left 删去,打开网页的时候这两个DIV就不在一行,而是上面一行下面一行了,我也很迷茫啊。我在评论贴个图给你看
3 个月之前 回复
weixin_35706605
weixin_35706605   2017.08.28 21:43

图片说明

图片说明

两张图没贴上~谢谢各位

qq_29119259
qq_29119259   2017.08.29 01:54

图片说明

zy841958835
zy841958835   Ds   Rxr 2017.08.29 08:21

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

weixin_35706605
weixin_35706605 回复pluie-cloud: 那在$(function () {$(window).scroll(function () {中具体要设置哪些参数呢,能否说具体一点呢~实在感谢~~
3 个月之前 回复
zy841958835
zy841958835 position:absolute 设置左右间距就好 注意这个左右边距是跟浏览器的左右边距
3 个月之前 回复
weixin_35706605
weixin_35706605 谢谢~那如果我想实现导航栏随着页面上下滑动,不随页面左右滑动,这个该怎么实现呢
3 个月之前 回复
zy841958835
zy841958835 在可以在每次页面大小重调之后 触发$(window).resize 调用重新计算组要内容的宽度 或者导航栏的宽度一起计算
3 个月之前 回复
weixin_35706605
weixin_35706605 设置成position:fixed;确实解决了我当前的问题,但是position:fixed;后我的导航栏width:12.0%;就不和主要的内容container-fluid成比例了,而是和参考屏幕成比,这样一来,我放大缩小页面之后,导航栏和主要内容的宽度比例就变化了,造成导航栏和主要内容之间有很大间隙,很不美观。 请问还有其他解决办法吗,谢谢~ 用百分比设定元素的宽度,一般情况是指参考父元素的宽度,当position是fixed或absolute时,百分比是参考屏幕的宽度.
3 个月之前 回复
qq_34973422
qq_34973422   2017.08.29 09:09

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

weixin_35706605
weixin_35706605   2017.08.29 11:28

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

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

weixin_35706605
weixin_35706605   2017.08.29 11:34

图片说明

图片说明

weixin_35706605
weixin_35706605   2017.08.29 11:39

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

Csdn user default icon
上传中...
上传图片
插入图片