Question

我有width=auto的元素。当我将position: fixed添加到该元素时，它会直观地改变其宽度。添加position: fixed后如何保留元素的方面？我想要一个响应和居中的元素，位置'固定'。

这是问题的一个示例（课程first和first_top）：http://jsfiddle.net/nWHSH/

Answer 1

您的问题出在first_top CSS。

这可以解决您的问题，只需将您的CSS更改为：

.first_top {
    position: fixed;
    top: 0;
    background: #FFF;
    z-index: 2;
    left: 0;
    right: 0;
    max-width: 720px;
    margin: 0 auto;
}

问题在于固定定位。 固定和绝对定位元素与实际文档流分离，因此它们往往不会自然地与其他元素做出反应，它们会自动与文档进行交互。

因此，为了在流程中强制执行顺序，您必须引导该sam元素并使其遵循不是主流的流程，但是类似，让用户知道它实际上是被操作的与DOM中其他对象的交互。

Answer 2

demo

定位后的定心元素

var elem = $('.first');
    var firstTop = elem.offset().top, firstH = elem.height();
    $(window).scroll(function(){
      if( $(window).scrollTop() > firstTop ) {
        elem.removeClass('first_top').addClass('first_top');
        $('.sticker').css({display: 'block', height: firstH});
          $(".first_top").css("left", ($(window).width()- $(".first_top").width())/2);
      } else {
        $('.first').removeClass('first_top');
        $('.sticker').css({display: 'none', height: '0'});
      }
    });

固定位置Bootstrap的元素宽度

2 个答案: