 |
| How To Stick Header Or Menubar On Scroll Down With jQuery |
I have seen lot of other cases where jQuery simply rocks, such as its ability to talk to any DOM (Document Object Model) element and its powerful event (mouse click etc.) handling engine. I like to learn, use & share jQuery tutorials and coding. then today i’ll show you how to stick header or menubar on scroll down.
Previously i was shared full tutorial on how to create sticky sidebar widget for blogger and wordpress, but we can do more with the same coding, actually i tried to stick header and menubar for new release “Margin” blogger template, and really it’s working great, so I’m here with the full tutorial on how to stick header or menubar on scroll down the page for blogger.
Not only header or menubar, We can stick anything by this simple jQuery . but let’s start to learn with how to stick header or menubar as example, I’m sure after reading the full post you will understand automatically that how to stick any element, widget using the jQuery.
How to Stick Header?
So let’s start with stick the header (header wrapper)
- First of all go to blogger—>Template–>Edit HTML
- CTRL + F to find
If your blog have already jQuery plugin then simply remove red colored line in above code.
- Next search for
- Now search for below code in your blogs HTML
Or
- Full code will look like this :
- Now Copy and paste below code just above
- Now close the “div” by adding
- Finally your code will look like this :
Now save your template and see the result. Now visitors will see your sticky header when they scroll down.
How to Stick Menubar?
Whenever you want to stick menubar then you need to add
in your menubar HTML code and close the “div” as example below :
Now i think you have understand that how it works and how to stick other elements of your blogs, if you still not understand then.
Post a Comment