Question

我有一个包含4个部分的布局，每个部分包含一个屏幕，一个屏幕占据屏幕的一半。在第一部分的左侧开始，然后在第二部分向左移动，每个部分交替。我为下一个每个人制作了第一部分html的副本。我使用flex属性“order”来改变aside / main容器的位置。所有应用的css均在各部分之间均匀应用，因此没有理由任何部分应该有所不同。但是当我使用Jquery的height（）方法时，第一个主电源高度返回1252（px），而接下来的三个返回1216.第一个部分可能比后面的3更高？

笔：https://codepen.io/marti2221/pen/QgXoMr

// two functions, one changes to fixed 


var windw = this;


$.fn.startFixed = function ( pos ) {
    var $this = this,
        $window = $(windw);
    
    $window.scroll(function(e){
        if ($window.scrollTop() > pos) {
            $this.css({
                position: 'fixed',
                top: pos
            });
        } else {
            $this.css({
                position: 'absolute',
                top: pos + 200
            });
        }
    });
};



// this one changes to absolute

$.fn.followTo = function ( pos ) {
    var $this = this,
        $window = $(windw);
    
    $window.scroll(function(e){
        if ($window.scrollTop() > pos) {
            $this.css({
                position: 'absolute',
                top: pos
            });
        } else {
            $this.css({
                position: 'fixed',
                top: 0
            });
        }
    });
};


// some values to start and stop points

var asideHeight = $(".aside").height();
var stopPoint = asideHeight - 303; 

var viewPortHeight = $(window).height();



$('.container-text').followTo(stopPoint);


 

// trying to put jquery objects in variables but coming back undefined in console


var firstPos = $(".container-text").position();
var firstPosAt = $(".container-text").css('position');

var secondPos = $("#section2").position();
var secondPosAt = $("#section2").css("position");

var thirdPos = $("#section3").position();
var thirdPosAt = $("#section3").css("position");

var lastPos = $("#lastFixed").position();
var lastPosAt = $("#lastFixed").css('position');

var secHeight = $("#main2").height();
var secHeight1 = $(".main").height();


//first section height = 1252
console.log(secHeight1); 

// second and following 2 = 1216... why?
console.log(secHeight); 



console.log(firstPos);
console.log(firstPosAt);
console.log(secondPos); 
console.log(secondPosAt); 
console.log(thirdPos); 
console.log(thirdPosAt); 
console.log(lastPos); 
console.log(lastPosAt);

* {
  box-sizing:border-box;
  margin: 0;
}

section {
  width: 100%;  
  margin: auto;
  display: flex;
  background: gray;
}

section:nth-child(even) main {
  order: -1;
}

aside,main {
  flex: 1 0 50%;
}

aside{
  flex: 0 0 50%;
    justify-content: center;
  background: #eee;
}

main {
  position: relative;
  color: white;
}

aside {
  padding: .5em;
}


.container-content{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

article {
  width: 75%;
  margin: 75px;
}

.container-text{
    position: fixed;
}

#section2{
  position: absolute;
 
}
#section3{
  position: absolute;
}
#lastFixed{
  position: absolute;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section>
      <aside class="aside">
        <div class="container-text">
          <header class="hello">Hello</header>
          <div class="container-nav">
            <p class="how">How</p>
            <p class="are">are</p>
            <p class="you">you</p>
          </div>
        </div>
      </aside>
      <main class="main">
          <div class="container-content">
          <h1>First heading</h1>
          <article>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pharetra enim sagittis velit iaculis, a consectetur nisi sagittis. Etiam sagittis enim sapien, in ultricies nibh maximus quis. Nulla facilisi. Ut mattis gravida semper. Nam nec lacinia nulla. Proin euismod dolor lacus, id sagittis sem viverra accumsan. Curabitur eros est, vehicula vel nibh eget, gravida porttitor turpis. Vivamus a sollicitudin nisl.
          </article>
          <h1>Second heading</h1>
          <article>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pharetra enim sagittis velit iaculis, a consectetur nisi sagittis. Etiam sagittis enim sapien, in ultricies nibh maximus quis. Nulla facilisi. Ut mattis gravida semper. Nam nec lacinia nulla. Proin euismod dolor lacus, id sagittis sem viverra accumsan. Curabitur eros est, vehicula vel nibh eget, gravida porttitor turpis. Vivamus a sollicitudin nisl. Etiam sagittis enim sapien, in Nulla facilisi. Etiam sagittis enim sapien, in ultricies nibh maximus quis. Nulla facilisi.
          </article>
          <h1>Third heading</h1>
          <article>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pharetra enim sagittis velit iaculis, a consectetur nisi sagittis. Etiam sagittis enim sapien, in ultricies nibh maximus quis. Nulla facilisi. Ut mattis gravida semper. Nam nec lacinia nulla. Proin euismod dolor lacus, id sagittis sem viverra accumsan. Curabitur eros est, vehicula vel nibh eget, gravida porttitor turpis. Vivamus a sollicitudin nisl.
          </article>
          <h1>Fourth heading</h1>
          <article>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pharetra enim sagittis velit iaculis, a consectetur nisi sagittis. Etiam sagittis enim sapien, in ultricies nibh maximus quis. Nulla facilisi. Ut mattis gravida semper. Nam nec lacinia nulla. Proin euismod dolor lacus, id sagittis sem viverra accumsan. Curabitur eros est, vehicula vel nibh eget, gravida porttitor turpis. Vivamus a sollicitudin nisl.
          </article>
        </div>
        </main>
    </section>
    <section>
      <aside id="aside2">
        <div id="section2">
          <p class="hello">Hello</p>
          <div class="container-nav">
            <p class="how">How</p>
            <p class="are">are</p>
            <p class="you">you</p>
          </div>
        </div>
      </aside>
      <main id="main2">
          <div class="container-content">
          <h1>First heading</h1>
          <article>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pharetra enim sagittis velit iaculis, a consectetur nisi sagittis. Etiam sagittis enim sapien, in ultricies nibh maximus quis. Nulla facilisi. Ut mattis gravida semper. Nam nec lacinia nulla. Proin euismod dolor lacus, id sagittis sem viverra accumsan. Curabitur eros est, vehicula vel nibh eget, gravida porttitor turpis. Vivamus a sollicitudin nisl.
          </article>
          <h1>Second heading</h1>
          <article>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pharetra enim sagittis velit iaculis, a consectetur nisi sagittis. Etiam sagittis enim sapien, in ultricies nibh maximus quis. Nulla facilisi. Ut mattis gravida semper. Nam nec lacinia nulla. Proin euismod dolor lacus, id sagittis sem viverra accumsan. Curabitur eros est, vehicula vel nibh eget, gravida porttitor turpis. Vivamus a sollicitudin nisl.
          </article>
          <h1>Third heading</h1>
          <article>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pharetra enim sagittis velit iaculis, a consectetur nisi sagittis. Etiam sagittis enim sapien, in ultricies nibh maximus quis. Nulla facilisi. Ut mattis gravida semper. Nam nec lacinia nulla. Proin euismod dolor lacus, id sagittis sem viverra accumsan. Curabitur eros est, vehicula vel nibh eget, gravida porttitor turpis. Vivamus a sollicitudin nisl.
          </article>
          <h1>Fourth heading</h1>
          <article>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pharetra enim sagittis velit iaculis, a consectetur nisi sagittis. Etiam sagittis enim sapien, in ultricies nibh maximus quis. Nulla facilisi. Ut mattis gravida semper. Nam nec lacinia nulla. Proin euismod dolor lacus, id sagittis sem viverra accumsan. Curabitur eros est, vehicula vel nibh eget, gravida porttitor turpis. Vivamus a sollicitudin nisl.
          </article>
        </div>
        </main>
    </section>
    <section>
      <aside class="aside">
        <div id="section3">
          <p class="hello">Hello</p>
          <div class="container-nav">
            <p class="how">How</p>
            <p class="are">are</p>
            <p class="you">you</p>
          </div>
        </div>
      </aside>
      <main>
          <div class="container-content">
          <h1>First heading</h1>
          <article>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pharetra enim sagittis velit iaculis, a consectetur nisi sagittis. Etiam sagittis enim sapien, in ultricies nibh maximus quis. Nulla facilisi. Ut mattis gravida semper. Nam nec lacinia nulla. Proin euismod dolor lacus, id sagittis sem viverra accumsan. Curabitur eros est, vehicula vel nibh eget, gravida porttitor turpis. Vivamus a sollicitudin nisl.
          </article>
          <h1>Second heading</h1>
          <article>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pharetra enim sagittis velit iaculis, a consectetur nisi sagittis. Etiam sagittis enim sapien, in ultricies nibh maximus quis. Nulla facilisi. Ut mattis gravida semper. Nam nec lacinia nulla. Proin euismod dolor lacus, id sagittis sem viverra accumsan. Curabitur eros est, vehicula vel nibh eget, gravida porttitor turpis. Vivamus a sollicitudin nisl.
          </article>
          <h1>Third heading</h1>
          <article>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pharetra enim sagittis velit iaculis, a consectetur nisi sagittis. Etiam sagittis enim sapien, in ultricies nibh maximus quis. Nulla facilisi. Ut mattis gravida semper. Nam nec lacinia nulla. Proin euismod dolor lacus, id sagittis sem viverra accumsan. Curabitur eros est, vehicula vel nibh eget, gravida porttitor turpis. Vivamus a sollicitudin nisl.
          </article>
          <h1>Fourth heading</h1>
          <article>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pharetra enim sagittis velit iaculis, a consectetur nisi sagittis. Etiam sagittis enim sapien, in ultricies nibh maximus quis. Nulla facilisi. Ut mattis gravida semper. Nam nec lacinia nulla. Proin euismod dolor lacus, id sagittis sem viverra accumsan. Curabitur eros est, vehicula vel nibh eget, gravida porttitor turpis. Vivamus a sollicitudin nisl.
          </article>
        </div>
        </main>
    </section>
    <section>
      <aside class="aside">
        <div id="lastFixed">
          <p class="hello">Hello</p>
          <div class="container-nav">
            <p class="how">How</p>
            <p class="are">are</p>
            <p class="you">you</p>
          </div>
        </div>
      </aside>
      <main>
          <div class="container-content">
          <h1>First Heading</h1>
          <article>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pharetra enim sagittis velit iaculis, a consectetur nisi sagittis. Etiam sagittis enim sapien, in ultricies nibh maximus quis. Nulla facilisi. Ut mattis gravida semper. Nam nec lacinia nulla. Proin euismod dolor lacus, id sagittis sem viverra accumsan. Curabitur eros est, vehicula vel nibh eget, gravida porttitor turpis. Vivamus a sollicitudin nisl.
          </article>
          <h1>Second heading</h1>
          <article>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pharetra enim sagittis velit iaculis, a consectetur nisi sagittis. Etiam sagittis enim sapien, in ultricies nibh maximus quis. Nulla facilisi. Ut mattis gravida semper. Nam nec lacinia nulla. Proin euismod dolor lacus, id sagittis sem viverra accumsan. Curabitur eros est, vehicula vel nibh eget, gravida porttitor turpis. Vivamus a sollicitudin nisl.
          </article>
          <h1>Third heading</h1>
          <article>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pharetra enim sagittis velit iaculis, a consectetur nisi sagittis. Etiam sagittis enim sapien, in ultricies nibh maximus quis. Nulla facilisi. Ut mattis gravida semper. Nam nec lacinia nulla. Proin euismod dolor lacus, id sagittis sem viverra accumsan. Curabitur eros est, vehicula vel nibh eget, gravida porttitor turpis. Vivamus a sollicitudin nisl.
          </article>
          <h1>Fourth heading</h1>
          <article>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pharetra enim sagittis velit iaculis, a consectetur nisi sagittis. Etiam sagittis enim sapien, in ultricies nibh maximus quis. Nulla facilisi. Ut mattis gravida semper. Nam nec lacinia nulla. Proin euismod dolor lacus, id sagittis sem viverra accumsan. Curabitur eros est, vehicula vel nibh eget, gravida porttitor turpis. Vivamus a sollicitudin nisl.
          </article>
        </div>
        </main>
    </section>

Answer 1

差异是因为您在第一个<article>的“第二个标题”下的.container-content中有一行额外的文字。

第一个.container-content中的文章是：

<article>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pharetra enim sagittis velit iaculis, a consectetur nisi sagittis. Etiam sagittis enim sapien, in ultricies nibh maximus quis. Nulla facilisi. Ut mattis gravida semper. Nam nec lacinia nulla. Proin euismod dolor lacus, id sagittis sem viverra accumsan. Curabitur eros est, vehicula vel nibh eget, gravida porttitor turpis. Vivamus a sollicitudin nisl. Etiam sagittis enim sapien, in Nulla facilisi. Etiam sagittis enim sapien, in ultricies nibh maximus quis. Nulla facilisi.
</article>

最后有Etiam sagittis enim sapien, in Nulla facilisi. Etiam sagittis enim sapien, in ultricies nibh maximus quis. Nulla facilisi.的附加内容。

所有其他article元素仅包含：

<article>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pharetra enim sagittis velit iaculis, a consectetur nisi sagittis. Etiam sagittis enim sapien, in ultricies nibh maximus quis. Nulla facilisi. Ut mattis gravida semper. Nam nec lacinia nulla. Proin euismod dolor lacus, id sagittis sem viverra accumsan. Curabitur eros est, vehicula vel nibh eget, gravida porttitor turpis. Vivamus a sollicitudin nisl.
</article>

为什么相同的部分高度不同？

1 个答案: