main.js 4.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136
  1. jQuery(document).ready(function( $ ) {
  2. $(window).scroll(function () {
  3. var height = $(window).height();
  4. var scroll = $(window).scrollTop();
  5. if (scroll) {
  6. $(".header-hide").addClass("scroll-header");
  7. } else {
  8. $(".header-hide").removeClass("scroll-header");
  9. }
  10. });
  11. // Back to top button
  12. $(window).scroll(function() {
  13. if ($(this).scrollTop() > 100) {
  14. $('.back-to-top').fadeIn('slow');
  15. } else {
  16. $('.back-to-top').fadeOut('slow');
  17. }
  18. });
  19. $('.back-to-top').click(function(){
  20. $('html, body').animate({scrollTop : 0},1500, 'easeInOutExpo');
  21. return false;
  22. });
  23. // Initiate the wowjs animation library
  24. new WOW().init();
  25. // Initiate superfish on nav menu
  26. $('.nav-menu').superfish({
  27. animation: {
  28. opacity: 'show'
  29. },
  30. speed: 400
  31. });
  32. // Mobile Navigation
  33. if ($('#nav-menu-container').length) {
  34. var $mobile_nav = $('#nav-menu-container').clone().prop({
  35. id: 'mobile-nav'
  36. });
  37. $mobile_nav.find('> ul').attr({
  38. 'class': '',
  39. 'id': ''
  40. });
  41. $('body').append($mobile_nav);
  42. $('body').prepend('<button type="button" id="mobile-nav-toggle"><i class="fa fa-bars"></i></button>');
  43. $('body').append('<div id="mobile-body-overly"></div>');
  44. $('#mobile-nav').find('.menu-has-children').prepend('<i class="fa fa-chevron-down"></i>');
  45. $(document).on('click', '.menu-has-children i', function(e) {
  46. $(this).next().toggleClass('menu-item-active');
  47. $(this).nextAll('ul').eq(0).slideToggle();
  48. $(this).toggleClass("fa-chevron-up fa-chevron-down");
  49. });
  50. $(document).on('click', '#mobile-nav-toggle', function(e) {
  51. $('body').toggleClass('mobile-nav-active');
  52. $('#mobile-nav-toggle i').toggleClass('fa-times fa-bars');
  53. $('#mobile-body-overly').toggle();
  54. });
  55. $(document).click(function(e) {
  56. var container = $("#mobile-nav, #mobile-nav-toggle");
  57. if (!container.is(e.target) && container.has(e.target).length === 0) {
  58. if ($('body').hasClass('mobile-nav-active')) {
  59. $('body').removeClass('mobile-nav-active');
  60. $('#mobile-nav-toggle i').toggleClass('fa-times fa-bars');
  61. $('#mobile-body-overly').fadeOut();
  62. }
  63. }
  64. });
  65. } else if ($("#mobile-nav, #mobile-nav-toggle").length) {
  66. $("#mobile-nav, #mobile-nav-toggle").hide();
  67. }
  68. // Smooth scroll for the menu and links with .scrollto classes
  69. $('.nav-menu a, #mobile-nav a, .scrollto').on('click', function() {
  70. if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
  71. var target = $(this.hash);
  72. if (target.length) {
  73. var top_space = 0;
  74. if ($('#header').length) {
  75. top_space = $('#header').outerHeight();
  76. if( ! $('#header').hasClass('header-fixed') ) {
  77. top_space = top_space - 20;
  78. }
  79. }
  80. $('html, body').animate({
  81. scrollTop: target.offset().top - top_space
  82. }, 1500, 'easeInOutExpo');
  83. if ($(this).parents('.nav-menu').length) {
  84. $('.nav-menu .menu-active').removeClass('menu-active');
  85. $(this).closest('li').addClass('menu-active');
  86. }
  87. if ($('body').hasClass('mobile-nav-active')) {
  88. $('body').removeClass('mobile-nav-active');
  89. $('#mobile-nav-toggle i').toggleClass('fa-times fa-bars');
  90. $('#mobile-body-overly').fadeOut();
  91. }
  92. return false;
  93. }
  94. }
  95. });
  96. // Modal video
  97. new ModalVideo('.js-modal-btn', {channel: 'youtube'});
  98. // Init Owl Carousel
  99. $('.owl-carousel').owlCarousel({
  100. items: 4,
  101. autoplay: true,
  102. loop: true,
  103. margin: 30,
  104. dots: true,
  105. responsiveClass: true,
  106. responsive: {
  107. 320: { items: 1},
  108. 480: { items: 2},
  109. 600: { items: 2},
  110. 767: { items: 3},
  111. 768: { items: 3},
  112. 992: { items: 4}
  113. }
  114. });
  115. // custom code
  116. });