2
다음 코드는 크롬에서 예상대로 작동합니다 (즉, 목록 요소는 내릴 때 .PageContainer의 왼쪽에 위치하지만 사파리/파이어 폭스에서는 그렇지 않습니다). 즉, 목록 요소는 로고 직후에 위치합니다. CSS 규칙에서 뭔가 빠졌습니까?Flexbox에서 고정 된 위치가 크롬과 사파리/파이어 폭스간에 다르게 동작합니다.
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 –