My layout consists of 4 sections, each with an aside and main taking up half the screen. The first section's aside starts on the left, then moves to the right for the second, alternating each section. I have copied the HTML of the first section for the rest. By using flex property "order" to switch the positions of aside/main containers, all CSS is being uniformly applied across the sections. However, when I utilize jQuery's height() method, the height of the first main section measures at 1252px while the next three are 1216px. What could be causing the initial section to be taller than the subsequent ones?
Pen: https://codepen.io/marti2221/pen/QgXoMr
// JavaScript functions for changing position properties
// 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 function 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
});
}
});
};
// Setting values for start/stop points
var asideHeight = $(".aside").height();
var stopPoint = asideHeight - 303;
var viewPortHeight = $(window).height();
$('.container-text').followTo(stopPoint);
// Variables returning 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();
// Outputting heights of main sections
console.log(secHeight1); //first section height = 1252
console.log(secHeight); // second and following 2 = 1216... why?
console.log(firstPos);
console.log(firstPosAt);
console.log(secondPos);
console.log(secondPosAt);
console.log(thirdPos);
console.log(thirdPosAt);
console.log(lastPos);
console.log(lastPosAt);