javascript - Scrolling navigation not properly working

325

I've been struggling with a piece of code that should be really easy to implement and I just don't see what I'm doing wrong. I hope you guys can help.

I'm trying to get my left navbar to scroll down when the user is about to scroll past that navbar. I've found a great jsfiddle that I've tried to implement but so far it is only partly working.

Here is the jsfiddle: http://jsfiddle.net/b43hj/

The site is: http://justaddwater.nl I want the blue navbar on the left to start scrolling when the top of the browser hits the red line on top of the content area. But right now it starts scrolling immediately.

I have a feeling that the js code just isn't being executed but I could be wrong. Can anyone please help me fix this and then tell me that im an idiot for not seeing the problem myself? ^^' Thanks!

/css/hagel.css

#sidebar { 
position:fixed;
top:250px;
background-color:red
}

/js/hagel.js

$(window).scroll(function(){
 $("#sidebar").css("top",Math.max(0,250-$(this).scrollTop()));
});

sidebar.php

<div id="sidebar" class="widgets-area">
<?php dynamic_sidebar('sidebar-1'); ?>
</div>

functions.php

<?php
function hagel_script_enqueue() {
//css
wp_enqueue_style('bootstrap', get_template_directory_uri() . '/css/bootstrap.min.css', array(), '3.3.4', 'all');
wp_enqueue_style('customstyle', get_template_directory_uri() . '/css/hagel.css', array(), '1.0.0', 'all');
//js
wp_enqueue_script('jquery');
wp_enqueue_script('bootstrapjs', get_template_directory_uri() . '/js/bootstrap.min.js', array(), '3.3.4', true);
wp_enqueue_script('customjs', get_template_directory_uri() . '/js/hagel.js', array(), '1.0.0', true);
}

add_action( 'wp_enqueue_scripts', 'hagel_script_enqueue');
113

Answer

Solution:

You have a Javascript conflict. Put jQuery into no conflict mode.

jQuery.noConflict();
jQuery( document ).ready(function( $ ) {
  $(window).scroll(function(){
    $("#sidebar").css({top:Math.max(0,250-$(this).scrollTop())});
  });
});

People are also looking for solutions to the problem: java - Smallest possible value to add to array?

Source

Didn't find the answer?

Our community is visited by hundreds of web development professionals every day. Ask your question and get a quick answer for free.

Ask a Question

Write quick answer

Do you know the answer to this question? Write a quick response to it. With your help, we will make our community stronger.

Similar questions

Find the answer in similar questions on our website.