Question

我正在尝试获取导航的高度并将其应用到margin-top以便我可以抵消我的横幅。我的导航是固定的，所以我试图弥补这一点，所以我的横幅没有隐藏在下面。

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

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

    }

这个，我以为会这样做，但它并没有反映出前端的任何内容。

更新

$(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);    
            }
        });
    });

所以我认为我有这个，但在加载时，.x-main的边距顶部是245px。当我滚动它时变为85px。我可以看到这些数字。问题是，当我向上滚动到顶部时，值不会返回到245px。它不是很一致，但我经常得到144px。我应该补充一点，这可能就是为什么，我有另一个函数可以在.x-navbar添加到.scroll时更改$(window).scroll(function() { if ($(document).scrollTop() > 1) { $('.x-navbar').addClass('scroll'); } else { $('.x-navbar').removeClass('scroll'); } });的高度。

.x-main

所以我不确定如何使这一切顺利并且正常工作。如果我重新加载页面，则245px将返回jdbc:mysql://ipAddress:3306/tableName。当我滚动到顶部时，它无法正确计算。

Answer 1

您的代码有效。也许您想要使用$.outerHeight()代替，您的选择器错误，或者您正在体验margin collapsing。

值得注意的是$.height()会返回一个整数值，所以在$.css()行中，您应该将bannerTop更改为bannerTop + 'px'，以便CSS具有一个单位，而不仅仅是一个数字...但看起来jQuery在这里为我自动完成。你可以尝试看看。

＆＃13;

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

＆＃13;

<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>

＆＃13;

如何获取元素的高度，然后通过css

1 个答案: