Position fixed in Flexbox behaves differently between chrome and safari / firefox
Question
The following code behaves as expected in chrome (ie the list element positions itself at the very left of the .PageContainer when I scroll down) but not in safari / firefox (ie the list element positions itself just after the logo). Am I missing something in the CSS rules?
var stickyEl = $("#top-navigation"), elTop = 0; $(window).on('load', function () { elTop = stickyEl.offset().top; }); $(window).on("scroll", function() { stickyEl.toggleClass('sticky', $(window).scrollTop() > elTop); });
.PageContainer { border:1px solid green; margin-top:5px; margin-right: auto; margin-left: auto; width: 80%; height: 1200px; } .nav-wrapper { width: 100%; background-color: whitesmoke; display: inline-flex; border:1px solid red; vertical-align: middle; /*this is to remove white space between divs */ } .myLogo { width: 20%; float: left; padding-bottom: 0; margin-top: 0; margin-bottom: 0; border:1px solid blue; } .top-navigation{ border:1px solid red; margin-left: 1em; position: relative; margin-top: auto; margin-bottom: auto; } .topnav { list-style-type: none; padding: 0; margin: 0; } .topnav li { display:inline-block; } .topnav li a { display: inline-block; color: black; text-align: center; text-decoration: none; font-size: 17px; transition: 1s; 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"> <div class="myLogo"> <svg viewBox="0 0 200 200" style="display: block;"> <circle cx="100" cy="100" r="100" fill="red"/> <line x1="0" y1="100" x2="200" y2="100" stroke="white"/> <text x="100" y="100" text-anchor="middle" dy="0.35em" font-size="300%">my logo</text> </svg> </div> <div class="top-navigation" id="top-navigation"> <ul class="topnav" id="myTopnav"> <li><a href="#home">Home</a></li ><li><a href="#news">News</a></li ><li><a href="#contact">Contact</a></li </ul> </div> </div> </div> </body>
1 answers
solution1
0 2017-03-02 03:54:29
@SpyTh if the issue is cross browser support like the post claims I would recommend using Autoprefixer. You type in your CSS and it will generate CSS that would be supported in multiple browsers. AP can be found here.
http://autoprefixer.github.io/
I hope this helps!
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.