Javascript переход изменения заголовка

Я гугл несколько раз и не могу найти рабочий ответ на этот запрос ...Javascript переход изменения заголовка

Сайт: http://miners-arms.wearepixel.co.uk/job-vacancies/

При прокрутке страницы этого сайта изменения заголовка. Я хотел бы знать, как я могу добавить переход затухания, когда происходит изменение?

Похожа на этом сайте: https://www.venndigital.co.uk/technology/

Большое спасибо,

источник

2016-04-21 leannekera

Взгляните на эти [бутстраповской шаблоны] (HTTP: // startbootstrap.com/template-overviews/agency/). Просто нажмите live preview или загрузите исходный код (они бесплатны). –

С помощью этого скрипта:

$(window).scroll(function() {  
     var scroll = $(window).scrollTop(); 
     if (scroll >= 110) { 
       //$("#headertop").addClass("parallax-window-top"); 
       $("#headertop").fadeIn(200); 
      } else { 
       //$("#headertop").removeClass("parallax-window-top"); 
       $("#headertop").fadeIn(200); 
      } 
    });

источник

2016-04-21 12:36:19

Вы должны прокомментировать исходный код и раскомментировать рабочий. –

Извините, но я не понял :(@SideriteZackwehdex –

В блоке выше ваше решение находится в комментариях. Он уже делает переключение класса CSS. –

Вы переключая класс называется параллаксом-окно-топ:

.parallax-window-top { 
    min-height: 35px; 
    background: #fff; 
    opacity: 1; 
    z-index: 99999; 
    border-bottom: 1px solid #23bcbf; 
    height: 60px; 

    transition: display .5s ease; 
    -webkit-transition: display .50s ease; 
    -moz-transition: display .50s ease; 
    -o-transition: display .50s ease; 
}

Как вы видите, дисплей - это единственное, что вы хотите перевести. Я думаю, что непрозрачность или высота были бы более уместными. Но также этот переход не существует, пока вы не установите класс. Поэтому, когда вы переключаете его, вы также удаляете переход, который, я думаю, заставит его потерпеть неудачу. Если отображение будет включено и выключено на основе класса, даже если вы переместите непрозрачность или высоту, вы все равно не увидите никаких изменений.

Вот скрипка с рабочим например: https://jsfiddle.net/kas6r6rg/

Я добавил высоту и разное время перехода для непрозрачности и высот: https://jsfiddle.net/kas6r6rg/1/

Обратите внимание, что удаление значения высоты от первоначального CSS отключает эффект. Это потому, что переходы работают на непрерывных свойствах, таких как числа. Дисплей сдержанный: «блок», «нет»; между ними нет промежуточных значений.

Так что в вашем случае просто изменить CSS, как это:

#headertop { 
    position: fixed; 
    width: 100%; 
    overflow: visible; 
    transition: opacity .5s ease; 
    -webkit-transition: opacity .50s ease; 
    -moz-transition: opacity .50s ease; 
    -o-transition: opacity .50s ease; 
    opacity: 0; 
} 
.parallax-window-top { 
    min-height: 35px; 
    background: #fff; 
    opacity: 1 !important; 
    z-index: 99999; 
    border-bottom: 1px solid #23bcbf; 
    height: 60px; 
    /* transition: display .5s ease; 
    -webkit-transition: display .50s ease; 
    -moz-transition: display .50s ease; 
    -o-transition: display .50s ease;*/ 
}

источник

2016-04-21 12:42:13

Я понимаю. Вот почему мне было интересно, если есть решение для javascript. Большое спасибо – leannekera

Вам не нужен javascript просто добавьте переход CSS в #headertop и используйте непрозрачность вместо отображения. Я обновил свой ответ. –

Это своего рода работа: http://miners-arms.wearepixel.co.uk, но все еще есть проблемы. Спасибо за ваше время на этом Сидерит – leannekera

Хорошо это работает образуют меня:

<!DOCTYPE html > 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <title>Tst</title> 
    <script src="https://code.jquery.com/jquery-2.2.3.min.js"></script> 
    <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> 
    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" /> 
    <style type="text/css"> 
     .content{ 
      height:1600px; 
     } 
     .parallax-window-top { 
      min-height: 35px; 
      background: #fff; 
      opacity: 1; 
      z-index: 99999; 
      border-bottom: 1px solid #23bcbf; 
      height: 60px; 

      transition: display .5s ease; 
      -webkit-transition: display .50s ease; 
      -moz-transition: display .50s ease; 
      -o-transition: display .50s ease; 
      display:block; 
     } 
     #headertop { 
      position: fixed; 
      width: 100%; 
      overflow: visible; 
      background-color:#808080; 
      display:none; 
     } 
     body { 
      margin: 0px; 
      padding:0px; 
     } 
    </style> 
    <script type="text/javascript"> 
     $(window).scroll(function() { 
      var scroll = $(window).scrollTop(); 
      if (scroll >= 110) { 
       //$("#headertop").addClass("parallax-window-top"); 
       $("#headertop").fadeIn(200); 
      } else { 
       //$("#headertop").removeClass("parallax-window-top"); 
       $("#headertop").fadeOut(200); 
      } 
     }); 
    </script> 
</head> 

<body> 
    <div id="headertop" > 
     HEADER 
    </div> 
    <div class="content"> 
     VERY LONG PAGE<br /> 
     VERY LONG PAGE<br /> 
     VERY LONG PAGE<br /> 
     VERY LONG PAGE<br /> 
     VERY LONG PAGE<br /> 
     VERY LONG PAGE<br /> 
     VERY LONG PAGE<br /> 
     VERY LONG PAGE<br /> 
    </div> 


</body> 



</html>

источник

2016-04-21 15:34:23

Javascript переход изменения заголовка

ответ

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