Web サイトの固定ナビゲーションバーが下の DIV_html/css_WEB-ITnose を圧迫します-htmlチュートリアル-php.cn

Web サイトの固定ナビゲーションバーが下の DIV_html/css_WEB-ITnose を圧迫します

WBOY

リリース： 2016-06-24 11:58:55

オリジナル

1354 人が閲覧しました

これは固定ナビゲーションバーの 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"});                    }                })

ログイン後にコピー

これはナビゲーションバーの CSS です

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

ログイン後にコピー

これは下の div の CSS (ここでは 3 つの 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;

ログイン後にコピー

ディスカッション（解決策）への返信

あなたの写真から、あなたの左の部分が押し込まれているのではなく、左の部分が動かないまま、その後ろのページをめくる部分がめくれ上がっているのです。 , そのため、相対的な位置は、押し込まれているように感じます (左側の矢印の垂直位置を比較できます)。これは、position: 絶対位置指定を使用したことに関連している可能性があります。

ああ、ヘッダー、メニューナビゲーション、画像スクロールは 3 つの接続された div で、真ん中の div は絶対に設定されており、3 番目の div は最初の div の下に貼り付けられています。左側のdivは絶対位置決めされているので動かないと押し込まれているように見えます。おばちゃんは視力が良いです。

質問が明確な場合は閉じてください。その他の質問がある場合は、ご返信ください。

写真を見ると、左側が絞られているのではなく、左側が動かないのに後ろの反転部分がめくれ上がっているので、相対的な位置関係から感じられます。（左側の矢印の垂直位置を比較できます）。これは、position: 絶対位置指定を使用したことに関連している可能性があります。

それは本当です！元のメニューナビゲーションの外側に div を追加して、中央を展開するだけです。

ああ、ヘッダー、メニューナビゲーション、画像スクロールは 3 つの接続された div で、真ん中の div は絶対に設定され、3 番目の div は最初の div の下に貼り付けられます。左側のdivは絶対位置決めされているので動かないと押し込まれているように見えます。おばちゃんは視力がいいです。

わかりました!