asked on

jQuery Sticky Menu

Hi,

I am working on a website www.chatterisosteopaths.co.uk.gridhosted.co.uk

I am trying to fix the top menu header after you scroll without using a plugin as I was getting unstable results. So I have tried the following script with no luck

<script type="text/javascript">

function sticky_relocate($) {
var window_top = $(window).scrollTop();
var div_top = $('#sticky-anchor').offset().top;
if (window_top > div_top) {
$('#sticky').addClass('stick');
$('#sticky-anchor').height($('#sticky').outerHeight());
} else {
$('#sticky').removeClass('stick');
$('#sticky-anchor').height(0);
}
}

$(function() {
$(window).scroll(sticky_relocate);
sticky_relocate();
});

var dir = 1;
var MIN_TOP = 200;
var MAX_TOP = 350;

function autoscroll() {
var window_top = $(window).scrollTop() + dir;
if (window_top >= MAX_TOP) {
window_top = MAX_TOP;
dir = -1;
} else if (window_top <= MIN_TOP) {
window_top = MIN_TOP;
dir = 1;
}
$(window).scrollTop(window_top);
window.setTimeout(autoscroll, 100);
}
</script>

Here is the HTML

<div id="sticky-anchor" class="navbar navbar-default navbar-fixed-top" role="navigation">
<div id="sticky" class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand main-logo pull-left" href="<?php bloginfo( 'url' ); ?>"><img src="<?php bloginfo('template_directory');?>/images/Logo-opt-large.jpg" width="808" height="254" alt=""/></a>
</div>

<div class="navbar-collapse collapse">

<?php
$args = array(
'menu' => 'header-menu',
'menu_class' => 'nav navbar-nav',
'container' => 'false'
);
wp_nav_menu( $args );
?>

</div>
<div class="row">

<?php /*?> <p class="header-address">24 west park street, chatteris,
cambs, PE16 6AL</p><?php */?>
</div>

</div>
</div>

I was wondering if anyone could help with this?

Many Thanks,

Andrew

Julian Hansen

Check your console you are getting
$ is not a function
This is because jQuery is being referenced through jQuery() in your page not $.

Try this

<script type="text/javascript">
      
      
function sticky_relocate($) {
    var window_top = jQuerywindow).scrollTop();
    var div_top = jQuery'#sticky-anchor').offset().top;
    if (window_top > div_top) {
        jQuery'#sticky').addClass('stick');
        jQuery'#sticky-anchor').height(jQuery'#sticky').outerHeight());
    } else {
        jQuery'#sticky').removeClass('stick');
        jQuery'#sticky-anchor').height(0);
    }
}

jQueryfunction() {
    jQuerywindow).scroll(sticky_relocate);
    sticky_relocate();
});

var dir = 1;
var MIN_TOP = 200;
var MAX_TOP = 350;

function autoscroll() {
    var window_top = jQuerywindow).scrollTop() + dir;
    if (window_top >= MAX_TOP) {
        window_top = MAX_TOP;
        dir = -1;
    } else if (window_top <= MIN_TOP) {
        window_top = MIN_TOP;
        dir = 1;
    }
    jQuerywindow).scrollTop(window_top);
    window.setTimeout(autoscroll, 100);
}
</script>

Open in new window

Andrew Spackman

ASKER

I think there were syntax errors appearing in your code but I changed it to this....

<script type="text/javascript">

function sticky_relocate($) {
var window_top = jQuery(window).scrollTop();
var div_top = jQuery('#sticky-anchor').offset().top;
if (window_top > div_top) {
jQuery('#sticky').addClass('stick');
jQuery('#sticky-anchor').height(jQuery('#sticky').outerHeight());
} else {
jQuery('#sticky').removeClass('stick');
jQuery('#sticky-anchor').height(0);
}
}

jQuery(function() {
jQuery(window).scroll(sticky_relocate);
sticky_relocate();
});

var dir = 1;
var MIN_TOP = 200;
var MAX_TOP = 350;

function autoscroll() {
var window_top = jQuery(window).scrollTop() + dir;
if (window_top >= MAX_TOP) {
window_top = MAX_TOP;
dir = -1;
} else if (window_top <= MIN_TOP) {
window_top = MIN_TOP;
dir = 1;
}
jQuery(window).scrollTop(window_top);
window.setTimeout(autoscroll, 100);
}
</script>

However it still doents seem to work, even though I am not recieving any errors in the console?

Andrew Spackman

ASKER

I've also put an additional mobile menu in using .slideToggle but this doesn't appear to work either, do you think they both are not working due to the same error?

Andrew Spackman

ASKER

I seem to be struggling with my caching, Chrome shows it working one way and firefox another, I keep having to clear my cache, so not sure exactly whats working and whats not. Dont normally have this problem

Julian Hansen

Syntax errors: Yes my search and replace left out the opening '('

You are adding class stick to the sticky <a> - there does not seem to be any CSS attached to this - what are you hoping to achieve with that?

Andrew Spackman

ASKER

I basically want the top logo and menu container to fix to the top once you start scrolling

Andrew Spackman

ASKER

So I added this to the header <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>

In firefox the mini menu works but not in chrome, the fixed top bar doesnt work on either :/

Shaun Vermaak

<<<Just a comment>>>
Did you try this implementation?
https://designmodo.com/sticky-navigation-css-jquery/

Andrew Spackman

ASKER

Hi Shaun,

Yes, something similar. I have now got both the sticky element and the mobile toggle menu working on firefox just not chrome. I think the sticky element needs a bit of styling as it doesn't stay the same when scrolling

Shaun Vermaak

Probably just your cache... It works on my Chrome

Andrew Spackman

ASKER

So frustrating, I've cleared my cache but still doesn't work on chrome :/

Julian Hansen

Need to understand something.

A sticky menu is usually implemented in one of two ways.

1. A static menu that is fixed to the top of the window - usually using position: fixed and with the container given sufficient top padding to ensure the top content does not "slide" under the menu. This can be done just with CSS

2. A menu that collapses and sticks - when at the top the header is expanded to full height when you scroll it collapses to a smaller version and sticks to the top.

Which one are you trying to implement?

Shaun Vermaak

Hi Julian,

OP is implementing the latter

Andrew Spackman

ASKER

Hi Julian,

I'm trying to implement the second method. Sorry for any frustration.

Julian Hansen

I don't see any CSS that implements the sticky bit - where is that defined?

As I mentioned in my earlier post you are applying class stick to #sticky - that part works - but there is no CSS applied to that class?

I see you have implemented something where the menu shrinks horizontally but sticks?

Andrew Spackman

ASKER

This is the CSS I am using for that part

#sticky.stick {
margin-top: 0 !important;
position: fixed !important;
top: 0;
z-index: 10000;
border-radius: 0 0 0.5em 0.5em;
background-color:#FFFFFF;
}

It works on Firefox for me but not full width

Julian Hansen

Add width: 100%

Andrew Spackman

ASKER

Ok thank you, can I ask something else or do I need to open a new question, same job.

Andrew Spackman

ASKER

Also the sticky bar works now but not on mobile, is that something to do with this script?

<script type="text/javascript">

function sticky_relocate($) {
var window_top = jQuery(window).scrollTop();
var div_top = jQuery('#sticky-anchor').offset().top;
if (window_top > div_top) {
jQuery('#sticky').addClass('stick');
jQuery('#sticky-anchor').height(jQuery('#sticky').outerHeight());
} else {
jQuery('#sticky').removeClass('stick');
jQuery('#sticky-anchor').height(108);
}
}

jQuery(function() {
jQuery(window).scroll(sticky_relocate);
sticky_relocate();
});

var dir = 1;
var MIN_TOP = 200;
var MAX_TOP = 350;

function autoscroll() {
var window_top = jQuery(window).scrollTop() + dir;
if (window_top >= MAX_TOP) {
window_top = MAX_TOP;
dir = -1;
} else if (window_top <= MIN_TOP) {
window_top = MIN_TOP;
dir = 1;
}
jQuery(window).scrollTop(window_top);
window.setTimeout(autoscroll, 100);
}
</script>

Julian Hansen

That is because your sticky-anchor has the following class - which has display: none

.navbar-collapse, .navbar-default {
	margin-bottom: 0px;
	display: none;
}

Open in new window

So your if statement is working against a non-visible element. The upshot is div_top gets the same value as window_top so the following code never fires.

if (window_top > div_top) {

Open in new window

Andrew Spackman

ASKER

Thank you for that. The part I was going to quickly as on this thread was to do with CSS based on a page template.

I have the following code that im using in the header but I dont think its quite right as the sub-menu of our services at the top isnt displaying anywhere, when in fact I want it to only appear on hover when the user is visiting certain pages.

<?php if( is_page_template( 'single-portfolio' ) ) : ?>
<style>
ul#menu-header-menu li:hover .sub-menu {
display: block !important;
}
</style>

<?php else: ?>
<style>
ul#menu-header-menu li:hover .sub-menu {
display: none !important;
}
</style>
<?php endif; ?>

ASKER CERTIFIED SOLUTION

Julian Hansen

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Andrew Spackman

ASKER

Brilliant, thank you :)