Heim > Web-Frontend > HTML-Tutorial > 网站固定导航条挤动下面的DIV_html/css_WEB-ITnose

网站固定导航条挤动下面的DIV_html/css_WEB-ITnose

WBOY
Freigeben: 2016-06-24 11:58:55
Original
1348 Leute haben es durchsucht



这是固定导航栏JS

//获取要定位元素距离浏览器顶部的距离                var navH = $(".Leigl").offset().top;                //滚动条事件                $(window).scroll(function(){                //获取滚动条的滑动距离                    var scroH = $(this).scrollTop();                    //滚动条的滑动距离大于等于定位元素距离浏览器顶部的距离,就固定,反之就不固定                    if(scroH>=navH){                        $(".Leigl").css({"position":"fixed","top":0});                    }else if(scroH<navH){                        $(".Leigl").css({"position":"static"});                    }                })
Nach dem Login kopieren

这是导航栏CSS
            width: 1336px;            background: #333;            margin-top: 0px;            font-size: 20px;             z-index:9999;
Nach dem Login kopieren


这是下面div的CSS(这里覆盖了三个div这是最底层的div的css)
            border: 2px white solid;            width: 370px;            height: 470px;            position: absolute;            top: 180px;            left: 92px;            opacity: 0.5;            background-color: gray;            border-radius: 10px;
Nach dem Login kopieren



回复讨论(解决方案)

从你的图片看,你的这个不是左边这块被挤下去了,而是它后面的翻页部分滚上去了而左边这块没有动,所以相对位置让你觉得是被挤下去了(可以比较左边的那个箭头的垂直位置)。可能跟你用了position: absolute;绝对定位有关。

喔,好像明白了,头部、菜单导航、图片滚动是连在一起的三个div中间那个被设置 absolute之后第三个就贴到第一个下面去了。而左边的div是绝对定位的,所以没动看起来像是被挤下去了。大婶好眼力。


如果问题清楚了,请结贴;如果还有其他问题,请回帖提出。

喔,好像明白了,头部、菜单导航、图片滚动是连在一起的三个div中间那个被设置 absolute之后第三个就贴到第一个下面去了。而左边的div是绝对定位的,所以没动看起来像是被挤下去了。大婶好眼力。

从你的图片看,你的这个不是左边这块被挤下去了,而是它后面的翻页部分滚上去了而左边这块没有动,所以相对位置让你觉得是被挤下去了(可以比较左边的那个箭头的垂直位置)。可能跟你用了position: absolute;绝对定位有关。


果然是这样!我在原来的菜单导航外面在加一个div把中间撑开就可以了。

喔,好像明白了,头部、菜单导航、图片滚动是连在一起的三个div中间那个被设置 absolute之后第三个就贴到第一个下面去了。而左边的div是绝对定位的,所以没动看起来像是被挤下去了。大婶好眼力。


OK!
Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage