2
次のコードはchrome（つまり、スクロールすると.PageContainerの左端にリスト要素が配置されます）では正常に動作しますが、safari/firefoxつまり、リスト要素はロゴの直後に位置します）。私はCSSルールで何かを見逃していますか？Flexboxで固定された位置がchromeとsafari/firefoxの間で異なる動作をします
var stickyEl = $("#top-navigation"),
elTop = 0;
$(window).on('load', function() {
elTop = stickyEl.offset().top;
});
$(window).on("scroll", function() {
\t stickyEl.toggleClass('sticky', $(window).scrollTop() > elTop);
});.PageContainer {
\t border:1px solid green;
\t margin-top:5px;
\t margin-right: auto;
\t margin-left: auto;
\t width: 80%;
\t height: 1200px;
}
.nav-wrapper {
\t width: 100%;
\t background-color: whitesmoke;
\t display: inline-flex;
\t border:1px solid red;
\t vertical-align: middle; /*this is to remove white space between divs */
}
.myLogo {
\t width: 20%;
\t float: left;
\t padding-bottom: 0;
\t margin-top: 0;
\t margin-bottom: 0;
\t border:1px solid blue;
}
.top-navigation{
border:1px solid red;
margin-left: 1em;
position: relative;
margin-top: auto;
\t margin-bottom: auto;
}
.topnav {
\t list-style-type: none;
\t padding: 0;
\t margin: 0;
}
.topnav li {
\t display:inline-block;
}
.topnav li a {
\t display: inline-block;
\t color: black;
\t text-align: center;
\t text-decoration: none;
\t font-size: 17px;
\t transition: 1s;
\t padding: 16px 16px;
}
ul.topnav li a:hover{background-color: #555;}
.sticky {
position: fixed;
top: 0;
margin-left: 0;
-webkit-transform: translateZ(0);
}
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<div class="PageContainer">
<div class="nav-wrapper">
\t <div class="myLogo">
\t
\t \t <svg viewBox="0 0 200 200" style="display: block;">
\t \t <circle cx="100" cy="100" r="100" fill="red"/>
\t \t <line x1="0" y1="100" x2="200" y2="100" stroke="white"/>
\t \t <text x="100" y="100" text-anchor="middle" dy="0.35em" font-size="300%">my logo</text>
\t \t </svg>
\t \t
\t </div>
\t
\t <div class="top-navigation" id="top-navigation">
\t \t \t
\t \t <ul class="topnav" id="myTopnav">
\t \t \t <li><a href="#home">Home</a></li
\t \t \t ><li><a href="#news">News</a></li
\t \t \t ><li><a href="#contact">Contact</a></li
\t \t </ul> \t
\t \t
</div>
\t
\t
</div>
</div>
</body>
FFの通常のフローから 'position：fixed'が削除されていない可能性があります。 http://stackoverflow.com/q/32991051/3597276 –
私はどこかにいなければなりませんが、これ以上見ることはできますが、これはあなたを助けるかもしれません：https://github.com/philipwalton/flexbugs –