javascript - 固定位置的元素宽度 Bootstrap

Question

我有一个元素width=auto。当我添加position: fixed到该元素时，它会在视觉上改变其宽度。添加后如何保持元素的外观position: fixed？我想要一个位置“固定”的响应式和居中的元素。

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

Answer 1

您的问题出在您的first_topCSS 中。

http://jsfiddle.net/gespinha/nWHSH/6/

这应该可以解决您的问题，只需将您的 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

演示

定位后的居中元素

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'});
      }
    });