Turn off on mobile

[dezpfab]

Hi, I am using your plugin and it works great !

What is the best way to "turn-it-off" on mobile ?

Thanks a lot

[presto2116]

Copied from documentation

minWidth
The sidebar returns to its normal position when the width of window is below this value. 
Default: 0.

var sidebar = new StickySidebar('.sidebar', {minWidth: 300});

[axeloz]

Hello,

This is not working for me. On version 3.3.1

	new StickySidebar('.sidebar', {
		topSpacing: 20,
		minWidth: 300
	});

Am I doing something wrong ? Thanks

[smartpresslab]

Hi,

I tried the solution above but it doesn't seem to work on my end. Any other ways to disable this on mobile view?

[brianpurkiss]

I'm encountering the same issue. I've added the minWidth setting and I've configured the settings and even CSS according to the documentation.

I'm continuing to dig - I'll update here if I can find a solution. If anyone has any additional ideas, a heads up would be appreciated.

[brianpurkiss]

On sticky-sidebar.js line 500

if (window.innerWidth <= this.options.minWidth) {

If I change "this.options.minWidth" to a number, it works as intended.

Somewhere along the line "this.options.minWidth" isn't actually grabbing the minWidth default. It's set to 'false' by default, and even if I changed that minWidth declared variable to a number, it didn't work.

I now have a temporary fix, and hopefully this info can help the author fix the bug and/or others can use my hack to get theirs working.

[takamoso]

My solution:

/**
* Sticky Sidebar
*/

const sidebar = new StickySidebar('.sidebar', {
 containerSelector: '.wrapper',
 innerWrapperSelector: '.sidebar__inner',
})

/**
* Media Query
*/

const mediaQuery = matchMedia('(min-width: 768px)')
const mediaQueryHandler = mq => {
 if (mq.matches) {
   // enable
   sidebar.initialize()
 } else {
   // disable
   sidebar.destroy()
 }
}
mediaQueryHandler(mediaQuery)
mediaQuery.addListener(mediaQueryHandler)

[blackops-asif]

use this if($(window).width() >= 1024){ const sidebar = new StickySidebar('.sidebar', { containerSelector: '.wrapper', innerWrapperSelector: '.sidebar__inner', }) }