Question

<div class="top-head>some content</div>
<div class="b_head">this div will stay at top as user scrolls</div>

.b_head {
height: auto;
 z-index: 12;
position: relative;
display: block;}

<script type='text/javascript'>
$(document).load(function() {
 $window = $(window),
 $sidebar = $(".b_head "),
 sidebarTop = $sidebar.position().top,
 $sidebar.addClass('fixed');

 $window.scroll(function(event) {
  scrollTop = $window.scrollTop(),
  topPosition = Math.max(0, sidebarTop - scrollTop),
  $sidebar.css('top', topPosition);
 });
 });
  </script>

上面是我的代码试图让.b_head div在用户滚动页面时浮动在顶部（类似于9gag.com浮动标题），但它不起作用，任何人都可以帮助我。

如果我改变“位置：固定;”对于b_head，那么它和页面顶部之间会有空格，因为它上面还有另一个div。

Answer 1

你需要拥有position:fixed; top:0;left:0;

Answer 2

.b_head {
    height: auto;
    position: fixed;
    z-index:15;
}

固定浮动div滚动

2 个答案: