Question

我正在构建一个脚本来显示/隐藏页面上某个高度的导航菜单。它确实有效，当我缩放页面并且布局捕捉到它的下一个状态时，滚动显示/隐藏脚本仍然基于加载时窗口的宽度在相同的高度运行。

以下是代码：

$(window).on('scroll', function(){
    if( $winwidth > 1200 ){
        console.log('over 1200');
        var $menudrop = 800;
        if( $(window).scrollTop() >= $menudrop ){
            $('#hidden-nav').slideDown(1000);
        }else{
            $('#hidden-nav').slideUp(1000);
        }
    }
});

$(window).on('scroll', function(){
    if( $winwidth < 1200 && $winwidth > 992  ){
        console.log("under 1200");
        var $menudrop = 560;
        if( $(window).scrollTop() >= $menudrop ){
            $('#hidden-nav').slideDown(1000);
        }else{
            $('#hidden-nav').slideUp(1000);
        }
    }
});

我没有到这里来的是什么？

Answer 1

好吧，你没有告诉我们你如何设置$winwidth，但是如果它在页面加载时设置了，你需要在window.resize事件上更新它。 / p>

Answer 2

在使用之前，您必须刷新$winwidth的值，因为它的值可能因调整大小事件而发生了变化。通常没有理由保持全局宽度值，所以我建议只需将其更改为这样的局部变量，只要你需要它就可以得到它。

$(window).on('scroll', function() {
    var $winwidth = $(window).width();
    if ($winwidth > 1200 ) {
        console.log('over 1200');
        var $menudrop = 800;
        if ($(window).scrollTop() >= $menudrop) {
            $('#hidden-nav').slideDown(1000);
        } else{ 
            $('#hidden-nav').slideUp(1000);
        }
    } else if ($winwidth < 1200 && $winwidth > 992  ){
        console.log("under 1200");
        var $menudrop = 560;
        if ($(window).scrollTop() >= $menudrop) {
            $('#hidden-nav').slideDown(1000);
        } else{
            $('#hidden-nav').slideUp(1000);
        }
    }
});

我还建议你将所有逻辑组合成一个滚动处理程序，因为没有理由有两个独立的事件处理程序。

滚动显示/隐藏导航

2 个答案: