Jump to content
Sign in to follow this  

Adding Sticky Attribute to Universal Sidebar

Recommended Posts


My apologies for no link to the url, but I'm using Instant Wordpress to try and develop a site to replace an existing one. Basically, what I'm trying to do is place the universal sidebar in the header and add the sticky effects to it like this: http://labs.anthonygarand.com/sticky/ I'm having a really hard time figuring out how to put the .js plugin file into the functions.php located in the customize plugin. the included file looks like:

(function($) {
	    var defaults = {
	            topSpacing: 0,
	            bottomSpacing: 0,
	            className: 'is-sticky',
	            wrapperClassName: 'sticky-wrapper'
	        $window = $(window),
	        $document = $(document),
	        sticked = [],
	        windowHeight = $window.height(),
	        scroller = function() {
	            var scrollTop = $window.scrollTop(),
	                documentHeight = $document.height(),
	                dwh = documentHeight - windowHeight,
	                extra = (scrollTop > dwh) ? dwh - scrollTop : 0;
	            for (var i = 0; i < sticked.length; i++) {
	                var s = sticked[i],
	                    elementTop = s.stickyWrapper.offset().top,
	                    etse = elementTop - s.topSpacing - extra;
	                if (scrollTop <= etse) {
	                    if (s.currentTop !== null) {
	                            .css('position', '')
	                            .css('top', '')
	                        s.currentTop = null;
	                else {
	                    var newTop = documentHeight - s.stickyElement.outerHeight()
	                        - s.topSpacing - s.bottomSpacing - scrollTop - extra;
	                    if (newTop < 0) {
	                        newTop = newTop + s.topSpacing;
	                    } else {
	                        newTop = s.topSpacing;
	                    if (s.currentTop != newTop) {
	                            .css('position', 'fixed')
	                            .css('top', newTop)
	                        s.currentTop = newTop;
	        resizer = function() {
	            windowHeight = $window.height();
	        methods = {
	            init: function(options) {
	                var o = $.extend(defaults, options);
	                return this.each(function() {
	                    var stickyElement = $(this);
	                    stickyId = stickyElement.attr('id');
	                    wrapper = $('
') .attr('id', stickyId + '-sticky-wrapper') .addClass(o.wrapperClassName); stickyElement.wrapAll(wrapper); var stickyWrapper = stickyElement.parent(); stickyWrapper.css('height', stickyElement.outerHeight()); sticked.push({ topSpacing: o.topSpacing, bottomSpacing: o.bottomSpacing, stickyElement: stickyElement, currentTop: null, stickyWrapper: stickyWrapper, className: o.className }); }); }, update: scroller }; // should be more efficient than using $window.scroll(scroller) and $window.resize(resizer): if (window.addEventListener) { window.addEventListener('scroll', scroller, false); window.addEventListener('resize', resizer, false); } else if (window.attachEvent) { window.attachEvent('onscroll', scroller); window.attachEvent('onresize', resizer); } $.fn.sticky = function(method) { if (methods[method]) { return methods[method].apply(this, Array.prototype.slice.call(arguments, 1)); } else if (typeof method === 'object' || !method ) { return methods.init.apply( this, arguments ); } else { $.error('Method ' + method + ' does not exist on jQuery.sticky'); } }; $(function() { setTimeout(scroller, 0); }); })(jQuery);[/code] which I then use this to place in the header area to call, no?

but when I attempted all of this, it broke the theme saying pagelines didn't expect a $ in the functions.php line 41 or something. If there is any way you all can help this noob figure it out that would be awesome. I also tried contacting a pro to figure it out, but to no avail. I fully expect it's me not knowing what the heck I'm doing, and even a point in the right direction would be greatly helpful. Thanks.

Share this post

Link to post
Share on other sites
Hi, WordPress uses a later version of jQuery. Realistically, this is a job for one of our Pros and is likely not to be an easy task even for a developer. For example, one cannot use $ but must use jQuery(). One suggestion might be to use the Content Box, rather than the Universal Sidebar, though I believe you'll still require the help of one of our Pros - http://www.pagelines.com/pros I apologize. This is somewhat outside the scope of forum support.

Former PageLines Moderator, Food Expert and Raconteur

Share this post

Link to post
Share on other sites
I thought it might be, but wanted to give it a shot anyway. I'll try another pro. Thanks!

Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this