Question

我正在重建我的网页，让它更优雅所以我决定在用户向下滚动时修改顶部栏，将其缩小并隐藏它所具有的一些元素。我有一个在向下滚动时触发的功能，但由于某种原因它什么也没做。

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

我不知道出了什么问题，因为我把大部分时间花在了php上，而且我发现javascript有点困难。

我也试过这样做：

$('#maindiv').style.height = "50px";

但两种情况都不起作用。

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

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

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

    $(document).scroll(function() {
        var lastScrollTop = 0;
        $(window).scroll(function(event){
        var st = $(this).scrollTop();
        if (st > lastScrollTop){
            div.css("height", "50px");
            pic.css({ width : "400px", height : "50px" });
            text.hide();
            menu.css("top", "0px");
        } else {
            div.css("height", "140px");
            pic.css({ width : "800px", height : "100px" });
            text.show();
            menu.css("top", "47px");
        }
        lastScrollTop = st;
        });
    });
});

Answer 1

你已经在使用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");

Answer 2

只有在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");
    });
});

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

2 个答案: