Question

使用固定标题，我试图根据滚动位置更改容器的高度（滚动一定距离后菜单会变小）。

这是CSS：

section#homeBg{
    min-height:1000px;
    padding-top:200px;
}

nav{
    height:100px;
    width:100%;
    background-color:#323D44;
    margin:0;
    position:fixed;
    top:0;
    left:0;
}

这是JS，我希望能为我调整大小，但它似乎不起作用：

$("#body").scroll( function() {
    var value = $(this).scrollTop();
    if ( value > 100 )
        $("nav").css("height", "100px");
    else
        $("nav").css("height", "45px");
});

有人可以发现我的错误吗？此外，我希望解决方案在高度转换中顺利进行，但我认为这个解决方案不会提供......

JSFiddle

Answer 1

请参阅 DEMO

$(function(){
    // your code
});

和

$(document).scroll( function() {

});

Answer 2

你的小提琴中不存在

#body，请尝试：

$(document).on('scroll', function(e) {
    var value = $(this).scrollTop();
    if ( value < 100 )
        $("nav").css("height", "100px");
    else
        $("nav").css("height", "45px");
});

更新了小提琴here。

标题缩小大小基于滚动

2 个答案: