I've inserted this code into my website (excluding the sections for configuring comments and headers): http://jsfiddle.net/WzLG2/3/ Here is the JavaScript snippet:
jQuery.noConflict();
jQuery(document).ready(function() {
var top = jQuery('#smi').offset().top - parseFloat(jQuery('#smi').css('margin-top').replace(/auto/, 0));
jQuery(window).scroll(function (event) {
// Determines the vertical position of the scroll
var y = jQuery(this).scrollTop();
// Checks if it's below a certain point
if (y >= top) {
// Adds a class when that condition is met
jQuery('#smi').addClass('fixed');
} else {
// Removes the class otherwise
jQuery('#smi').removeClass('fixed');
}
});
});
Here is my website:
I'm attempting to have the brown box under my header scroll to the top and stay fixed, similar to the behavior in the jsfiddle. I am using Thesis with jQuery enabled on WordPress. I've already researched how to use jQuery in WordPress by replacing $ with jQuery.
The initial idea for this code came from Jquery for designers website.
I have verified that jQuery is loading correctly through Firebug without any apparent errors related to this code specifically (though there are some plugin errors). I'm relatively new to coding and unsure about further troubleshooting steps beyond this. Ultimately, I aim to implement this functionality for my social media icons instead of the current side tabs. Any advice or suggestions would be greatly welcomed.