9

各ページに最初に移動したときにトップ メニューのボックス シャドウが表示されず、スクロールを開始すると表示される理由を突き止めるために、私は長い間試みてきました。

これはサイトです: http://gourmetsailing.co.nz/DRAFT/charters.html

影のあるクラスは .navbar-wrapper です

.navbar-wrapper {
background-color: #FFFFFF;
width: 100%;
margin: auto;
-webkit-box-shadow: 0px 5px 5px -2px rgba(0, 0, 0, 0.5); /* [h-offset] [v-offset] [blur radius] [color: red, green, blue, opacity]; */
-moz-box-shadow: 0px 5px 5px -2px rgba(0, 0, 0, 0.5);
box-shadow: 0px 5px 5px -2px rgba(0, 0, 0, 0.5);}

メニューをページの上部に固定するために stickUp も使用していることに言及する価値があります: http://lirancohen.github.io/stickUp/

おそらく、そのスクリプトと何らかの競合がありますか？

4

1 に答える 1

10

クラスに追加position: relativeしてみてください。navbar-wrapper

何が起こっているかは次のとおりです。

スクロールを開始すると、 with クラスにインライン スタイルとしてposition: relative宣言が動的に追加され、ボックス シャドウが起動されます。divnavbar-wrapper

この宣言をクラスに直接追加すると、ボックスの影は最初から存在します。

于 2015-08-09T02:27:36.300 に答える