Keshav Vasudevan Keshav Vasudevan - 2 months ago 10
HTML Question

Fixing a div to the top on scroll - incorrect behavior in Firefox

I have an html page with a div in between the page and some content below the div. I want to fix this div to the top when I scroll past it. This is my HTML, CSS and JS:



$(document).ready(function() {

$(window).scroll(function() {
if ($(window).scrollTop() > $('#dashfolio-main-row').offset().top)
$('.dashfolio-content-dashbar').addClass('sticky');


else
$('.dashfolio-content-dashbar').removeClass('sticky');
});

});

.dashfolio-content-dashbar {
height: 60px;
margin-top: -7px;
border-radius: 15px;
display: inline-block;
background: rgb(45, 45, 45);
/* Old browsers */
background: -moz-linear-gradient(top, rgba(45, 45, 45, 1) 0%, rgba(7, 7, 7, 1) 100%, rgba(19, 19, 19, 1) 100%);
/* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(45, 45, 45, 1) 0%, rgba(7, 7, 7, 1) 100%, rgba(19, 19, 19, 1) 100%);
/* Chrome10-25,Safari5.1-6 */
}
.dashfolio-content-dashbar.sticky {
position: fixed;
top: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>hi</li>
<li>hi</li>
<li>hi</li>
<li>hi</li>
<li>hi</li>
<li>hi</li>
<li>hi</li>
<li>hi</li>
<li>hi</li>
</ul>
<div id="dashfolio-main-row" class="row">
<div class="col-md-1"></div>
<div class="col-md-10 dashfolio-content-dashbar"></div>
<div class="col-md-1"></div>
</div>
<div class="col-md-12">
<!-- random content below -->
<ul>
<li>hi</li>
<li>hi</li>
<li>hi</li>
<li>hi</li>
<li>hi</li>
<li>hi</li>
<li>hi</li>
<li>hi hihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihi</li>
<li>hi</li>
<li>hi</li>
<li>hi</li>
<li>hi</li>
<li>hi</li>
<li>hi</li>
<li>hi</li>
<li>hi</li>
<li>hi</li>
<li>hi</li>
<li>hi</li>
</ul>
</div>





The middle div, which I have called a midbar, is centered on the page with the bootstrap column property. The expected behavior is, as soon as I scroll below the midbar, it sticks to the top, but it's horizontal position is unchanged. However, in my case, and only in firefox, the midbar moves horizontally to the right while sticking to the top when I scroll past it, and the content below the midbar flows over it and not below it. Please help me solve this issue. You can see exactly what I mean here - http://www.bootply.com/jOZjV5bFSV (view in firefox)

Answer

a couple of suggestions - because when you change an element to a position:fixed type - it removes it from the DOM - leading to your layout issues. So applying a text-center class on the parent div and some CSS style changes it is now doing the right thing. Try altering the following sections:

//change this section of the HTML
<div id="dashfolio-main-row" class="row text-center">
   <div class="dashfolio-content-dashbar"> </div>
</div>



//change this section of the CSS
.dashfolio-content-dashbar {
   width:80%;
   margin:0 auto;
}

.dashfolio-content-dashbar.sticky {
   position: fixed;
   top:0; 
   left:10%;
   z-index:999999;
}

Note that I am designating the width as 80% and then the class of sticky - setting the left to 10% to allow centering.

$(document).ready( function() {

    $(window).scroll( function() {
        if ($(window).scrollTop() > $('#dashfolio-main-row').offset().top)
            $('.dashfolio-content-dashbar').addClass('sticky');
         

        else
            $('.dashfolio-content-dashbar').removeClass('sticky');
    } );

} );
/* CSS used here will be applied after bootstrap.css */

#dashfolio-main-row{text-align:center}
.dashfolio-content-dashbar {
  
  height: 60px;
  margin-top: -7px; /*removes gap between midbar and the vertical theme bar */ 
  border-radius: 15px;
   display: inline-block;

  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#2d2d2d+0,070707+100,131313+100 */
background: rgb(45,45,45); /* Old browsers */
background: -moz-linear-gradient(top,  rgba(45,45,45,1) 0%, rgba(7,7,7,1) 100%, rgba(19,19,19,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  rgba(45,45,45,1) 0%,rgba(7,7,7,1) 100%,rgba(19,19,19,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  rgba(45,45,45,1) 0%,rgba(7,7,7,1) 100%,rgba(19,19,19,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2d2d2d', endColorstr='#131313',GradientType=0 ); /* IE6-9 */
}

.dashfolio-content-dashbar {
 width:80%;
    margin:0 auto;
    

}

.dashfolio-content-dashbar.sticky {
 position: fixed;
 top:0; 
 left:10%;
 z-index:999999999;

}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
   <li> hi </li>
   <li> hi </li>
   <li> hi </li>
   <li> hi </li>
   <li> hi </li>
   <li> hi </li>
   <li> hi </li>
   <li> hi </li>
   <li> hi </li>
</ul>
<div id="dashfolio-main-row" class="text-center">

   <div class="dashfolio-content-dashbar"> </div>

</div>
<div class="col-md-12">
   <ul>
      <li> hi </li>
      <li> hi </li>
      <li> hi </li>
      <li> hi </li>
      <li> hi </li>
      <li> hi </li>
      <li> hi </li>
      <li> hi hihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihihi </li>
      <li> hi </li>
      <li> hi </li>
      <li> hi </li>
      <li> hi </li>
      <li> hi </li>
      <li> hi </li>
      <li> hi </li>
      <li> hi </li>
      <li> hi </li>
      <li> hi </li>
      <li> hi </li>
   </ul>
</div>

Comments