Javascript 如何获取元素的高度，然后通过css应用该值

我试图获得我的导航高度，并将其应用于页边空白顶部，以便我可以偏移我的横幅。我的导航是固定的，所以我试图弥补这一点，这样我的旗帜就不会隐藏在下面

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

。我应该添加这一点，这可能就是为什么，我有另一个功能，可以在添加

.scroll

时更改

.x-navbar

的高度

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

---

因此，我不知道如何使这一切顺利和正常工作。如果我重新加载页面，

.x-main

将返回到

245px

。当我向后滚动到顶部时，它的计算不正确。

您的代码工作正常。可能您想使用

$.outerHeight（）

取而代之的是，您的选择器错误，或者您遇到了问题

值得注意的是，

$.height（）

返回一个整数值，因此在

$.css（）

行中，您应该将

bannerTop

更改为

bannerTop+'px'

，以便css有一个单位，而不仅仅是一个数字。。。但在这里，jQuery似乎是自动为我实现了这一点。你可以试试看

var bannerTop=$（'.x-navbar'）.height（）；
$（#banner carousel'）.css（'margin-top'，bannerTop'）

x-navbar
x-navbar
x-navbar
x-navbar
x-navbar
x-navbar
x-navbar

横幅旋转木马
您的代码工作正常。可能您想使用
$.outerHeight（）
取而代之的是，您的选择器错误，或者您遇到了问题

值得注意的是，
$.height（）
返回一个整数值，因此在
$.css（）
行中，您应该将
bannerTop
更改为
bannerTop+'px'
，以便css有一个单位，而不仅仅是一个数字。。。但在这里，jQuery似乎是自动为我实现了这一点。你可以试试看


var bannerTop=$（'.x-navbar'）.height（）；
$（#banner carousel'）.css（'margin-top'，bannerTop'）

x-navbar
x-navbar
x-navbar
x-navbar
x-navbar
x-navbar
x-navbar

横幅旋转木马
我尝试了户外灯光，但也没用。我的选择器也是正确的。什么是“px”解决方案？“我已经刷新并丢失了答案。@DarrenBachan如果你给我们一个你的问题的工作示例，我们可以提供帮助，而不仅仅是猜测。”。“px”解决方案是说
$.height（）
返回一个整数值，因此在
$.css（）
行中，您应该将
bannerTop
更改为
bannerTop+'px'
，以便css有一个单位，而不仅仅是一个数字。。。但在这里，jQuery似乎是自动为我实现了这一点。你可以试试看。是的，我没听清楚，但是当迈克发布它的时候，他认为在px方面是对的——这会有助于看到更多的代码。我不需要“px”“。我的原始代码是正确的，我把它包装在一个函数中，但我没有在任何地方调用该函数，所以我把它切换到一个doc ready，它就工作了。@DarrenBachan真棒。”。在将来，请包括一个。。。在这种情况下，你可能会回答你自己的问题。我尝试了outerHeight，但也没用。我的选择器也是正确的。什么是“px”解决方案？“我已经刷新并丢失了答案。@DarrenBachan如果你给我们一个你的问题的工作示例，我们可以提供帮助，而不仅仅是猜测。”。“px”解决方案是说
$.height（）
返回一个整数值，因此在
$.css（）
行中，您应该将
bannerTop
更改为
bannerTop+'px'
，以便css有一个单位，而不仅仅是一个数字。。。但在这里，jQuery似乎是自动为我实现了这一点。你可以试试看。是的，我没听清楚，但是当迈克发布它的时候，他认为在px方面是对的——这会有助于看到更多的代码。我不需要“px”“。我的原始代码是正确的，我把它包装在一个函数中，但我没有在任何地方调用该函数，所以我把它切换到一个doc ready，它就工作了。@DarrenBachan真棒。”。在将来，请包括一个。。。当你在做这些的时候，在这种情况下，你可能会回答你自己的问题。