How to Sticky header after scroll in your wordpress site

Shortlink:

Hi There

Today i will teach you how to sticky your header area or menu in your WordPress website. it’s very easy work, if you have something coding knowledge, you can see below jquery code if you want to sticky then you will need this jquery code.

$(window).scroll(function() {
if ($(window).scrollTop() > 100) {
$('.main_h').addClass('sticky');
} else {
$('.main_h').removeClass('sticky');
}
});

 

if you want to add stick menu on custom div scroll

$(window).scroll(function() {
if ($("your_div").scrollTop() > 100) {
$('.main_h').addClass('sticky');
} else {
$('.main_h').removeClass('sticky');
}
});

and now you can style sticky class in your css file.

Maybe you know if you doing jquery coding in your WordPress theme then you must me need to ($) sign to jQuery or rewrite mode

(function($){

//   Your JQuery Code

})(jQuery);

 

I mean Your full codes is

(function($){


$(window).scroll(function() {
if ($("your_div").scrollTop() > 100) {
$('.main_h').addClass('sticky');
} else {
$('.main_h').removeClass('sticky');
}
});

})(jQuery);

Thanks for read this article, If you feel this is very helpfully article then Please share this article link your profile in your social network sites.

 

Leave a Reply

Your email address will not be published. Required fields are marked *

Time limit is exhausted. Please reload CAPTCHA.

Subscribe For Latest Updates

Signup for our newsletter and get notified when we publish new articles for free!




%d bloggers like this: