Sticky Sidebar Widget – Smart Passive Income Theme

[rogerp]

I am setting up a site for a client with the Smart Passive Income Theme

On the original version used by Pat he had a sticky sidebar widget which after about 10 seconds of scrolling placed a sidebar which stuck as you scrolled.

I want to implement this feature as the client has asked for it specifically when I said we can use this theme.

But how?

Thanks
Roger

---

Roger
https://www.rogerperkin.co.uk/
Check out my Network Automation Training – Training the Network Engineers of the Future

[Brad Dalton]

Here's 2

Fixed Widget and Sticky Elements for WordPress

https://wecodepixels.com/theia-sticky-sidebar-for-wordpress/

---

Tutorials for StudioPress Themes.

[rogerp]

Thanks Brad,

The Q2wd does what it says on the tin, but have to be careful about which widgets you stick as they just overwrite one below.

The one used on the Smart Passive Income Blog was immense but suspect this is custom code

http://web.archive.org/web/20160406064855/http://www.smartpassiveincome.com/blog/

It runs through the sidebar then when you get to the end throws in some custom content which sticks for the rest of the way down the page.

---

Roger
https://www.rogerperkin.co.uk/
Check out my Network Automation Training – Training the Network Engineers of the Future

[rogerp]

I have found this tutorial which seems to be exactly what I am looking for to make the last widget in the sidebar fade in and then stick

http://www.wpbeginner.com/wp-themes/how-to-fade-in-the-last-sidebar-widget-in-wordpress-using-jquery/

However I need to find the sidebar element for div tag

This is what I believe is the correct one div#genesis-sidebar-primary

However it is not working, so this was my first checkpoint to make sure the div id for the sidebar was correct

Thanks
Roger

---

Roger
https://www.rogerperkin.co.uk/
Check out my Network Automation Training – Training the Network Engineers of the Future

[Brad Dalton]

Try

 .sidebar-primary

---

Tutorials for StudioPress Themes.

[rogerp]

//* Enqueue Scripts and Styles
add_action( 'wp_enqueue_scripts', 'spi_enqueue_scripts_styles' );
function spi_enqueue_scripts_styles() {

wp_enqueue_style( 'spi-fonts', '//fonts.googleapis.com/css?family=Roboto:300,400,400italic,700,900', array(), CHILD_THEME_VERSION );
wp_enqueue_style( 'dashicons' );

wp_enqueue_script( 'spi-responsive-menu', get_stylesheet_directory_uri() . '/js/responsive-menu.js', array( 'jquery' ), '1.0.0', true );
$output = array(
'mainMenu' => __( 'Menu', 'smart-passive-income-pro' ),
'subMenu' => __( 'Menu', 'smart-passive-income-pro' ),
);
wp_localize_script( 'spi-responsive-menu', 'SPIL10n', $output );
wp_enqueue_script( 'stickywidget', get_template_directory_uri() . '/js/wpb-fadein-widget.js', array('jquery'), '1.0.0', true );
}

Also checking that this is the right place to enque the javascript

Regards,
Roger

---

Roger
https://www.rogerperkin.co.uk/
Check out my Network Automation Training – Training the Network Engineers of the Future

[Brad Dalton]

Change

get_template_directory_uri()

to

get_stylesheet_directory_uri()

---

Tutorials for StudioPress Themes.

[rogerp]

Thanks for your replies Brad,

Still no go - I have tried every option in the js file

var sidebarElement = $('div#genesis-sidebar-primary');
var sidebarElement = $('div#sidebar-primary');
var sidebarElement = $('div#.sidebar-primary');
var sidebarElement = $('div#primary');

In the tutorial they are not using a . before?

The theory is the last widget will fade in and stick.

---

Roger
https://www.rogerperkin.co.uk/
Check out my Network Automation Training – Training the Network Engineers of the Future

[Brad Dalton]

Are there any js errors in Chrome Inspector?

---

Tutorials for StudioPress Themes.

[rogerp]

GET http://www.rogerperkin.co.uk/wp-content/themes/smart-passive-income-pro/js/wpb-fadein-widget.js?ver=1.0.0
(index):275 WPP: OK. Execution time: 0.003449 seconds

This is all that shows?

---

Roger
https://www.rogerperkin.co.uk/
Check out my Network Automation Training – Training the Network Engineers of the Future

[Brad Dalton]

The js file should be uploaded to your child themes js folder. Please check that it is and that its not in the Genesis folder.

---

Tutorials for StudioPress Themes.

[rogerp]

Yes, this is in the child theme -

jQuery(document).ready(function($) {
/**
* Configuration
* The container for your sidebar e.g. aside, #sidebar etc.
*/

var sidebarElement = $('div#genesis-sidebar-primary');

// Check if the sidebar exists
if ($(sidebarElement).length > 0) {

// Get the last widget in the sidebar, and its position on screen

var widgetDisplayed = false;
var lastWidget = $('.widget:last-child', $(sidebarElement));
var lastWidgetOffset = $(lastWidget).offset().top -100;

// Hide the last widget
$(lastWidget).hide();

// Check if user scroll have reached the top of the last widget and display it
$(document).scroll(function() {

// If the widget has been displayed, we don't need to keep doing a check.

if (!widgetDisplayed) {
if($(this).scrollTop() > lastWidgetOffset) {
$(lastWidget).fadeIn('slow').addClass('wpbstickywidget');
widgetDisplayed = true;
}
}
});
}
});

---

Roger
https://www.rogerperkin.co.uk/
Check out my Network Automation Training – Training the Network Engineers of the Future

[Brad Dalton]

Returns 404 in Chrome.

---

Tutorials for StudioPress Themes.

[rogerp]

Ahhh! That could be the problem

filename is wpb_fadein_widget.js and the enqueue script is wanting wpb-fadein-widget.js

Renamed js file and now it is accessible

Still not working though,

But one step forward..

---

Roger
https://www.rogerperkin.co.uk/
Check out my Network Automation Training – Training the Network Engineers of the Future

[rogerp]

When I debug the page it fails to load this

http://www.rogerperkin.co.uk/wp-content/themes/genesis/js/wpb-fadein-widget.js?ver=1.0.0

But the functions.php has this on the enqueue - so is it defaulting to the parent theme?

wp_enqueue_script( 'stickywidget', get_stylesheet_directory_uri() . '/js/wpb-fadein-widget.js', array('jquery'), '1.0.0', true );

---

Roger
https://www.rogerperkin.co.uk/
Check out my Network Automation Training – Training the Network Engineers of the Future

[Brad Dalton]

Because that path is to genesis not your child theme

---

Tutorials for StudioPress Themes.

[rogerp]

So what is the correct path, as this really breaks it

wp_enqueue_script( 'stickywidget', get_stylesheet_directory_uri() . '//rogerperkin.co.uk/wp-content/themes/smart-passive-income-pro/js/wpb-fadein-widget.js', array('jquery'), '1.0.0', true );

the child theme is in the same directory as genesis?

---

Roger
https://www.rogerperkin.co.uk/
Check out my Network Automation Training – Training the Network Engineers of the Future

[Brad Dalton]

wp_enqueue_script( 'stickywidget', get_stylesheet_directory_uri() . '/js/wpb-fadein-widget.js', array('jquery'), '1.0.0', true );

And add the wpb-fadein-widget.js file in your child themes js folder not genesis.

Never touch Genesis.

---

Tutorials for StudioPress Themes.

[rogerp]

Thanks Brad,

now not getting any errors on page load., but the last widget is still not fading in... and sticking?

---

Roger
https://www.rogerperkin.co.uk/
Check out my Network Automation Training – Training the Network Engineers of the Future

[Brad Dalton]

Works when i test it but not a complete solution because the last widget in the sidebar remains fixed even after the footer widgets so that means the code needs extending.

---

Tutorials for StudioPress Themes.

[Author]

Posts