I am having quite the headache over this and I've been trying to pull from several other posts on here with no luck. My issue is that I would like for my navigation to stop scrolling when it reaches the top of the page. Currently it will scroll off the page.
Little background, I am using wordpress and currently I have an external script file set up and it is enqueued into wordpress. the navigation is set up using php to work with wordpress.
you can view my live site at www.greenwellgraphics.com
here is my Header.php file:
<?php
/**
* The Header template for our theme
*
* Displays all of the <head> section and everything up till <div id="main">
*
* @package WordPress
* @subpackage Twenty_Thirteen
* @since Twenty Thirteen 1.0
*/
?><!DOCTYPE html>
<!--[if IE 7]>
<html class="ie ie7" <?php language_attributes(); ?>>
<![endif]-->
<!--[if IE 8]>
<html class="ie ie8" <?php language_attributes(); ?>>
<![endif]-->
<!--[if !(IE 7) | !(IE 8) ]><!-->
<html <?php language_attributes(); ?>>
<!--<![endif]-->
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width">
<title><?php wp_title( '|', true, 'right' ); ?></title>
<link rel="profile" href="http://gmpg.org/xfn/11">
<link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>">
<!--[if lt IE 9]>
<script src="<?php echo get_template_directory_uri(); ?>/js/html5.js"></script>
<![endif]-->
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<div id="page" class="hfeed site">
<header id="masthead" class="site-header" role="banner">
<a class="home-link" href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home">
<h1 class="site-title"><?php bloginfo( 'name' ); ?></h1>
<h2 class="site-description"><?php bloginfo( 'description' ); ?></h2>
</a>
<div id="navbar" class="navbar">
<nav id="site-navigation" class="navigation main-navigation" role="navigation">
<h3 class="menu-toggle"><?php _e( 'Menu', 'twentythirteen' ); ?></h3>
<a class="screen-reader-text skip-link" href="#content" title="<?php esc_attr_e( 'Skip to content', 'twentythirteen' ); ?>"><?php _e( 'Skip to content', 'twentythirteen' ); ?></a>
<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?>
</nav><!-- #site-navigation -->
</div><!-- #navbar -->
</header><!-- #masthead -->
<div id="main" class="site-main">
and this is my javascript I am using:
var num = 125; //number of pixels before modifying styles
$(window).bind('scroll', function () {
if ($(window).scrollTop() > num) {
$('.navbar').addClass('fixed');
} else {
$('.navbar').removeClass('fixed');
}
});
and the CSS:
.navbar {
background-color: #ffffff;
border-bottom:1px dashed #CCCCCC;
border-top:1px dashed #CCCCCC;
margin: 0 auto;
max-width: 800px;
width: 100%;
text-align:center;
}
.fixed {
position:fixed;
top:0;
}
Functions.php to show where / how i am implementing the script.
function get_Fixed_header() {
wp_enqueue_script('jquery');
wp_register_script( 'add-GF-js', get_template_directory_uri() . '/js/test.js');
wp_enqueue_script('add-GF-js');
}
add_action( 'wp_enqueue_scripts' , 'get_Fixed_header' ); //hook to the enqueue function built into wordpress
*edited the java script to show that I am calling the div class out. sorry.
Of course you were looking everywhere, the problem is as simple as it can be.
Check your jquery selector $('navbar'), you are grabbing a html element instead a class'ed or ID'd element. So, fix it to it either $('.navbar') or $('#navbar').
EDIT:
Instead of
$(document).ready(function(){
use
jQuery(document).ready(function($){
More info
http://codex.wordpress.org/Function_Reference/wp_enqueue_script#jQuery_noConflict_Wrappers