向下滚动时更改样式（javascript）

我正在重建我的网页，使其更加优雅，所以我决定在用户向下滚动时修改顶部的栏，使其变小并隐藏其中的一些元素。我有一个功能，当你向下滚动时会触发，但出于某种原因，它什么也不做

我的HTML：

<div class="maindiv">
        <img src="media/cgaline.png" id="cgalinepic" class="cgalinepic"> 
        <a id="right-panel-link" href="#right-panel"><img src="media/menu.png" id="open_menu_button" width="50px" height="50px"></a>
        <h2 class="h1-3" id="h1-3">
            We are not in danger, we ARE the danger.
        </h2>
</div>

但也不管用

我最后的javascript代码（感谢Sagi和Ilya Sviridenko）：

---

您已经在使用jQuery。
继续使用jQuery API即可

div.css("height", "50px");
pic.css({ width : "400px", height : "50px" });
text.css("visibilty", "hidden"); // did you mean to hide the text completly? If so use text.hide();
menu.css("top", "0px");

---

只有在DOM就绪后，才能使用jQuery。像这样包装您的JS代码：

$(function(){
    ...
});

最终解决方案，使用Sagi代码：

$(function(){
    var div = $('#maindiv');
    var pic = $('#cgalinepic');
    var menu = $('#open_menu_button');
    var text = $('#h1-3');

    $(document).scroll(function() {
        div.css("height", "50px");
        pic.css({ width : "400px", height : "50px" });
        text.css("visibilty", "hidden");
        menu.css("top", "0px");
    });
});

---

您能为这个更改添加HTML吗：var div=$（'#maindiv'）；对于var div=$（“.maindiv”）；您没有id，只有类。类由点前缀“.maindiv”和哈希前缀“#maindiv”进行排序。好的，一切正常，除了div，它不会改变它的高度。PS：没关系，我修复了它，一切正常。

$(function(){
    ...
});

$(function(){
    var div = $('#maindiv');
    var pic = $('#cgalinepic');
    var menu = $('#open_menu_button');
    var text = $('#h1-3');

    $(document).scroll(function() {
        div.css("height", "50px");
        pic.css({ width : "400px", height : "50px" });
        text.css("visibilty", "hidden");
        menu.css("top", "0px");
    });
});