Website fixed navigation bar squeezes the DIV_html/css_WEB-ITnose below

This is the fixed navigation bar 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"});                    }                })

This is the navigation bar CSS

            width: 1336px;            background: #333;            margin-top: 0px;            font-size: 20px;             z-index:9999;

This is the CSS for the div below (covered here There are three divs. This is the css of the bottom div)

            border: 2px white solid;            width: 370px;            height: 470px;            position: absolute;            top: 180px;            left: 92px;            opacity: 0.5;            background-color: gray;            border-radius: 10px;

Reply to the discussion (solution)

Judging from your picture, it’s not that the left part of yours has been squeezed down, but that the flipping part behind it has rolled up while the left part hasn’t moved, so the relative position makes you feel like it’s been squeezed down ( You can compare the vertical position of the arrow on the left). It may be related to the fact that you used position: absolute; absolute positioning.

Oh, I seem to understand. The header, menu navigation, and image scrolling are three divs connected together. The middle one is set to absolute, and the third one is pasted below the first one. The div on the left is absolutely positioned, so it looks like it's been squeezed in if it doesn't move. Auntie has good eyesight.

If the question is clear, please close it; if you have other questions, please reply.

Oh, I seem to understand. The header, menu navigation, and image scrolling are three divs connected together. The middle one is set to absolute, and the third one is pasted below the first one. The div on the left is absolutely positioned, so it looks like it's been squeezed in if it doesn't move. Auntie has good eyesight.

From your picture, it’s not that the left piece of yours has been squeezed down, but that the flipping part behind it has rolled up while the left piece has not moved, so the relative The position makes you feel like you are being squeezed in (you can compare the vertical position of the arrow on the left). It may be related to the fact that you used position: absolute; absolute positioning.

That’s true! I just add a div outside the original menu navigation to expand the middle.

Oh, I seem to understand. The header, menu navigation, and image scrolling are three divs connected together. The middle one is set to absolute, and the third one is pasted below the first one. The div on the left is absolutely positioned, so it looks like it's been squeezed in if it doesn't move. Auntie has good eyesight.

OK!