I have a question about proper event binding. How to implemet on my js?
PROPER EVENT BINDING: Consider using the preferred .on() method rather than .click(), .bind(), .hover(), etc.
!function($) {
"use strict";
var Page = function() {
this.$topSection = $('#home-fullscreen'),
this.$topNavbar = $("#navbar-menu"),
this.$stickyElem = $("#sticky-nav"),
this.$backToTop = $('#back-to-top'),
this.$contactForm = $("#contact-form")
};
/* ======= Stellar for background scrolling ======= */
if ($('.parallax-bg').length > 0) {
$('.parallax-bg').imagesLoaded( function() {
$(window).stellar({
horizontalScrolling: false,
verticalOffset: 0,
horizontalOffset: 0,
responsive: true,
hideDistantElements: true
});
});
}
// Prototype Get
Page.prototype.init = function () {
var $this = this;
//window related event
//Handling load event
$(window).on('load', function() {
var windowHeight = $(window).height();
// adding height attr to top section
$this.$topSection.css('height', windowHeight);
//init sticky
$this.$stickyElem.sticky({topSpacing: 0});
});
//Handling the resize event
$(window).on('resize', function() {
var windowHeight = $(window).height();
$this.$topSection.css('height', windowHeight);
});
//Handling the scroll event
$(window).scroll(function(){
if ($(this).scrollTop() > 100) {
$this.$backToTop.fadeIn();
} else {
$this.$backToTop.fadeOut();
}
});
//on click on navbar - Smooth Scroll To Anchor (requires jQuery Easing plugin)
this.$topNavbar.on('click', function(event) {
var $anchor = $(event.target);
if ($($anchor.attr('href')).length > 0 && $anchor.is('a.nav-link')) {
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top - 0
}, 1500, 'easeInOutExpo');
event.preventDefault();
}
});
//back-to-top button
$this.$backToTop.click(function(){
$("html, body").animate({ scrollTop: 0 }, 1000);
return false;
});
// Owl Initialization
$('.owl-carousel').owlCarousel({
loop:true,
margin:10,
nav:true,
autoplay: true,
navText: ["<i class='fa fa-caret-left'></i>","<i class='fa fa-caret-right'></i>" ],
autoplayTimeout: 4000,
responsive:{
0:{
items:1
}
}
});
//init contact app if contact form added in a page
if(this.$contactForm.length>0)
$.ContactForm.init();
},
//init
$.Page = new Page, $.Page.Constructor = Page
}(window.jQuery),
//initializing
function($) {
"use strict";
$.Page.init()
}(window.jQuery);
I really appreciate all your help
