New to the community? Start here

Would like Ubermenu placed in webpage via shortcode to stick to top of page on scroll

Good Afternoon!

I have been doing some trial and error (lots of error :slight_smile: on playing with making something stick to the top of the page on scroll.

On the homepage of this site: http://theie5.org/hideawaylodge I have a regular navigation that is already sticky. This is the navigate that includes terms like, "hunting" and "fishing."

I would like the next menu, which is orange/bright red in color that has options like, "the lodge," "location," and "cabins" to stick when it reaches the top of the page underneath the regular header.

Here is the JS I have been playing with:

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="sticky.js"></script>
<script>
$(function(){
$("#head").sticky({topSpacing:0});
$("#buttons").sticky({topSpacing:80});
});
</script>

I don't have it in there right now. I have tried to position the menu as "-webkit-sticky" but that did not work either.

If you could provide me some guidance, instruction and/or solutions for this I would appreciate it. I will keep on working at it though!

Thank you.

Mandy

  • Predrag Dubajic

    Hey @Mandy,

    Hope you're doing well today :slight_smile:

    I'm not that code savvy when it comes with jQuery, can you try using some of these solutions:
    http://www.sitepoint.com/building-box-sticks-scroll/
    http://leafo.net/sticky-kit/

    Also here is something that might work for you with a few tweaks here and there:

    jQuery(document).ready(function($){

    // CALL FUNCTIONS
    $(window).bind('scroll', function(e) {
        elementFixed();
    });

});

function elementFixed() {

    // calculate when the bottom menu will get to top of page
    var scrolled = $(window).scrollTop();
    var offsetElement = $('.element').offset().top;
    var heightHeader = $('header').outerHeight(true);

    // 37 is offest to push second menu below first one
    if (scrolled > offsetElement - 37) {
        $('.element').addClass("fixed");

        // change padding of the second menu after sticking it
        $(".element").animate({
            'padding-top': 20,
            'padding-right': 0,
            'padding-bottom': 20,
            'padding-left': 0,
        }, "500");
    } else if (heightHeader > offsetElement) {
        // remove fixed class when scrolling back
        $('.element').removeClass("fixed");

        // restore second menu padding
        $(".element").animate({
            'padding-top': 100,
            'padding-right': 0,
            'padding-bottom': 100,
            'padding-left': 0,
        }, "500");
    }
}

    Best regards,
    Predrag

  • Mandy

    Thank you @Predrag Dubajic!

    I am still in the process of reading through the links that you sent to me as this is all a bit new to me also :slight_smile:

    Where would I place the lovely jQuery that you included in the last message? Functions.php? Also, how do I reference the ubermenu? If this is beyond the scope of support I understand. I am reading and rereading and trying to make sense of what you sent to me and the good news is that I am learning something new!

    Thank you!

  • Predrag Dubajic

    Hey Mandy,

    Here is something else you can do, create your own .js file and call it for example mycustomscript.js and put it in your themes js folder, if there is no such folder create one in root of your theme folder. Put the code in your newly created file and save it.

    Now we need to enqueue that script by adding this function to your functions.php file:

    function enqueue_my_custom_script() {
    wp_register_script('my-custom-script',  get_template_directory_uri() . '/js/mycustomscript.js', array('jquery'), true);
    wp_enqueue_script('my-custom-script');
}

add_action( 'wp_enqueue_scripts', 'enqueue_my_custom_script' );

    Save the changes and that should be it.

    That is part of what makes it so fun!

    I like this statement :slight_smile:

    Best regards,
    Predrag

Thank NAME, for their help.

1 Point
5 Points
15 Points
Other

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.