Updating the height dynamically, instead of manually finding it.

Question

I don't understand where I'm going wrong here or why my syntax isn't being accepted (although nothing appears to go wrong).

let $headerIndex = $(".header")
let indexHeight = '';
$headerIndex.sticky();

I declared the above variable indexHeight to receive the height of the .header height. The value starts off at zero as the the Sticky function hasn't been loaded yet so I assigned the value on 'stick-start' below

$('.header').on('sticky-start', function() {
  $('.description').html('We build <strong>great</strong> apps');
  indexHeight = $('.header').height();
});

when I call the 'indexHeight' in the console window it returns the correct value. but it doesn't reflect in the code below?

$(".grid-full h5").sticky({
  topSpacing: indexHeight,
});

There's a good chance I'm being completely dumb here, and I think it must have something to do with the code being loaded into memory before I can assign the value, but if the sticky-start runs surely it should update the value of the code?

Answer 1 · 2017-07-17T20:05:33Z

July 17, 2017 8:05pm

Things may not be happening in the expected order.

The value may be correct when you ask for it in the console because the "sticky-start" event has already occurred. But it might not have happened before your other code called the sticky method. You might want to call that method inside the the same handler that sets the value of indexHeight to guarantee things happen in the right order.

Also, you say "The value starts off at zero" but your code sets it to an empty string. That may not be an issue here, but you should be aware that an empty string is not the same thing as zero.

Welcome to the Treehouse Community

Looking to learn something new?

Devon Stanton

Devon Stanton

Updating the height dynamically, instead of manually finding it.

1 Answer

Steven Parker

Steven Parker

Things may not be happening in the expected order.