Question

我想知道如何制作一个超时脚本来检测scrolltop（）何时是＆lt; = to pos.top＆amp;＆amp; menu.hasClass（'fixed'））因此菜单可以返回默认值。

$(function(){
var menu = $('#menu'),
    pos = menu.offset();

    $(window).scroll(function(){
        if($(this).scrollTop() > pos.top+menu.height() && menu.hasClass('default')){
            menu.fadeOut('fast', function(){
                $(this).removeClass('default').addClass('fixed').fadeIn('fast');
            });
        } else if($(this).scrollTop() <= pos.top && menu.hasClass('fixed')){
            menu.fadeOut('fast', function(){
                $(this).removeClass('fixed').addClass('default').fadeIn('fast');
            });
        }
    });
    });

通常你不会用这个脚本检测到这个问题，但我用我的网站设置JavaScript以更新div标签的内容的方式菜单没有注意到页面内容的高度或宽度增加或减少（取决于在情况上）你不能滚动所以菜单保持在页面顶部的位置。

Answer 1

这不是一个新问题，请查看本教程，它们运行HTML，CSS（3）和所需的jQuery - http://www.1stwebdesigner.com/tutorials/create-stay-on-top-menu-css3-jquery/

修改

通过阅读上述注释，您可能希望检测到不活动状态，然后将用户滚动到页面顶部。这使问题更加有趣。

$(function(){ var menu = $('#menu'), pos = menu.offset(); var timer = setTimeout('scrollToTop()', 30000); $(window).scroll(function(){ // scrolling has happened, reset any timers clearTimeout(timer); timer = setTimeout('scrollToTop()', 30000); if($(this).scrollTop() > pos.top+menu.height() && menu.hasClass('default')){ menu.fadeOut('fast', function(){ $(this).removeClass('default').addClass('fixed').fadeIn('fast'); }); } else if($(this).scrollTop() <= pos.top && menu.hasClass('fixed')){ menu.fadeOut('fast', function(){ $(this).removeClass('fixed').addClass('default').fadeIn('fast'); }); } }); }); // if 30 seconds elapses with no scrolling scroll to top function scrollToTop() { window.scroll(0,0); }

JQuery：如何使用超时脚本来检测页面滚动？

1 个答案: