Title: For responsive website
Last modified: August 20, 2016

---

# For responsive website

 *  Resolved [Lindsey Bugbee](https://wordpress.org/support/users/lindseybugbee/)
 * (@lindseybugbee)
 * [13 years, 4 months ago](https://wordpress.org/support/topic/for-responsive-website/)
 * Hi,
 * I really like this plugin. The only issue I have is that my website is responsive,
   so when the screen width decreases my sidebar moves to the bottom of the content.
   This break the plugin.
 * Is there an easy way to tell the plugin to do nothing and reset the original 
   CSS if window.innerWidth < (some threshold)?
 * Any help is welcome!
 * [http://wordpress.org/extend/plugins/strx-magic-floating-sidebar-maker/](http://wordpress.org/extend/plugins/strx-magic-floating-sidebar-maker/)

Viewing 9 replies - 1 through 9 (of 9 total)

 *  [Gaëtan](https://wordpress.org/support/users/gaetanlf/)
 * (@gaetanlf)
 * [13 years, 4 months ago](https://wordpress.org/support/topic/for-responsive-website/#post-3459480)
 * Hi !
 * I had the same issue and tried this, just using css :
 *     ```
       @media screen and (max-width: 767px) {
         .left-sidebar {
           top: 0 !important;
         }
       }
       ```
   
 * It just disables movement by using css3 media query to overwrite the “top” property
   when screen is under a certain width. It’s easy and seems to work fine… But I
   haven’t tried on mobile devices yet.
 *  Thread Starter [Lindsey Bugbee](https://wordpress.org/support/users/lindseybugbee/)
 * (@lindseybugbee)
 * [13 years, 4 months ago](https://wordpress.org/support/topic/for-responsive-website/#post-3459494)
 * That worked like a charm! I also had to constrain the left property.
 * [@media](https://wordpress.org/support/users/media/) screen and (max-width: 959px){
   #
   sidebar { position: relative !important; left: 0 !important; top: 0 !important;}}
 * Thanks for your help!
 *  [Gaëtan](https://wordpress.org/support/users/gaetanlf/)
 * (@gaetanlf)
 * [13 years, 4 months ago](https://wordpress.org/support/topic/for-responsive-website/#post-3459502)
 * Nice! You welcome. 🙂
 *  Thread Starter [Lindsey Bugbee](https://wordpress.org/support/users/lindseybugbee/)
 * (@lindseybugbee)
 * [13 years, 3 months ago](https://wordpress.org/support/topic/for-responsive-website/#post-3459593)
 * I realized there is a second part to this story. I want to reset everything regarding
   the function when the screen width changes. For example, let’s assume the user
   is reading my blog in his/her iPad. The floating sidebar function will assign
   values to the initialPos variable in the js file. Now, if the user turns his/
   her iPad to landscape mode, the sidebar won’t adjust automatically, until the
   user scrolls up or down, assuming I have the dynamic top option checked. I don’t
   want the user to have to scroll to fix the issue. I want this to be automatic.
 * Basically, if there is a window resize event, reset completely the function. 
   I tried calling the function again upon a window resize or adding an if statement
   in the js file to adjust the initialPos but this didn’t work.
 * Does anyone have any ideas?
 *  Thread Starter [Lindsey Bugbee](https://wordpress.org/support/users/lindseybugbee/)
 * (@lindseybugbee)
 * [13 years, 3 months ago](https://wordpress.org/support/topic/for-responsive-website/#post-3459596)
 * To answer my own question if somebody else has this issue, I added to the js 
   file:
 *     ```
       console.log('width in onScroll: ' + lastWidth);
       if ($(window).width()!=lastWidth) {
       	console.log('width changed...');
       	if ($(window).width() > 940) {
       		sidebarTop = 60;
       		$s.css({
       			position: 'absolute',
       			left: 690 + 'px',
       			top: sidebarTop + 'px'
       		}).find('.widget').css('position', 'relative');
       		lastScrollY = -1;
       		console.log('top=' + t + ', scrollY=' + scrollY);
       	}
       	lastWidth = $(window).width();
       }
       console.log('sidebarTop=' + sidebarTop + ', offsetTop=' + offsetTop);
       ```
   
 * _[Please post code between backticks or use the code button. Your posted code
   may now have been permanently damaged by the forum’s parser.]_
 * The values of 690 and 60 are hardcoded to my site. The console lines are for 
   debug purposes.
 *  [Savage3939](https://wordpress.org/support/users/mirluin/)
 * (@mirluin)
 * [12 years, 12 months ago](https://wordpress.org/support/topic/for-responsive-website/#post-3459705)
 * [@lindseybugbee](https://wordpress.org/support/users/lindseybugbee/)
 * Hi, is it possible that the code you posted is incomplete?
    I tried it but I 
   got this error: “lastWidth is not defined”
 * Thanks in advance 🙂
 *  Thread Starter [Lindsey Bugbee](https://wordpress.org/support/users/lindseybugbee/)
 * (@lindseybugbee)
 * [12 years, 12 months ago](https://wordpress.org/support/topic/for-responsive-website/#post-3459706)
 * Here is the code in my file:
 *     ```
       //console.log('strx-floating-sidebar/js/main.js loaded ok');
       strx = {};
       if (typeof console === 'undefined') {
         console = {
           log: function () {},
           dir: function () {}
         };
       }
   
       (function () {
       	strx.start = function (opts) {
       	jQuery(function () {
       		opts = jQuery.extend({}, {
       		content: '#content',
       		sidebar: '#sidebar',
       		wait: 3000,
       		debounce: 500,
       		animate: 3000,
       		debug: 0
       	}, opts);
   
       	setTimeout(function(){
   
       	var $w = jQuery(window),
       		$c = jQuery(opts.content),
       		$ss = jQuery(opts.sidebar),
       		$b = jQuery('body');
   
       	if ($c.length && $ss.length) {
       		$ss.each(function () {
       			(function ($s) {
       	          	// console.log($c.height() - $s.height());
       	            if ( $c.height() - $s.height() > opts.minHDiff || opts.dynamicTop) {
                       $s.parent().css('position', 'relative');
   
                       var initialSPos=$s.position(),
       					initialSOff=$s.offset();
   
                       //Recupero Top e Left iniziali di tutte le sidebar prima di iniziare il posizionamento
                       setTimeout(function(){
       					if ( $c.height() > $s.height()) {
       	                $s.css({
       						position: 'absolute',
       						left: initialSPos.left + 'px',
       						top:  initialSPos.top  + 'px'
       	                }).find('.widget').css('position', 'relative');
       					}
       					else {
       					$s.css({
       						position: 'relative',
       						left: 0 + 'px',
       						top:  0  + 'px'
       	                }).find('.widget').css('position', 'relative');
       					}
   
       					var lastWidth = $(window).width();
       					var lastScrollY = -1,
       						sidebarTop = initialSPos.top,
       						offsetTop = initialSOff.top - sidebarTop,
       						maxTop = sidebarTop + $c.height() - $s.outerHeight(),
       					onScroll = function (e) {
       						if ($s.height() > $c.height()) {
       							$ss.css({
       								position: 'relative',
       								left: 0 + 'px',
       								top : 0 + 'px'
       							}).find('.widget').css('position', 'relative');
       							return;
       						}
   
       						if ($(window).width()!=lastWidth) {
       							if ($(window).width() > 940) {
       								sidebarTop = 60;
       								$s.css({
       									position: 'absolute',
       									left: 690 + 'px',
       									top: sidebarTop + 'px'
       								}).find('.widget').css('position', 'relative');
       								lastScrollY = -1;
       							}
       							lastWidth = $(window).width();
       						}
   
       	                    var scrollY = $w.scrollTop(),
       							t, scrollingDown = scrollY > lastScrollY;
   
       	                    if ((scrollingDown && scrollY > sidebarTop + offsetTop && scrollY + $w.height() > $s.position().top + $s.height() + offsetTop - sidebarTop) || (!scrollingDown && scrollY < $s.position().top + offsetTop)) {
       							if (e.type === 'scroll' && ($w.height() > $s.height() || !scrollingDown)) {
       							//Scorrimento verso l'alto
       							t = Math.max(sidebarTop, scrollY - (offsetTop) + (~~opts.offsetTop));
       							} else {
       							//Scorrimento verso il basso o resize
       							t = Math.max(sidebarTop, scrollY + $w.height() - $s.outerHeight() - offsetTop - (~~opts.offsetBottom));
       							}
   
       							t = Math.min(t, opts.dynamicTop ? (sidebarTop + $c.height() - $s.outerHeight()) : maxTop);
       							$s.stop().animate({
       								top: t + 'px'
       							}, ~~opts.animate);
       							/*if (opts.debug) {
       							window.scrollY = scrollY;
       							console.log('top=' + t + ', scrollY=' + scrollY);
       							}*/
       	                    }
       	                    lastScrollY = scrollY;
       					};
       	                if (opts.debounce && Function.prototype.debounce) {
       						onScroll = onScroll.debounce(opts.debounce);
       	                }
   
       	                $w.scroll(onScroll).resize(onScroll);
       	                onScroll({
       						type: 'scroll'
       	                });
   
       	                $w.scroll(function(){
       						$s.stop();
       	                });
                       },0);
   
       	            }
       	        })(jQuery(this));
       	    });
   
       	}
       	else {
       		if ($c.length === 0) {
       			console.log(opts.content + ' not found');
       		}
       		if ($ss.length === 0) {
       			console.log(opts.sidebar + ' not found');
       		}
       	}
           }, opts.wait);
           });
       	};
       })();
       ```
   
 * I don’t use this plugin anymore, but it worked pretty well last time I checked.
   It was completely responsive. I think you need to check the option dynamicTop
   in its settings menu.
 * Also, you may need to change some values in this code. 940 is the width of my
   content + sidebar, 60 is the height at which my sidebar started, and 690 is the
   width at which it started.
 * I’m not sure, but I think you will also need the CSS above. Good luck!
 *  Thread Starter [Lindsey Bugbee](https://wordpress.org/support/users/lindseybugbee/)
 * (@lindseybugbee)
 * [12 years, 12 months ago](https://wordpress.org/support/topic/for-responsive-website/#post-3459707)
 * P.S. I just remembered I removed a lot of the debug options from the php file
   and this script, so that’s the reason it is a bit shorter. Just FYI.
 *  [Savage3939](https://wordpress.org/support/users/mirluin/)
 * (@mirluin)
 * [12 years, 12 months ago](https://wordpress.org/support/topic/for-responsive-website/#post-3459708)
 * Thanks a lot Lindsey!
    My layout is fluid so I think I need to translate pixels
   in percentages, somehow. 🙂

Viewing 9 replies - 1 through 9 (of 9 total)

The topic ‘For responsive website’ is closed to new replies.

 * ![](https://s.w.org/plugins/geopattern-icon/strx-magic-floating-sidebar-maker.
   svg)
 * [Strx Magic Floating Sidebar Maker](https://wordpress.org/plugins/strx-magic-floating-sidebar-maker/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/strx-magic-floating-sidebar-maker/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/strx-magic-floating-sidebar-maker/)
 * [Active Topics](https://wordpress.org/support/plugin/strx-magic-floating-sidebar-maker/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/strx-magic-floating-sidebar-maker/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/strx-magic-floating-sidebar-maker/reviews/)

## Tags

 * [Fixed sidebar](https://wordpress.org/support/topic-tag/fixed-sidebar/)
 * [floating sidebar](https://wordpress.org/support/topic-tag/floating-sidebar/)

 * 9 replies
 * 3 participants
 * Last reply from: [Savage3939](https://wordpress.org/support/users/mirluin/)
 * Last activity: [12 years, 12 months ago](https://wordpress.org/support/topic/for-responsive-website/#post-3459708)
 * Status: resolved