如何让位置固定div水平滚动？

我有一个固定的头有几列。我已经给横向滚动的div，但问题是固定的头div不与滚动移动。我想在顶部修复它并水平滚动，以便当窗口水平滚动时tesy6，test7也会显示。如何让位置固定div水平滚动？

$(document).ready(function() { 
 
    var lastScrollLeft = 0; 
 
    $(window).scroll(function() { 
 
     
 
     var x = $(window).scrollTop(); 
 
     if (x > 140) { 
 
      
 
      $('.headerp').css({ 
 
       position: "fixed", 
 
       zIndex: 999, 
 
       top: "180px", 
 
       left: "15px", 
 
       right: "15px" 
 
      }); 
 
     } else if (x < 140) { 
 
      $('.headerp').removeAttr("style"); 
 
     } 
 
    }); 
 
});

#row { 
 
    white-space: nowrap; 
 
    /* important */ 
 
    overflow: auto; 
 
} 
 
.items { 
 
    display: inline-block; 
 
    width: 20%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> 
 

 
<body> 
 
    <div id="row"> 
 
     <div class="headerp"> 
 
      <div class="items"> 
 
       Test1 
 
      </div> 
 
      <div class="items"> 
 
       Test2 
 
      </div> 
 
      <div class="items"> 
 
       Test3 
 
      </div> 
 
      <div class="items"> 
 
       Test4 
 
      </div> 
 
      <div class="items"> 
 
       Test5 
 
      </div> 
 
      <div class="items"> 
 
       Test6 
 
      </div> 
 
      <div class="items"> 
 
       Test7 
 
      </div> 
 
      <div class="items"> 
 
       Test8 
 
      </div> 
 
      <div class="items"> 
 
       Test9 
 
      </div> 
 
      <div class="items"> 
 
       Test10 
 
      </div> 
 
     </div> 
 
     <div class="headers"> 
 
      <div class="items"> 
 
       <img src="http://placehold.it/200/100" alt="item 1" /> 
 
      </div> 
 
      <div class="items"> 
 
       <img src="http://placehold.it/200/100" alt="item 2" /> 
 
      </div> 
 
      <div class="items"> 
 
       <img src="http://placehold.it/200/100" alt="item 3" /> 
 
      </div> 
 
      <div class="items"> 
 
       <img src="http://placehold.it/200/100" alt="item 4" /> 
 
      </div> 
 
      <div class="items"> 
 
       <img src="http://placehold.it/200/100" alt="item 5" /> 
 
      </div> 
 
      <div class="items"> 
 
       <img src="http://placehold.it/200/100" alt="item 6" /> 
 
      </div> 
 
      <div class="items"> 
 
       <img src="http://placehold.it/200/100" alt="item 7" /> 
 
      </div> 
 
      <div class="items"> 
 
       <img src="http://placehold.it/200/100" alt="item 8" /> 
 
      </div> 
 
      <div class="items"> 
 
       <img src="http://placehold.it/200/100" alt="item 9" /> 
 
      </div> 
 
      <div class="items"> 
 
       <img src="http://placehold.it/200/100" alt="item 10" /> 
 
      </div> 
 
     </div> 
 
     <div class="headers"> 
 
      <div class="items"> 
 
       <img src="http://placehold.it/200/100" alt="item 1" /> 
 
      </div> 
 
      <div class="items"> 
 
       <img src="http://placehold.it/200/100" alt="item 2" /> 
 
      </div> 
 
      <div class="items"> 
 
       <img src="http://placehold.it/200/100" alt="item 3" /> 
 
      </div> 
 
      <div class="items"> 
 
       <img src="http://placehold.it/200/100" alt="item 4" /> 
 
      </div> 
 
      <div class="items"> 
 
       <img src="http://placehold.it/200/100" alt="item 5" /> 
 
      </div> 
 
      <div class="items"> 
 
       <img src="http://placehold.it/200/100" alt="item 6" /> 
 
      </div> 
 
      <div class="items"> 
 
       <img src="http://placehold.it/200/100" alt="item 7" /> 
 
      </div> 
 
      <div class="items"> 
 
       <img src="http://placehold.it/200/100" alt="item 8" /> 
 
      </div> 
 
      <div class="items"> 
 
       <img src="http://placehold.it/200/100" alt="item 9" /> 
 
      </div> 
 
      <div class="items"> 
 
       <img src="http://placehold.it/200/100" alt="item 10" /> 
 
      </div> 
 
     </div> 
 
     <div class="headers"> 
 
      <div class="items"> 
 
       <img src="http://placehold.it/200/100" alt="item 1" /> 
 
      </div> 
 
      <div class="items"> 
 
       <img src="http://placehold.it/200/100" alt="item 2" /> 
 
      </div> 
 
      <div class="items"> 
 
       <img src="http://placehold.it/200/100" alt="item 3" /> 
 
      </div> 
 
      <div class="items"> 
 
       <img src="http://placehold.it/200/100" alt="item 4" /> 
 
      </div> 
 
      <div class="items"> 
 
       <img src="http://placehold.it/200/100" alt="item 5" /> 
 
      </div> 
 
      <div class="items"> 
 
       <img src="http://placehold.it/200/100" alt="item 6" /> 
 
      </div> 
 
      <div class="items"> 
 
       <img src="http://placehold.it/200/100" alt="item 7" /> 
 
      </div> 
 
      <div class="items"> 
 
       <img src="http://placehold.it/200/100" alt="item 8" /> 
 
      </div> 
 
      <div class="items"> 
 
       <img src="http://placehold.it/200/100" alt="item 9" /> 
 
      </div> 
 
      <div class="items"> 
 
       <img src="http://placehold.it/200/100" alt="item 10" /> 
 
      </div> 
 
     </div> 
 
     <div class="headers"> 
 
      <div class="items"> 
 
       <img src="http://placehold.it/200/100" alt="item 1" /> 
 
      </div> 
 
      <div class="items"> 
 
       <img src="http://placehold.it/200/100" alt="item 2" /> 
 
      </div> 
 
      <div class="items"> 
 
       <img src="http://placehold.it/200/100" alt="item 3" /> 
 
      </div> 
 
      <div class="items"> 
 
       <img src="http://placehold.it/200/100" alt="item 4" /> 
 
      </div> 
 
      <div class="items"> 
 
       <img src="http://placehold.it/200/100" alt="item 5" /> 
 
      </div> 
 
      <div class="items"> 
 
       <img src="http://placehold.it/200/100" alt="item 6" /> 
 
      </div> 
 
      <div class="items"> 
 
       <img src="http://placehold.it/200/100" alt="item 7" /> 
 
      </div> 
 
      <div class="items"> 
 
       <img src="http://placehold.it/200/100" alt="item 8" /> 
 
      </div> 
 
      <div class="items"> 
 
       <img src="http://placehold.it/200/100" alt="item 9" /> 
 
      </div> 
 
      <div class="items"> 
 
       <img src="http://placehold.it/200/100" alt="item 10" /> 
 
      </div> 
 
     </div> 
 
     <div class="headers"> 
 
      <div class="items"> 
 
       <img src="http://placehold.it/200/100" alt="item 1" /> 
 
      </div> 
 
      <div class="items"> 
 
       <img src="http://placehold.it/200/100" alt="item 2" /> 
 
      </div> 
 
      <div class="items"> 
 
       <img src="http://placehold.it/200/100" alt="item 3" /> 
 
      </div> 
 
      <div class="items"> 
 
       <img src="http://placehold.it/200/100" alt="item 4" /> 
 
      </div> 
 
      <div class="items"> 
 
       <img src="http://placehold.it/200/100" alt="item 5" /> 
 
      </div> 
 
      <div class="items"> 
 
       <img src="http://placehold.it/200/100" alt="item 6" /> 
 
      </div> 
 
      <div class="items"> 
 
       <img src="http://placehold.it/200/100" alt="item 7" /> 
 
      </div> 
 
      <div class="items"> 
 
       <img src="http://placehold.it/200/100" alt="item 8" /> 
 
      </div> 
 
      <div class="items"> 
 
       <img src="http://placehold.it/200/100" alt="item 9" /> 
 
      </div> 
 
      <div class="items"> 
 
       <img src="http://placehold.it/200/100" alt="item 10" /> 
 
      </div> 
 
     </div> 
 
     <div class="headers"> 
 
      <div class="items"> 
 
       <img src="http://placehold.it/200/100" alt="item 1" /> 
 
      </div> 
 
      <div class="items"> 
 
       <img src="http://placehold.it/200/100" alt="item 2" /> 
 
      </div> 
 
      <div class="items"> 
 
       <img src="http://placehold.it/200/100" alt="item 3" /> 
 
      </div> 
 
      <div class="items"> 
 
       <img src="http://placehold.it/200/100" alt="item 4" /> 
 
      </div> 
 
      <div class="items"> 
 
       <img src="http://placehold.it/200/100" alt="item 5" /> 
 
      </div> 
 
      <div class="items"> 
 
       <img src="http://placehold.it/200/100" alt="item 6" /> 
 
      </div> 
 
      <div class="items"> 
 
       <img src="http://placehold.it/200/100" alt="item 7" /> 
 
      </div> 
 
      <div class="items"> 
 
       <img src="http://placehold.it/200/100" alt="item 8" /> 
 
      </div> 
 
      <div class="items"> 
 
       <img src="http://placehold.it/200/100" alt="item 9" /> 
 
      </div> 
 
      <div class="items"> 
 
       <img src="http://placehold.it/200/100" alt="item 10" /> 
 
      </div> 
 
     </div> 
 
     <div class="headers"> 
 
      <div class="items"> 
 
       <img src="http://placehold.it/200/100" alt="item 1" /> 
 
      </div> 
 
      <div class="items"> 
 
       <img src="http://placehold.it/200/100" alt="item 2" /> 
 
      </div> 
 
      <div class="items"> 
 
       <img src="http://placehold.it/200/100" alt="item 3" /> 
 
      </div> 
 
      <div class="items"> 
 
       <img src="http://placehold.it/200/100" alt="item 4" /> 
 
      </div> 
 
      <div class="items"> 
 
       <img src="http://placehold.it/200/100" alt="item 5" /> 
 
      </div> 
 
      <div class="items"> 
 
       <img src="http://placehold.it/200/100" alt="item 6" /> 
 
      </div> 
 
      <div class="items"> 
 
       <img src="http://placehold.it/200/100" alt="item 7" /> 
 
      </div> 
 
      <div class="items"> 
 
       <img src="http://placehold.it/200/100" alt="item 8" /> 
 
      </div> 
 
      <div class="items"> 
 
       <img src="http://placehold.it/200/100" alt="item 9" /> 
 
      </div> 
 
      <div class="items"> 
 
       <img src="http://placehold.it/200/100" alt="item 10" /> 
 
      </div> 
 
     </div> 
 
     <div class="headers"> 
 
      <div class="items"> 
 
       <img src="http://placehold.it/200/100" alt="item 1" /> 
 
      </div> 
 
      <div class="items"> 
 
       <img src="http://placehold.it/200/100" alt="item 2" /> 
 
      </div> 
 
      <div class="items"> 
 
       <img src="http://placehold.it/200/100" alt="item 3" /> 
 
      </div> 
 
      <div class="items"> 
 
       <img src="http://placehold.it/200/100" alt="item 4" /> 
 
      </div> 
 
      <div class="items"> 
 
       <img src="http://placehold.it/200/100" alt="item 5" /> 
 
      </div> 
 
      <div class="items"> 
 
       <img src="http://placehold.it/200/100" alt="item 6" /> 
 
      </div> 
 
      <div class="items"> 
 
       <img src="http://placehold.it/200/100" alt="item 7" /> 
 
      </div> 
 
      <div class="items"> 
 
       <img src="http://placehold.it/200/100" alt="item 8" /> 
 
      </div> 
 
      <div class="items"> 
 
       <img src="http://placehold.it/200/100" alt="item 9" /> 
 
      </div> 
 
      <div class="items"> 
 
       <img src="http://placehold.it/200/100" alt="item 10" /> 
 
      </div> 
 
     </div> 
 
     <div class="headers"> 
 
      <div class="items"> 
 
       <img src="http://placehold.it/200/100" alt="item 1" /> 
 
      </div> 
 
      <div class="items"> 
 
       <img src="http://placehold.it/200/100" alt="item 2" /> 
 
      </div> 
 
      <div class="items"> 
 
       <img src="http://placehold.it/200/100" alt="item 3" /> 
 
      </div> 
 
      <div class="items"> 
 
       <img src="http://placehold.it/200/100" alt="item 4" /> 
 
      </div> 
 
      <div class="items"> 
 
       <img src="http://placehold.it/200/100" alt="item 5" /> 
 
      </div> 
 
      <div class="items"> 
 
       <img src="http://placehold.it/200/100" alt="item 6" /> 
 
      </div> 
 
      <div class="items"> 
 
       <img src="http://placehold.it/200/100" alt="item 7" /> 
 
      </div> 
 
      <div class="items"> 
 
       <img src="http://placehold.it/200/100" alt="item 8" /> 
 
      </div> 
 
      <div class="items"> 
 
       <img src="http://placehold.it/200/100" alt="item 9" /> 
 
      </div> 
 
      <div class="items"> 
 
       <img src="http://placehold.it/200/100" alt="item 10" /> 
 
      </div> 
 
     </div> 
 
     <div class="headers"> 
 
      <div class="items"> 
 
       <img src="http://placehold.it/200/100" alt="item 1" /> 
 
      </div> 
 
      <div class="items"> 
 
       <img src="http://placehold.it/200/100" alt="item 2" /> 
 
      </div> 
 
      <div class="items"> 
 
       <img src="http://placehold.it/200/100" alt="item 3" /> 
 
      </div> 
 
      <div class="items"> 
 
       <img src="http://placehold.it/200/100" alt="item 4" /> 
 
      </div> 
 
      <div class="items"> 
 
       <img src="http://placehold.it/200/100" alt="item 5" /> 
 
      </div> 
 
      <div class="items"> 
 
       <img src="http://placehold.it/200/100" alt="item 6" /> 
 
      </div> 
 
      <div class="items"> 
 
       <img src="http://placehold.it/200/100" alt="item 7" /> 
 
      </div> 
 
      <div class="items"> 
 
       <img src="http://placehold.it/200/100" alt="item 8" /> 
 
      </div> 
 
      <div class="items"> 
 
       <img src="http://placehold.it/200/100" alt="item 9" /> 
 
      </div> 
 
      <div class="items"> 
 
       <img src="http://placehold.it/200/100" alt="item 10" /> 
 
      </div> 
 
     </div> 
 
     <div class="headers"> 
 
      <div class="items"> 
 
       <img src="http://placehold.it/200/100" alt="item 1" /> 
 
      </div> 
 
      <div class="items"> 
 
       <img src="http://placehold.it/200/100" alt="item 2" /> 
 
      </div> 
 
      <div class="items"> 
 
       <img src="http://placehold.it/200/100" alt="item 3" /> 
 
      </div> 
 
      <div class="items"> 
 
       <img src="http://placehold.it/200/100" alt="item 4" /> 
 
      </div> 
 
      <div class="items"> 
 
       <img src="http://placehold.it/200/100" alt="item 5" /> 
 
      </div> 
 
      <div class="items"> 
 
       <img src="http://placehold.it/200/100" alt="item 6" /> 
 
      </div> 
 
      <div class="items"> 
 
       <img src="http://placehold.it/200/100" alt="item 7" /> 
 
      </div> 
 
      <div class="items"> 
 
       <img src="http://placehold.it/200/100" alt="item 8" /> 
 
      </div> 
 
      <div class="items"> 
 
       <img src="http://placehold.it/200/100" alt="item 9" /> 
 
      </div> 
 
      <div class="items"> 
 
       <img src="http://placehold.it/200/100" alt="item 10" /> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</body>

任何帮助将大大赞赏。

来源

2015-11-23 user5064303

你不能只有一种方式实际定位fixed。

您可以使用它的动态滚动的同样的想法，但只适用于顶部，给出头一个relative定位，并保持水平滚动窗口

CSS

.headerp { 
    background: #fff; 
    position:relative; 
    z-index:999; 
} 
.headerp:after { 
    content: " "; 
    height: 100%; 
    width: 100%; 
    background: #fff; 
    display: block; 
    position: absolute; 
    top: 0px; 
    right: -100%; 
    z-index: -1; 
}

JS假

$(window).scroll(function() { 
     var x = $(window).scrollTop(); 
     $('.headerp').css({ 
      top: x, 
     }); 
    });

fiddle

~~P.S.滚动~~

编辑

时，使用我的背景是在一个地方伪after元素仍然有背景有问题，见上面更新CSS &小提琴。

来源

2015-11-23 10:35:22 JNF

非常感谢:) – user5064303

尝试使用此解决方案。

jQuery的

$(function() { 
    var header = $(".headerp"); 
    $(window).scroll(function() { 
     var scroll = $(window).scrollTop(); 

     if (scroll >= 500) { 
      header.removeClass('headerp').addClass("small-header"); 
     } else { 
      header.removeClass("small-header").addClass('headerp'); 
     } 
    }); 
});

CSS

.headerp { 
    position: fixed; 
    background: #fff; 
    width: 100%; 
    padding: 20px; 
    transition: all 0.3s 
} 
.small-header { 
    padding: 10px; 
    position: fixed; 
    width: 100%; 
    background: yellow; 
    transition: all 0.3s; 
}

Demo here

来源

2015-11-23 10:27:24 Booster

否固定标题不与窗口水平滚动。 – user5064303

这不是横向滚动 – JNF

删除

position: "fixed"

从你js代码并尝试。

谢谢。

来源

2015-11-23 10:27:33

我想要修复标题。 – user5064303

你有没有试过？您的标题将固定在顶部。内容只在滚动时移动。由于位置：“固定”，标题不会随着窗口滚动。 –

如何让位置固定div水平滚动？

回答

相关问题