Question

当我滚动时，我的代码应该使我的标题变得更薄。我的导航栏保持不动，但我想在滚动时向导航栏添加填充。

但是，我似乎无法定位我的导航栏，你能提出想法吗？

这是小提琴！

$(function(){
    $('#header').data('size','big');
});

$(window).scroll(function(){
    var $nav = $('#header');
    if ($('body').scrollTop() > 0) {
        if ($nav.data('size') == 'big') {
            $nav.data('size','small').stop().animate({
                height:'40px'
            }, 600);
        }
    } else {
        if ($nav.data('size') == 'small') {
            $nav.data('size','big').stop().animate({
                height:'90px'
            }, 600);
        }  
    }
});

Answer 1

<强>更新

它很简单，你永远不会进入if

试试这个：

$(window).scrollTop()

不是

$('body').scrollTop()

获取Firebug for Firefox并尝试下次调试，例如：

$(window).scroll(function(){
   console.log($('body').scrollTop());

结果：始终0

我不明白你的问题/问题，你应该制作一个fiddle.net或至少一些HTML标记。你的意思是：我似乎无法在代码中定位我的导航栏。？

这里有一些其他可能有用的建议：

$(function(){
    //Here is better, otherwise you selecting it on scroll x times for no reason..
    var $nav = $('#header'); 

    //Also on DOMready
    $(window).scroll(function(){
        if ($('body').scrollTop() > 0) {
            //if ($nav.data('size') == 'big') { // if you dont have an other reason, you could let it away
            $nav.stop().animate({
                height:'40px'
            }, 600);
            //}
    } else {
        //if ($nav.data('size') == 'small') {
        $nav.stop().animate({
            height:'90px'
        }, 600);
        //}  
    }
    });
});

如何在此代码中定位导航栏？

1 个答案: