Question

我们希望将divs在运行时动态固定在顶部。现在固定顶部一直在工作。但我的问题是2个不同的div在一个接一个地出现相同的位置。所以我们无法看到其他div，所以我们想这样做我们在JSFiddle中尝试一些事情请检查以下代码并请帮助解决这个问题。

var fixmeTop = $('.fixme').offset().top;
        $(window).scroll(function() {
            var currentScroll = $(window).scrollTop();
            if (currentScroll >= fixmeTop) {
                $('.fixme').css({
                    position: 'fixed',
                    top: '0',
                    left: '0'
                });
            } else {
                $('.fixme').css({
                    position: 'static'
                });
            }
        });

JSFiddle example

Answer 1

＆＃13;

var counter = 0;
var height = 0;

$('.fixme').each(function() {
  if (counter > 0) {
    height = height + $(this).outerHeight();
    $(this).css({
      'top': height + 'px'
    });
  }
  counter++;
});

＆＃13;

body {
  height: 200vh;
}

.fixme {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #E4E4E4;
  border: 1px solid #000;
  text-align: center;
  padding: 2%;
  box-sizing: border-box;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="fixme">fixed item 1</div>
<div class="fixme">fixed item 2</div>
<div class="fixme">fixed item 3</div>

＆＃13;

Answer 2

你也可以这样做

＆＃13;

<p:column style="min-width: 100px;">
...
</p:column>

＆＃13;

        .main {
            position: fixed;
            top: 0px;
        }
        .fcard, .scard {
            border:1px solid #333;
            margin-bottom: 5px;
        }

＆＃13;

如何在页面顶部将多个div设置为“position：fixed和top：0”

2 个答案: