javascript - Jquery 添加 CSS 值不起作用

Question

我有一些代码在用户滚动到一定数量时向元素添加 CSS 类，以制作粘性菜单栏(滚动距离取决于屏幕分辨率，因此在 JQuery 中计算)-我想向此类 (.header_scroll) 添加一个 CSS 值，以便它将滚动时分配给该类的元素的高度更改为另一个动态高度元素 (#nav_wrap) 的高度

jQuery("document").ready(function($){

        //Find the height of the header
        var headHeight = $("#header_wrap");
        var headerHeight = headHeight.innerHeight();

        //Find the height of the nav bar
        var menuFindHeight = $("#nav_wrap");
        var menuHeight = menuFindHeight.innerHeight();

        //Add value to class
        $(".header_scroll").css({"height": menuHeight});

        //Add class on scroll
        var nav = $('#header_wrap');

        $(window).scroll(function () {
            if ($(this).scrollTop() > ( headerHeight - menuHeight )) {
                nav.addClass("header_scroll");
            } else {
                nav.removeClass("header_scroll");
            }
        });

    });`

添加类的代码工作正常，但是无论我尝试什么变体，都:

//Add value to class
        $(".header_scroll").css({"height": menuHeight});

Section 根本不会做任何事情。查看 chrome 中的检查元素，我希望看到

height: xxxpx;

出现在 .header_scroll 但它不是

Answer 1

$(".header_scroll").css({"height": 200});

这不会向您的 CSS 规则添加 height 属性。相反，它会将 style="height: 200px;" 添加到 .header_scroll HTML 元素。

所以你最终会得到一个像这样的 HTML 元素:

<div class="header_scroll" style="height: 200px;"></div>