Can some one help me impliment a Sticky Header Js?

I need my header to scroll and then stay stuck on to the top of the screen but only as a nav bar.

I am looking for the Js solution, not the CSS solution.

I tried a plugin called Sticky Header.Js but it didnt seem to have an affect, maybe because I already did the CSS sticky header.

Thank you

  • PC
    • WPMU DEV Initiate

    Hello Dylan,

    Thanks for posting on the forums.

    Here are a few links to get you started :

    http://webdesign.tutsplus.com/tutorials/javascript-tutorials/create-a-sticky-navigation-header-using-jquery-waypoints/
    http://ruturaj.net/automatic-header-stick-to-scroll-with-jquery/
    http://www.makeuseof.com/tag/sticky-header-bar-makeuseof/

    I hope that helps. Please feel free to ask if you have more questions on the same.

    Cheers
    PC
    Sales &Support

  • DavidM
    • DEV MAN’s Mascot

    Hi Dylan,

    The links PC provided are excellent resources but if you're still struggling with this, I'll be happy to take a look if you could provide a link to the site you're working with.

    Also, I couldn't quite find a specific Sticky Header.js plugin. Do you have a link to that plugin for reference?

  • Development Design
    • The Crimson Coder

    http://wordpress.org/plugins/lowermedia-sticky-js-menus/
    Only uploaded 1 month ago

    I installed it and activated it, but no change on my page to this point. I probably have to adjust the menu because my client keeps wanting it tweaked around, currently set up with only a sidebar menu.

    Thanks as always for the help PC and I appreciate the offer David.
    I'll report back with a link showing my success or asking for more help. Thanks again!

  • DavidM
    • DEV MAN’s Mascot

    Thanks for that link Dylan,

    Looking at the plugin's code, I can see it should be adding the necessary CSS classes to your primary menu in order so the JavaScript can work with it. You'll probably want to use just the primary menu for that reason.

    On that note, if your theme doesn't utilize the WordPress menu system, then the plugin wouldn't be able to work with it by default. You could potentially add the '.lowermedia_add_sticky' CSS class to it in that case to see how that works. However, the plugin will expect that to be added to a 'nav' tag, not a 'div'. Older themes might not use the 'nav' tag.

    If you're already using the primary menu, it could be that there's a JavaScript conflict/error.

    Using Google Chrome, you can open the JavaScript console with Ctrl-Shift-J (Cmd-Opt-J on Mac) and see if there are any errors on the page. I'm pretty sure there will be since you're not seeing any change.

    In any case, I hope you're able to get that sorted. Will still be happy to take a look if needed.

  • DavidM
    • DEV MAN’s Mascot

    Hiya Dylan,

    Sorry if I was unclear. I was mostly addressing the plugin you mentioned, which actually seems like a viable solution to me.

    In WordPress, you can create multiple menus in Appearance > Menus, but the plugin only works with the first, or primary menu.

    If you could possibly provide a link, I can take a look at what might be going wrong with that. It may be a simple fix. It's hard to know what the issue might be without that though.

  • Development Design
    • The Crimson Coder

    http://revolutionarymindfulness.com
    Thanks David!

    I got the plugin to work but I need to do some serious CSS editing but I cannot figure out how to find the right area to edit. The element editing is inline somewhere in the plugin code.

    I would also like to have the regular menu that is showing up verticle made horizontal and have the same button style as the login and profile buttons. I see the code for those buttons but ???

  • Development Design
    • The Crimson Coder

    I am worried that I have completely screwed up the menu. My client asked me to cram everything up by those buttons, then take out the menu then create a new menu and put the main menu in the new header menu....

    Its too much juggling over too much time for me at this point and I didnt take notes.

    I'm thinking that I will need to look at the origional code for the theme and transfer it to a child theme which I probably need anyways but I am not really very experience with child themes beyond simply making them. Bleeeaaaaaah!

  • Development Design
    • The Crimson Coder

    I got it horizontal and I think I should be able to get it to look like the buttons but I'm not sure. it will take a bit of tinkering. They are different classes, one menu, one button.

    I think that if I can make the CSS the same it will work but we'll see how that goes.

    It is translating over to the sticky menu perfectly however I need to have a small logo picture pop up with the small sticky menu and also I need the menu to activate below the header, not just below the navigation menu because I placed the menu at the top of the header.

  • DavidM
    • DEV MAN’s Mascot

    Hi Dylan,

    I found a link through your other thread and can see you've got it all setup nicely. I imagine you could customize the menu items with some css borrowed from the buttons, maybe like so:

    .header-navigation ul li {
    background-color: #3d4e5b;
    border: none;
    border-radius: 3px;
    box-shadow: 0px 0px 2px #000000;
    }
    
    .header-navigation ul li a {
    color: #ffffff;
    }

    You mentioned possibly creating a child theme and I think that'd be the best choice. Given that, you could probably just paste the above css into the child theme's style.css.

    If you need to add something else to the sticky menu at the point where it becomes 'sticky', I don't see how you could do that except through custom JavaScript or by altering the plugin's JavaScript. Similarly, getting the menu to stick only when it's below the header would require custom JavaScript.

    You've got the basic scenario covered, having the menu stick once the user scrolls past its initial position. The links PC provided cover the basics need to achieve the rest. I particularly think the plain jQuery method ( http://ruturaj.net/files/auto-stick-to-scroll-with-jquery.html ) is nice because it doesn't require an extra jQuery plugin and it's easy to customize.

    With that method, you can remove the sticky menu js plugin and just add something similar to the following to your theme's header:

    <script type="text/javascript">
    jQuery(function(){
    	// Check the initial Poistion of the Sticky Header
    	var stickyHeaderTop = $('.header-navigation').offset().top;
    
    	$(window).scroll(function(){
    		if( $(window).scrollTop() > stickyHeaderTop ) {
    			$('.header-navigation').css({position: 'fixed', top: '0px'});
    			// show the image with the .img class
    			$('.header-navigation .img').show();
    		} else {
    			$('.header-navigation').css({position: 'static', top: '0px'});
    			// hide the image
    			$('.header-navigation .img').hide();
    	}
    	});
    });
    </script>

    I don't have your theme so it's hard to tell right off if that would just work, but I'm rather sure it would. You can add an image with a css class of 'img' within the theme's nav.header-navigation section and that JavaScript code should hide and show it as needed. The only bit that doesn't account for is making it 'sticky' only when the scrollbar is moved past the header. But that can be easily done by adjusting the stickyHeaderTop variable.

    If you wanna give that a try and let me know how it works, I'll see if I can be of further help.

  • DavidM
    • DEV MAN’s Mascot

    Hi @Dylan, @PC, really sorry for the late reply, just wanted to say I'm just happy to help.

    @Dylan, I wasn't part of the staff back when posting previously, but am truly happy to be in the company's employment now! I wasn't really looking for work, but just to sharpen my skills, but I'm incredibly thankful to have joined up because it's simply amazing here, awesome staff and awesome members!

    We're happy to assist further if you're looking for help with this still, just let us know. :slight_smile:

    Cheers!
    David

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.