CODEWITHSUNDEEP
javascriptcss
Darren Bachan
Darren Bachan

Reputation: 743

how to get the height of an element and then apply that value through css

I am trying to get the height of my navigation and apply it to a margin-top so I can offset my banner. My navigation is fixed so I'm trying to compensate for that so my banner isn't hidden underneath.

// Offset Banner to Height of Navigation
    function bannerOffset() {

        var bannerTop = $('.x-navbar').height();    
        $('#banner-carousel').css('margin-top', bannerTop);

    }

This, I thought would do it, but it doesn't reflect anything at all in the front-end.

UPDATE

$(document).ready(function() {
        var bannerTop = $('.x-navbar').outerHeight();
        $('.x-main').css('margin-top', bannerTop);

        $(window).scroll(function() {
            var bannerTopScroll = $('.x-navbar.scroll').outerHeight();
            if ($(document).scrollTop() > 1) {
                $('.x-main').css('margin-top', bannerTopScroll);    
            }
        });
    });

So I thought I had this, but on load, the margin-top of .x-main is 245px. When I scroll it becomes 85px. I can see the numbers go down to that. The issue is when I scroll back up to the top the value doesn't go back to 245px. It's not very consistent, but I often get 144px. I should add that, and this is probably why, I have another function that changes the height of my .x-navbar when .scroll is added to it.

$(window).scroll(function() {
      if ($(document).scrollTop() > 1) {
        $('.x-navbar').addClass('scroll');
      } else {
        $('.x-navbar').removeClass('scroll');
      }
});

So I am not sure how to make this all smooth and working properly. If I reload the page the .x-mainis back to 245px. When I scroll back to the top it's not calculating properly.

Upvotes: 0

Views: 53

Answers (1)

Michael Coker
Michael Coker

Reputation: 53674

Your code works. Maybe you want to use $.outerHeight() instead, your selectors are wrong, or you're experiencing margin collapsing.

It's worth noting that $.height() returns an integer value, so in your $.css() line, you should change bannerTop to bannerTop + 'px' so that the CSS has a unit and not just a number... but it looks like jQuery is doing that automagically for me here. You might try it and see.

var bannerTop = $('.x-navbar').height();
$('#banner-carousel').css('margin-top', bannerTop);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="x-navbar">x-navbar<br>x-navbar<br>x-navbar<br>x-navbar<br>x-navbar<br>x-navbar<br>x-navbar<br>x-navbar<br></div>
<div id="banner-carousel">banner carousel</div>

Upvotes: 2

Related Questions