2016-01-05 5 views
0

http://testsites.wz.cz/Sticky Navbar подпрыгивает

(function($) { 
 
    //SCROLL 
 
    var menu = $(".menu"), 
 
    menuLinks = menu.find("a"); 
 

 
    menuLinks.on("click", function(event) { 
 
    $("html,body").animate({ 
 
     scrollTop: $(this.hash).offset().top 
 
    }, 1000); 
 
    event.preventDefault(); 
 
    }); 
 

 
    //BACK-TO-TOP 
 
    var backToTop = $("<a>", { 
 
    href: "#cover", 
 
    class: "back-to-top", 
 
    html: '<i class="fa fa-caret-up fa-5x"></i>' 
 
    }); 
 

 
    backToTop 
 
    .hide() 
 
    .appendTo("body") 
 
    .on("click", function() { 
 
     $("body").animate({ 
 
     scrollTop: 0 
 
     }); 
 
     event.preventDefault(); 
 
    }); 
 

 
    var win = $(window); 
 
    win.on("scroll", function() { 
 
    if (win.scrollTop() >= 600) backToTop.fadeIn(); 
 
    else backToTop.fadeOut(); 
 
    }); 
 
    //STICKY MENU 
 
    $(document).on("scroll", function() { 
 
    if ($(document).scrollTop() > 0) { 
 
     $("nav").removeClass("large").addClass("small"); 
 
     $(".decor").removeClass("large").addClass("small"); 
 
     $(".logo").removeClass("large").addClass("small"); 
 
    } else { 
 
     $("nav").removeClass("small").addClass("large"); 
 
     $(".decor").removeClass("small").addClass("large"); 
 
     $(".logo").removeClass("small").addClass("large"); 
 
    } 
 
    }); 
 
})(jQuery);

Привет I'm новичок здесь :)

Я нашел много Tuts для липкого навигационной панели это хорошо выглядит, но у него есть одна проблема. Он подпрыгивает, изменяя высоту (отступы). Когда на дому щелкните другой раздел. Когда в других разделах нажмите домой. IDK, где проблема.

THX.

ответ

0

Кажется, что это изменение класса jquery, посмотрите в своем скрипте.

Изменить

<nav class="navbar navbar-default navbar-fixed-top large"> 

To:

<nav class="navbar navbar-default navbar-fixed-top small"> 

окончательный ответ, изменить это в вашем CSS:

nav.small li a { 
    padding: 25px 0; 
    transition: all 1s; 
    } 

Другой способ:

nav.small:AFTER li a { 
    padding: 16px 0; 
    transition: all 1s; 
    } 

    nav.large:AFTER li a { 
    padding: 25px 0; 
    transition: all 1s; 
    } 
+0

Я добавил script.js сверху, потому что я правильно не понимаю. –

+0

Посмотрите в своем скрипте после // липкого меню, вы удаляете и добавляете класс на свой навигатор. В вашем файле style.css есть 16 px для маленьких и 26 px для больших ... – codepervert

+0

Где ваша проблема в точности, вы не хотите, чтобы высота была изменена или вы не хотите, чтобы страница прокручивалась? – codepervert

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