2

The following code behaves as expected in chrome (i.e. the list element positions itself at the very left of the .PageContainer when I scroll down) but not in safari / firefox (i.e. 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>
Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
spyrostheodoridis
  • 508
  • 2
  • 8
  • 27
  • It's possible that `position: fixed` is not being removed from the normal flow in FF, as should be the case. http://stackoverflow.com/q/32991051/3597276 – Michael Benjamin Mar 01 '17 at 22:33
  • I have to be somewhere or I'd look into this more but this may help you: https://github.com/philipwalton/flexbugs – Justin Taddei Mar 01 '17 at 22:37

1 Answers1

0

@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!

Matt Fernandez
  • 190
  • 6