Изменить CSS с помощью jQuery, если не в верхней части страницы

Question

Я использую jQuery для изменения элементов CSS на панели навигации Bootstrap после прокрутки. Проблема у меня в том, что при загрузке страницы в любом месте после того, как в верхней части страницы, в меню не будет получать меньше, пока вы не прокручивать вниз - на код ниже:

var a = $(".nav").offset().top; 

$(document).scroll(function(){ 
    if($(this).scrollTop() > a) 
    { 
     $('.navbar-fixed-top').css({"background":"#fff"}); 
     $('.navbar-fixed-top').css({"transition":"0.5s"}); 
     $('.navbar-fixed-top li a').css({"padding-top":"20px"}); 
     $('.navbar-fixed-top li a').css({"padding-bottom":"20px"}); 
    } else { 
     $('.navbar-fixed-top').css({"background":"transparent"}); 
     $('.navbar-fixed-top').css({"transition":"0.5s"}); 
     $('.navbar-fixed-top li a').css({"padding-top":"40px"}); 
     $('.navbar-fixed-top li a').css({"padding-bottom":"40px"}); 
    } 
}); 

Я пытался изменения это так, что если он не находится в верхней части страницы, он выполнит код scrollTop, но не повезет.

Answer 1

Ваша функция выполняется только в качестве слушателя событий, так что вы должны запустить его вручную первым. Попробуйте этот код:

var a = $(".nav").offset().top; 

function scrollListener(){ 
    if($(document).scrollTop() > a) 
    { 
     $('.navbar-fixed-top').css({"background":"#fff"}); 
     $('.navbar-fixed-top').css({"transition":"0.5s"}); 
     $('.navbar-fixed-top li a').css({"padding-top":"20px"}); 
     $('.navbar-fixed-top li a').css({"padding-bottom":"20px"}); 
    } else { 
     $('.navbar-fixed-top').css({"background":"transparent"}); 
     $('.navbar-fixed-top').css({"transition":"0.5s"}); 
     $('.navbar-fixed-top li a').css({"padding-top":"40px"}); 
     $('.navbar-fixed-top li a').css({"padding-bottom":"40px"}); 
    } 
}; 

$(document).scroll(scrollListener); 

scrollListener(); 

Answer 2

В принципе, вам необходимо запустить функцию регулировки как на scroll, так и на load событиях. Вот пример:

(function($) { 
    var a = $(".nav").offset().top; 

    var adjust = function() { 
     if($(document).scrollTop() > a) { 
      $('.navbar-fixed-top').css({"background":"#fff"}); 
      $('.navbar-fixed-top').css({"transition":"0.5s"}); 
      $('.navbar-fixed-top li a').css({"padding-top":"20px"}); 
      $('.navbar-fixed-top li a').css({"padding-bottom":"20px"}); 
     } else { 
      $('.navbar-fixed-top').css({"background":"transparent"}); 
      $('.navbar-fixed-top').css({"transition":"0.5s"}); 
      $('.navbar-fixed-top li a').css({"padding-top":"40px"}); 
      $('.navbar-fixed-top li a').css({"padding-bottom":"40px"}); 
     } 
    } 

    $(document).scroll(adjust); 
    $(function() { adjust; }) 
})(window.jQuery);