Fade in/Fade out навигационная панель

Я пытаюсь установить, что моя панель навигации остается фиксированной и исчезает до непрозрачности 0.8, когда я прокручиваю вниз и возвращаюсь к своему нормальному положению и непрозрачности при прокрутке назад.Fade in/Fade out навигационная панель

мой JQuery код:

jQuery(document).ready(function(){ 

    var navOffset = jQuery("nav").offset().top; 

    jQuery(window).scroll(function(){ 

     var scrollPos = jQuery(window).scrollTop(); 

     if(scrollPos > navOffset) { 
      jQuery("nav").addClass("fixed"); 
      jQuery("nav").fadeTo(1500,0.5); 
     } else { 
      jQuery("nav").removeClass("fixed"); 
      jQuery("nav").fadeTo(1500,1); 

     } 
    }); 
});

и мой CSS код:

.fixed { 

    position:fixed; 

    top:0; 
}

Он исчезает, когда я прокрутки вниз, но оленья кожа вернется к своей первоначальной непрозрачности, когда я прокрутить назад up.I 'new для jQuery.

источник

2015-07-31 Eduard Valentin

Ну, если вы хотите, чтобы он перешел на «0.8», для начала я бы изменил значение «0,5» на «0,8», что решает одну проблему. – Albzi

Да, вы правы. Я скопировал там неправильное значение. –

Это работает для меня: http://jsfiddle.net/uwhqhjpg/ – Albzi

Я думаю, проблема в том, что вы устанавливаете функцию fadeTo при каждом запуске события scroll. Таким образом, когда вы прокручиваете вниз, вы добавляете много «исчезающих» вызовов в очередь анимационных эффектов. Когда вы прокручиваете резервную копию, все эффекты «выцветания» (каждый из которых занимает 1,5 секунды) должны заканчиваться до того, как произойдет первый звонок «затухания».

Вы можете это исправить, добавив вызов JQuery-х .stop(true) так, что каждое событие прокрутки очищает очередь анимации:

jQuery(document).ready(function() { 
 

 
    var navOffset = jQuery("nav").offset().top; 
 

 
    jQuery(window).scroll(function() { 
 

 
    var scrollPos = jQuery(window).scrollTop(); 
 
    jQuery("nav").stop(true); 
 

 
    if (scrollPos > navOffset) { 
 
     jQuery("nav").addClass("fixed"); 
 
     jQuery("nav").fadeTo(1500, 0.5); 
 

 
    } else { 
 
     jQuery("nav").removeClass("fixed"); 
 
     jQuery("nav").fadeTo(1500, 1.0); 
 
    } 
 
    }); 
 
});

body { 
 
    height: 4096px; 
 
    padding-top: 32px; 
 
} 
 
nav { 
 
    height: 128px; 
 
    width: 100%; 
 
    border: 1px solid black; 
 
    background-color: #00aa00; 
 
} 
 
.fixed { 
 
    position: fixed; 
 
    top: 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <title>so</title> 
 
    <meta charset="UTF-8"> 
 

 
</head> 
 

 
<body> 
 

 
    <nav></nav> 
 

 
</body> 
 

 
</html>

Обратите внимание, что это означает, что fadeTo анимация не будет иметь место пока пользователь не остановит прокрутку.

источник

2015-07-31 18:05:12 rphv

Большое вам спасибо, я думал, как решить этот день. –

Добро пожаловать. Проблема становится немного сложнее, если вы хотите начать «исчезать», как только «scrollPos> navOffset», но также изящно обрабатывать случай, когда пользователь прокручивается назад до начала анимации. Вы можете что-то приготовить, посмотрев на очередь эффектов элемента 'nav' с помощью' jQuery ("nav"). Queue() 'и отслеживая текущую анимацию, возможно, передав функцию обратного вызова в' fadeTo', например. 'jQuery (« nav »). fadeTo (1500, 0.5, function() {// что-то делать, если/когда fadeTo заканчивается}' – rphv

Мне еще нужно экспериментировать и учиться с помощью jQuery, но спасибо вам за помощь, вы решил для меня большую проблему! –

Это еще одно решение для этого? Потому что, когда я прокручиваю резервную копию, время, которое требуется для действия «fadeTo», задерживается на verry (~ 4 secconds), я не думаю, что это нормально.

источник

2015-07-31 17:07:19

Fade in/Fade out навигационная панель

ответ

Смежные вопросы