появление элемента при прокрутке

Тема в разделе "JavaScript", создана пользователем denism300, 25 ноя 2014.

Модераторы: ZiX
  1. denism300

    denism300 Постоялец

    Регистр.:
    10 май 2014
    Сообщения:
    121
    Симпатии:
    4
    такая ситуация: на сайте есть плавающая шапка, которая при прокрутке всегда прижата к верху страницы.
    это реализовано вот таким скриптом:
    Код:
    <script type="text/javascript">
        jQuery(function(){
            var menu = jQuery('#leo-toppos'),
            pos = menu.offset();
            jQuery(window).scroll(function(){
                var scrval = jQuery(window).scrollTop();
                if(scrval > pos.top+menu.height() && menu.hasClass('default')){
                    menu.fadeOut('fast', function(){
                        jQuery(this).removeClass('default').addClass('fixed').fadeIn('fast');
                    });
                } else if(scrval <= pos.top && menu.hasClass('fixed')){
                    menu.fadeOut('fast', function(){
                        jQuery(this).removeClass('fixed').addClass('default').fadeIn('fast');
                    });
                }
            });
        });
    </script>
    добавил в эту плавающую шапку блок, который должен показываться при прокрутке странице на 500px. Соответственно, изменил скрипт на такой:
    Код:
    <script type="text/javascript">
        jQuery(function(){
            var menu = jQuery('#leo-toppos'),
            pos = menu.offset();
            jQuery(window).scroll(function(){
                var scrval = jQuery(window).scrollTop();
                if(scrval > pos.top+menu.height() && menu.hasClass('default')){
                    menu.fadeOut('fast', function(){
                        jQuery(this).removeClass('default').addClass('fixed').fadeIn('fast');
                    });
                     if(scrval > 500) {
                        jQuery('#leo-topphone').show();
                    }
                } else if(scrval <= pos.top && menu.hasClass('fixed')){
                    menu.fadeOut('fast', function(){
                        jQuery(this).removeClass('fixed').addClass('default').fadeIn('fast');
                    });
                      if(scrval <= 500) {
                        jQuery('#leo-topphone').hide();
                    }
                }
            });
        });
    </script>
    и появился такой глюк: блок появляется только если резко прокрутить страницу. при плавной прокрутке он не появляется.
     
  2. Aglok

    Aglok ∞³

    Регистр.:
    9 янв 2012
    Сообщения:
    162
    Симпатии:
    46
    1. У тебя проблема из-за условия
    Код:
    scrval > pos.top+menu.height() && menu.hasClass('default')
    
    Когда совершаешь прокрутку меню становится fixed, а это значит что условие
    Код:
    scrval > pos.top+menu.height() && menu.hasClass('default')
    
    не выполняется. А когда резко дергаешь, это эффект fadeOut(), он имеет задержку 400мс. И за 400мс у тебя получается пролететь 500px!
    2. Чтобы условие выполнялось напиши:
    Код:
    scrval > pos.top+menu.height()
    без
    Код:
    menu.hasClass('default')
     
    Последнее редактирование: 27 ноя 2014