$ (window) .scrollTop(); не запускается достаточно быстро

Question

Я пытался сделать заголовок, который будет уменьшаться по количеству, которое вы прокрутили, а затем остановитесь и определите точку. Существует также логотип, который будет двигаться вверх в пределах этого

Единственная проблема: $(window).scrollTop(); не срабатывает достаточно быстро. поэтому, если вы прокрутите слишком быстро, логотип будет за пределами заголовка, или заголовок может быть слишком большим.

я не могу придумать лучшего способа сделать это .. какой-либо помощи или идеи будут оценены

вот мой код

var widgets = { 
    header: function() { 
     var $header = $('.header'); 
     var $logo = $('.header__title'); 
     var $headerHeight = $header.height(); 
     $(window).on('scroll resize', function(event) { 
      var windowWidth = window.innerWidth; 
      var windowScrollTop = $(window).scrollTop(); 


      if(windowScrollTop < 100) { 
       $logo.css('margin-top','-'+(windowScrollTop)+'px'); 
      } 

      if (windowScrollTop < 230) { 
       $header.css('height',($headerHeight - windowScrollTop)+'px'); 
      } 
     }); 
    } 
} 

$(document).ready(function() { 
    widgets.header(); 
    ..... 

пример здесь http://jsfiddle.net/7wp51gu6/

Answer 1

Вы можете установить конечное состояние на else два условий

if (windowScrollTop < 100) { 
    $logo.css('margin-top', '-' + (windowScrollTop) + 'px'); 
} else { 
    $logo.css('margin-top', '-100px'); 
} 

if (windowScrollTop < 230) { 
    $header.css('height', ($headerHeight - windowScrollTop) + 'px'); 
} else { 
    $header.css('height', ($headerHeight - 230) + 'px'); 
} 

Демы в http://jsfiddle.net/gaby/7wp51gu6/7/

Answer 2

Я сделал некоторые быстро изменения и нужна быстрая обратная связь от вас, но проверьте эту скрипку ...

http://jsfiddle.net/7wp51gu6/6/

Я обновил скрипт здесь только:

if (windowScrollTop >= 100) { 
    $logo.css('margin-top', '-100px'); 
}else{ 
    $logo.css('margin-top',0); 
} 

Это в основном устанавливает его к вершине, где вы хотите его, когда оно больше или равно 100. Также устанавливает его обратно, когда вы находитесь на вершине, которая где вы этого хотите.

Также внесено изменение в некоторый css, который подталкивает ваш основной контент вниз 312px. Проверьте это также. Это не на 100% необходимо просто предположить, исходя из вашего текущего дисплея, что вам понадобится в будущем.