JQuery: how can I use script timeout to detect page scrolling?

I am wondering how I can timeout a script to detect when scrolltop () is <= to pos.top && & & menu.hasClass ('fixed')) so that the menu can return to default.

$(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');
            });
        }
    });
    });

usually you will not find this problem with this script, but the way I have installed my site with JavaScript to update the contents of the div tag does not increase or decrease the page content in height or width (depending on the situation) in the menu, and you don’t You can scroll so that the menu is where it is at the top of the page.

+3
source share
1 answer

, , HTML, CSS (3) jQuery - http://www.1stwebdesigner.com/tutorials/create-stay-on-top-menu-css3-jquery/

EDIT:

, , . .

$(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);
}
0

Source: https://habr.com/ru/post/1773421/


All Articles