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

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

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

图片说明

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

图片说明

而我想他的样式不变,

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

图片说明

图片说明

图片说明

0

8个回答

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

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

图片说明

图片说明

两张图没贴上~谢谢各位

0

图片说明

0

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

0

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

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

0

图片说明

图片说明

0

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

0
兄弟我给你解释一下吧,我觉的问题在这里,你让那两个的Div 的宽度之和已经到了100% 了,但是你又给这两个DIV 设置了margin-left 那么,这两个DIV占据的宽度已经不是你的1210 px了,你明白了吗
-3
weixin_35706605
C 回复Luffy_fans_zh: 好啦我知道怎么改啦,已经改好了,还是谢谢你啦~(*^__^*)
接近 2 年之前 回复
weixin_35706605
C 回复Luffy_fans_zh: 感谢~按你的方法修改了,问题解决了,两个DIV在一行不会分行了,但是导航栏在下拉的时候宽度任然会变啊,好无奈(ㄒoㄒ)
接近 2 年之前 回复
huang931027
IAmObject 回复Jioke_c: 你想让两个DIV在一行的话,用 float
接近 2 年之前 回复
huang931027
IAmObject 回复十里35706605: 那不简单吗,你把两个DIV的宽度的比例稍微改一下,一个 11% , 一个87% ,应该就可以了吧。你把margin-left 也写成百分比的形式,这样只要两个div的宽度和这个margin-left的比例之和是100%就行了
接近 2 年之前 回复
weixin_35706605
C 感谢~我开始也是这么想的,可是我如果把那两个margin-left 删去,打开网页的时候这两个DIV就不在一行,而是上面一行下面一行了,我也很迷茫啊。我在评论贴个图给你看
接近 2 年之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
CSS解决无序列表导航条随浏览器大小改变而窜行的方法
方法一:   li 的width 属性百分比 % 而代替 PX等具体数值设置。 这种方法的效果是导航条随浏览器的大小改变而与浏览器呈现相应比例的缩放   方法二:   在ul 外添加一个div层 或者直接设置ul 属性。 设置ul或div属性 margin:0 auto;(使ul或div剧中),按照需求设置好ul或div得width和height。 这种方...
让导航条的格式不随界面的变化而变化
让导航条的格式不随界面的变化而变化
导航栏随屏幕移动而变化
先吐槽一下下,好久没有整理东西了,最近忙死啦,天天加班到十点,不过这样会成长很快,也是蛮开心的!好了开始整理一下下!项目中用到了头部导航需要随着鼠标的滑动而变化,所以上网查了很多资料,其实很简单就能实现的效果。//css 部分---------------------.header-top { padding: 1em 0; /*background: #337AB7;*/ backgr
Bootstrap,左侧二级菜单,div高度随内容变化,设置border宽度无效
笔者用Bootstrap写网站自适应已经接近尾声了,这是第二篇也是最后一篇博客记录我写自适应遇到的坑。这次笔者主要讨论三个问题:如何用Bootstrap写侧边栏二级目录、div高度随内容变化、设置border宽度无效的问题。 一、Bootstrap写侧边栏二级菜单 笔者实现二级菜单其实是用标签页做的。先看最终结果,再讨论代码: 自适应移动端后的效果如下: 笔者的实现思想是把标签页目...
div高度随窗口变化而变化
一个CSSDiv布局的实例,让DIV的高度随浏览器窗口的变化而变化,窗口变大,Div的高度会变大,窗口变小则Div变小,貌似智能化。
div+css 制作横向导航菜单
好,开始上课!                前三节课,我们知道了什么是“块状元素和内联元素”,以及xHTML+CSS布局的核心概念“盒子模型”,同时又学习了一下页面布局中两种方法中的一种方法“浮动”,这次我们就利用这三个概念,来制作一款经典的导航条,别看它其貌不扬,可是网上所有的导航条都可以在它的基础上演变而来~,厉害吧~!其实理论都是一样的,只要你能理解并学会这节课的内容,以后再困难的导航
导航栏栏跟随
<script>  window.onscroll=function(){   var sT=document.documentElement.scrollTop||document.body.scrollTop;   if(sT>=157){           $(".header_info").css('position','fixed');       $(".heade...
导航栏菜单项随滚轮滚动,样式发生变化
滚到最上面,选中的是最后一个
jquery实现随着鼠标滚动固定导航栏
下面是简单的导航栏固定效果。。感觉代码很少,write less Do more.也算是jquery比较方便的原因。 下面代码仅供参考<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>页面滚动事件</title> <script src="js/jquery-2.2.3.js"></s
强制html元素不随窗口缩小而换行
div{  white-space:nowrap;  }  强制div内的元素不随窗口缩小而换行本文出自 “点滴积累” 博客,请务必保留此出处http://tianxingzhe.blog.51cto.com/3390077/1679366
JQuery实现导航菜单栏随滚动条上下滚动
JQuery实现导航菜单栏随滚动条上下滚动
如何实现导航栏固定在某一位置不会随滚动条的移动而改变
木有医用品                 1                                           木有医用品                 2                                           电动牙刷                 3                                 
实现页面左侧固定,右侧随浏览器宽度变化而变化的布局
&amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html lang=&quot;en&quot;&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt; &amp;lt;title&amp;gt;Title&amp;lt;/title&amp;gt; &amp;lt;style&amp;gt; .box{ width: 8
CSS导航菜单水平居中的多种方法
在网页设计中,水平导航菜单使用是十分广泛的,在CSS样式中,我们一般会用Float元素或是「display:inline-block」来解决。而今天主要讲解如何让未知宽度的元素居中,下面我们会列出几种方法来解决水平居中问题。当然这些方法不一定是用来解决导航菜单问题,还有其它类似情况也是可以使用的。 在线演示:Demo CSS导航菜单水平居中的多种方法: 方法1:dis
随着页面鼠标的滑动页眉页脚导航栏的自动隐藏与显示
自己做的一个例子,用的Html5与css3动画技术,实现随着页面鼠标的滑动页眉页脚导航栏的自动隐藏与显示
导航栏随滚动透明渐变
该demo采用了opacity和background的rgba两种方法来实现导航栏随滚动透明渐变,但是需要注意的是不兼容IE8及以下的IE浏览器,原因:由于IE8及以下的透明度设置不支持CSS3的opacity属性和rgba颜色值!
JS导航滚动到一定高度后固定、滚动条随着输入内容增加而滚动\导航样式改变
&amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot;/&amp;gt; &amp;lt;title&amp;gt;JS实现div随屏幕滚动到一定高度后固定&amp;lt;/title&am
用CSS让左边导航栏的高度自适应右边
用父子路由左右排版后,左边作为导航栏,右边是具体的展示内容: 右边CSS中给height:auto后可以根据内容的多少自适应大小,但是左边的导航栏背景高度不能随着右边的高度自适应看起来就很丑,找了很多方法都没有解决,最后发现了两句话就解决了。还有就是要将这左右两个div再用一个父div套起来。 ...
CSS+DIV设计导航条源代码
HTML代码: "http://www.w3.org/TR/html4/loose.dtd"> DIV+CSS商品分类下拉导航菜单 &nbsp;全部商品分类&nbsp; &nbsp;各地名优茶 热门 西湖龙井 金骏眉 大红袍 铁观音  名茶 红茶 绿茶 乌龙茶 黑茶 白茶
CSS布局--左侧自适应母元素高度
CSS布局--左侧自适应母元素高度
css+html实现自适应宽度的菜单学习
本文是利用css和html实现自适应于文本长度菜单。 实现后的效果图,如下: 实现代码如下: menu4.html --> a{ display: block; height:38px; /* width:107px; */ /* line-heig
[css]CSS如何让DIV的宽度随内容的改变而改变
让div根据内容改变大小 div{ width:auto; display:inline-block !important; display:inline; }
h5+css 菜单导航---改变宽度
菜单导航—改变宽度1、使用javascript脚本实现:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head>
CSS如何让DIV的宽度随内容的改变而改变
让div根据内容改变大小 div{ width:auto; display:inline-block !important; display:inline; }
vue随滚动条滚动而改变属性
vue随滚动条滚动而改变属性 scrollTop: 滚动条卷起的高度 clientHeight: 滚动条可视高度 scrollHeight: 滚动条总高度
div随着浏览器窗口大小变更,改变大小(resize)
浏览器的放大缩小会导致网页布局变动,jquery的resize()方法,可以根据浏览器的窗口大小的变动,对网页进行操作:以下是div随着浏览器窗口大小变更,改变大小(resize)的案例:html:js效果:resizeDiv的块会根据网页变更,大小也随之改变...
原生静态布局下,用div+css实现界面随着不同的屏幕变换自动调整大小
1 首先用css元素让body和html元素的的height和width设置成100%。   因为当我们设置100%的时候有一个对照的父元素,也就是说参照谁来设置自己高和宽的百分比。   对于有些浏览器来说,把屏幕的高和宽作为body元素的参照父元素,对于有些浏览器来说把屏幕的高和宽作为htm   的参照父元素,所以第一步同时把这两个元素作为参照父元素。2 定义一个盒子div ,设置div的wid...
导航条随页面滚动自动置顶-兼容IE8和Chrome浏览器
导航条随页面滚动自动置顶 兼容IE8和Chrome浏览器主要核心JS代码如下:
css 高度随宽度比例变化
方案一:padding实现原理:一个元素的 padding,如果值是一个百分比,那这个百分比是相对于其父元素的宽度而言的,padding-bottom 也是如此。使用 padding-bottom 来代替 height 来实现高度与宽度成比例的效果,将 padding-bottom设置为想要实现的 height 的值。同时将其 height 设置为 0 以使元素的“高度”等于 padding-bo...
html+css 导航条 变色
&amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html lang=&quot;en&quot;&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt; &amp;lt;title&amp;gt;162-a标签伪类选择器练习&amp;lt;/title&amp;gt; &amp;lt;style&amp;gt; *{ ma
html中使用js+css使导航条(页面的一部分)在随页面滚动到顶部的时候停留在窗口边缘
&amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html lang=zh-cn&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=utf-8&amp;gt; &amp;lt;title&amp;gt;一个不带CSS样式的HTML5布局&amp;lt;/title&amp;gt; &amp;lt;meta name=description content=一个不带CSS样式的HTML5布局&amp;gt; &amp;lt;meta
【JavaScript】真正实现网页字体大小跟随屏幕变化而变化
方法一:     使用媒体查询Media获取屏幕宽度,根据不同屏幕下情况,给元素赋值不同字体大小, @media screen and (min-width:640px){ .IRYFloat P{ font-size: 3.0rem; } }   方法二:利用JS动态变化调整: &amp;lt;script t...
jQuery实现随屏幕滑动顶部固定导航栏背景色透明度变化
HTML代码: 导航栏的类 navbar这个类需要在js中调用 &lt;!-- 导航栏的类 start --&gt; &lt;div class="container wis-nav-pc"&gt; &lt;div class="row"&gt; &lt;div class="col-md-12"&gt; ...
CSS技巧,CSS设置任何元素宽度随内容增加自动变宽
宽度随内容增加自动变宽的问题,看起来简单,但网上各种找不到。 其实感觉以前在布局的时候在哪里遇到过自动变宽,想了好久好像记得只有用table布局的时候吧,但是不可能哪里都用table,如果用层那怎么办呢。 然后又发现了一个熟悉,display!!没错,就是它,很平常的一个属性,块状元素嘛,几乎天天用,居然忽略了。 给元素加上 display:table; 就OK了。 记录一下。不用那么麻烦
滚动div内容,变化导航栏状态,点击导航栏切换div内容
&amp;lt;script src=&quot;https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js&quot;&amp;gt;&amp;lt;/script&amp;gt; &amp;lt;style&amp;gt;     *{padding:0;margin:0;} .warp{position:relative;height:600px;width:300px;overflow:hidden} ...
div位置大小不随浏览器变化而变化
#main-content {                 margin: 0 30px 0 260px;                 padding: 40px 0 0 0;                 position:absolute;绝对                 top: 30px; 固定上部                 left: 3%; 左边留成百分比
CSS布局:div高度随窗口变化而变化
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> http://www.w3.org/1999/xhtml"> CSS布局:div高度随窗口变化而变化 * {margin:0px;} html {height: 100%; } body {height: 100%; } div { margin:0 auto;}
监测鼠标滚轮的上下滚动来实现导航条显示隐藏
$(document).on(&quot;mousewheel DOMMouseScroll&quot;, function (e) {     var delta = (e.originalEvent.wheelDelta &amp;amp;&amp;amp; (e.originalEvent.wheelDelta &amp;gt; 0 ? 1 : -1)) || // chrome &amp;amp; ie (...
DIV背景图片随DIV高度宽度变化而自动拉伸
 方法一:用css滤镜,问题是只支持IE5.5以上版本方法二:用两个层,一个放图片,用,为底部层;          另一个作页面显示层。建议用方法 西狐测试测试一下网页背景拉伸:) 实际使用后,发现有个需要注意的地方——使用AlphaImageLoader滤镜后,图片区域内的链接与按钮都将会失效,解决的办法是使用其他元素放置链接与按钮,浮动在该元素之上。 
DIV CSS 布局定位 实例 菜单导航 详解
为什么要用Div Css可以简单的作如下解释: 当时创造WEB的那个人也发明了用TABLE布局,当TABLE布局泛滥之后,然后他说:我创造了WEB也毁了WEB,TABLE布局会给一个网页带来大量无意义的语句难以阅读。TABLE是来干什么的,TABLE是表格,从来都
文章热词 机器学习教程 Objective-C培训 交互设计视频教程 颜色模型 设计制作学习
相关热词 mysql关联查询两次本表 native底部 react extjs glyph 图标 网页导航栏的制作教程 网页导航栏制作教程