Question

我有一个html页面，在页面和div下面的一些内容之间有一个div。当我滚过它时，我想将这个div修复到顶部。这是我的HTML，CSS和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>

我称之为中间栏的中间div位于具有bootstrap列属性的页面的中心。预期的行为是，当我在中间栏下方滚动时，它会粘在顶部，但它的水平位置不变。但是，在我的情况下，并且仅在firefox 中，当我滚过它时，midbar水平向右移动，同时粘在顶部，midbar下方的内容流过它而不是在它下面。请帮我解决这个问题。你可以在这里看到我的意思 - http://www.bootply.com/jOZjV5bFSV（在firefox中查看）

Answer 1

一些建议 - 因为当您将元素更改为某个位置时：固定类型 - 它会将其从DOM中删除 - 从而导致您的布局问题。因此，在父div上应用文本中心类以及一些CSS样式更改它现在正在做正确的事情。尝试更改以下部分：

//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;
}

请注意，我将宽度指定为80％，然后指定粘性等级 - 将左侧设置为10％以允许居中。

$(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>

Answer 2

所以您遇到的问题是因为您要从行类div中删除col-md-10 div。

您将在此处看到我现在将粘性添加到行中，然后使用另一个div元素来跟踪页面偏移量以便何时添加粘性。

<强> JS：

$(document).ready( function() {

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

      else
        $('#dashfolio-main-row').removeClass('sticky');
      });
} );

粘贴位的CSS：

#dashfolio-main-row.sticky {
 position: fixed;
 top:0; 
 width: 100%;
}

（注意我也增加了100％的宽度，这是因为我们使用固定定位，所以div元素没有父容器来继承宽度，所以我们强制它为100％）

<强> HTML：

<div id="to-check-offset">
  <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>

firefox和chrome的工作代码示例：

http://www.bootply.com/jOZjV5bFSV#

Answer 3

增加z-index以使其前进。

https://developer.mozilla.org/en-US/docs/Web/CSS/z-index

当我看到它时似乎没有向右移动。

在滚动时将div修复到顶部 - Firefox

3 个答案: