abouolia / sticky-sidebar Goto Github PK

When the page refreshed at bottom, the sidebar will stick way above the container bottom line. It seems the problem is this sticky sidebar calculated the page dimension before the images loaded. So when the images loaded (images on content, because my images on sidebar have fixed dimension while the ones on content designed to be responsive) this will make the page getting taller and sticky sidebar stuck above the bottom. When the screen resized, sticky sidebar will recalculate the dimension and will work correctly.

Not that this is a big problem because people won't refresh page while at bottom page, but maybe this can be perfected.

First, thank you for such a wonderful plugin! I was curious if you would be willing to replace the resize sensor with a native resize observer? There is a nice polyfill here. I can an add a PR, please let me know.

Is it possible to support the ES6 features of this plugin using vanilla js? i.e. no package managers/compiler/polyfill?

Some weeks ago I opened a PR that added the main attribute to the package.json pointing to src/sticky-sidebar.js. This way the package is usable with npm or similar package managers.

I now see that the value as changed to **dist**/stikcy-sidebar.js which renders it unusable with npm again.

The problem is, that only in the src/sticky-sidebar.js there is an export statement, exporting the StickySidbar class. This is crucial when you want to use it this package with require or import.

Please either set the attribute "main" in the package.json to src/sticky-sidebar.js again, or add an export statement to the dist/sticky-sidebar.js file.

Hello,

While testing a site I am building that includes sticky-sidebar, I noticed that I have issues tabbing through the page. It seems that once the focus enters the object tag created by the plugin, it gets stuck.

Adding a tabindex of -1 to the object tag seems to fix it. Just one question, do you foresee any issues by adding this attribute to the object tag?

Thanks,
Josh

• stickyClass (default: 'is-affixed') never removes:

  if( 'static' === affixType )   //  <-----  affixType === 'STATIC'
     this.$sidebar.removeClass(this.options.stickyClass);
  else
     this.$sidebar.addClass(this.options.stickyClass);

• affixEvent.type: "affix.STATIC.sticky", not "affix.static.sticky":

  var affixEvent = $.Event('affix.' + affixType.replace('viewport-', '') + StickySidebar.EVENT_KEY);

Hi

I get this error when trying to minify sticky-sidebar through UglifyJS within Webpack 3.10.
Unexpected token: punc ())

I use this version of babel:
"babel-preset-env": "^1.6.1"

The error only occurs when importing sticky-sidebar:
import "sticky-sidebar";

UglifyJS settings:
new UglifyJSPlugin({ beautify: false, mangle: { screw_ie8: true, keep_fnames: true }, compress: { screw_ie8: true }, comments: false }),

Error:
ERROR in stickySidebar-302051997b86aa81111e.js from UglifyJs Unexpected token: punc ()) [stickySidebar-302051997b86aa81111e.js:154,24] Child extract-text-webpack-plugin ../node_modules/extract-text-webpack-plugin/dist ../node_modules/css-loader/index.js??ref--2-2!../node_modules/postcss-loader/lib/index.js??ref--2-3!../node_modules/resolve-url-loader/index.js!../node_modules/sass-loader/lib/loader.js??ref--2-5!sass/style.sass: 2 assets error Command failed with exit code 2. info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command. make: *** [build-production] Error 1

Is this a known problem - or do I do something wrong here? :)

Jonas

I am trying to use sticky-sidebar in my webpack setup but I run into the following error:

sticky-sidebar.js:8 Uncaught TypeError: __WEBPACK_IMPORTED_MODULE_0_jquery___default(...)(...).stickySidebar is not a function

I have the following js file:

import $ from 'jquery';

require('sticky-sidebar');

export default function() {
$('.s-sidebar').stickySidebar({
topSpacing: 60,
bottomSpacing: 60,
containerSelector: '.s-main',
innerWrapperSelector: '[data-sticky]',
});
}

Could it be that I am using the wrong version when calling require()? I installed the NPM package but I see three versions and I cannot select which one to use. I already have my own version of jQuery running (see first line) so I need a "clean" plugin.

Let me know if you are aware of this issue and if you have a solution or need more details on my setup.

EDIT: code is not formatting properly, removed.

Hi there, thanks for your great work! Could it be that the NPM version of the script needs updating? It behaves weirdly, elements are 'flickering'...

https://abouolia.github.io/sticky-sidebar/#multiply-sidebars

$('#sidebar, #sidebar2').stickySidebar({topSpacing: 20});
$('#sidebar').stickySidebar('destroy');

=> #sidebar2 isn't sticky anymore.

Add the module name to the package.json because currently its missing and bundlers dont know what to do.

Please make it an UMD module. I can help you do this with Rollup for example, it will be quite easy actually as you dont have any dependencies.

Add minified version of the code.

Hi there,
I have a sidebar with a padding, which I (unfortunately) can't remove. This padding is causing the sidebar to move too far. See codepen:
https://codepen.io/Slind/full/EwVbPL

I would be grateful for any tips on how to resolve this.

I don't get it working

http://jsfiddle.net/zzp63pyr/

Apologies for not having more to go on at this stage, but something appears to be off on IE11. When I load examples/basic.html, I get no errors but the content disappears. (The error referenced in #21 fires when scrolling down the page, however.)

I'm not immediately able to see what's going on in the dev tools, but I suspect it might be related to the object. I'll investigate more tomorrow and add additional detail if I can find any.

Hi, i am using sticky-sidebar v3.3.1, it not working.
Can you check my code here
https://codepen.io/niti/pen/YeVvOo

I've noticed a bug when sidebar is in the bottom position (image 1) and it size is changed (image 2). Sensor detect changes, and update demensions (sidebarHeight and translateY) but styles not changes. Can you fix it?

https://abouolia.github.io/sticky-sidebar/examples/basic.html still creating inner-wrapper-sticky element
I found solution in 149 line - if( null !== this.sidebarInner ) should be: if( null === this.sidebarInner )

If I use

var stickySidebar = new StickySidebar('#sidebar-container');
stickySidebar.destroy();

I get this error on browser console

Uncaught TypeError: this.removeEventListener is not a function
at StickySidebar.destroy (sticky-sidebar.js:722)
at theme.js:1288
at dispatch (jquery-1.11.1.min.js:3)
at r.handle (jquery-1.11.1.min.js:3)

Could you please check? Thanks!

I need to disable sticky bar in mobile view. (<=768px). how can I disable sticky bar? also it should work when resize the window. ex: on ipad in landscape mode should work side sticky bar and when rotate it to portrait mode sticky bar should be disable.

Thank you very much.

@abouolia In this issue you asked @kiwimind if there is a padding or margin on the body or html mine has padding-top: 58px on the body and the footer is not pushing the sticky sidebar at the right moment(the sticky sidebar is overlapping with the footer). How do you account for this kind of cases.

Thank you in advance!

Is it possible to update options after init?

For example, the top spacing is set to 50 by default but I need to increase it to 100 when a custom event triggered in my page.

is there any fix for ie11? Sidebar isn't working at all. I'm getting white field over my content

This flickering or springing just happens once each time the sidebar arrive to its top after it reach bottom side, vise versa. This only happens on Firefox, on Chrome it works fine. And on Firefox, if smooth scrolling enabled this bug is gone, but a lot of people disabling this smooth scroll.

Here's the screen capture https://youtu.be/G10Ls_NPCRA
Maybe seems unnoticeable on your demo, but on real site with pictures on sidebar it really bothering.

This happens when the position changed from relative to fixed, but Firefox not changing it on time, a litle bit delayed, causing it to springing. You can't see this bug when the dev tool open, you have to close it. Is there any way to fix this? Thanks

Edit:
My screencapture video on Youtube got removed, here's another video of it https://streamable.com/swlfu

The sidebar width increases while scrolling. Here is the demo. https://codepen.io/sodbileg/pen/QazKEe

Heys, first thanks for the awesome work on this!

Context

I detected a small bug on the calculation. In lookalike "scrollable example" my sidebar was bigger that viewport by just a few pixels and got cropped ( didn't scroll through and affix bottom)

So a viewport with 500px height, a sidebar with 499px height with a topSpacing of, for example 100px, doesn't produce the "scrollable effect", because isSidebarFitsViewport() returns true

Current and Expected behaviour

(expected after code editing)

A Pen is available for testing. For this demo, just resize the window to something between 500px < x < 572px ( sidebar height + TopSpacing)

Fix

I didn't go through the entire codebase but, i assume that top and bottom spacing should be added to the equation depending on the this.scrollDirection.

/**
  * Determine whether the sidebar is bigger than viewport.
  * @public
  * @return {Boolean}
 */
isSidebarFitsViewport(){
let offset = this.scrollDirection === 'down' ? this.dimensions.lastBottomSpacing : this.dimensions.lastTopSpacing;

 return this.dimensions.sidebarHeight + offset < this.dimensions.viewportHeight;
}

Thanks once again!

Hey there, thanks for your plugin.
I am using it successfully with the desktop version of my project, but now I'm having problems with the mobile version (implemented with bootstrap) since it shouldn't work due to the different nature of the scroll usage.

Any suggestion how to selectively show the sticky sidebar depending on screen resolution?
Thanks in advance.

Once the sidebar docks at the bottom it is losing size, shrinking to a smaller size than its child elements.
This causes issues in cases where an onverflow: hidden is in use/required.

Is there any solution for this?

https://codepen.io/Slind/full/BwomrQ

I'm looking at version 3.2.0 of the NPM package for sticky-sidebar (currently at https://registry.npmjs.org/sticky-sidebar/-/sticky-sidebar-3.2.0.tgz) and I notice that the actual JavaScript files included are not version 3.2.0:

\src\sticky-sidebar.js is version 2.3.0
\dist\sticky-sidebar.js is version 2.3.0
\dist\jquery.sticky-sidebar.js is version 2.3.0

\dist\jquery.sticky-sidebar.min.js is version 2.2.0
\dist\sticky-sidebar.min.js is version 2.2.0

Is this intentional?

If container IS defined - it will be override with default (parent element).
https://github.com/abouolia/sticky-sidebar/blob/master/src/sticky-sidebar.js#L165

// If there's no specific container, user parent of sidebar as container.
if( null !== this.container )
    this.container = this.sidebar.parentElement;

Should be: null === this.container

Hi,

First of all your plugin is amazing! works really smooth and happy i found it!

One question though, when my sidebar is bigger then the viewport is there any way for me not to scroll the sidebar up but keep it fixed top the top of the screen and "cut" off the bottom lets say.

Thanks

Thanks for great plugin, but seems the documentation is out of date. Also you have a slip in code (section "Plugin Definition"):

if (data[config] === undefined && ['destory', 'updateSticky'].indexOf(config) != -1) {
                    throw new Error('No method named "'+ config +'"');
                }

You have 'destory', but must be 'destroy'.

Hi,

Thanks for a great plugin, it's mostly working very well.

I'm hoping that there's going to be a straightforward way around what I'm trying to accomplish, but so far I've been unable to find one...

When I've got a sidebar with a negative top (or margin-top) value, to overlap a header element, I'm unable to get this to work as expected.

I can amend the code to add in the value of this negative top, amending the colliderTop and colliderBottom values to match, but I'm getting some weird overlapping issue with the footer not pushing the element up.

Is there something else I can check to get this working? I've been unable to find anything regarding offsetting margins or positioning amendments.

Thanks

Hello, when I review the page in responsive size it continues to show how sticky, I think that responsive should not behave like this, any suggestions on how to solve this?

The jQuery plugin stopped working for me after this. Console errors state that stickySidebar is not a function.

I have add this code because when the window resized, the header navbar height changed.

$(window).on('resize', function() {
    console.log('window resize');
    $('.rd-sidebar').stickySidebar('destroy');
    $('.rd-sidebar').stickySidebar({
        containerSelector: '.rd-page-wrapper',
        innerWrapperSelector: '.rd-sidebar-inner',
        minWidth: 1000,
        resizeSensor: true,
        topSpacing: $('.rd-navbar').height(),
    });
});

When the window was resized the sticky menu destroyed successfully but when it re-activate, in the console window show me this.

TypeError: g.contentDocument is null sticky-sidebar.min.js:1:6965

Can i sticky only .sidebar__inner ?

Example:

<html>
	<body>
		<div id="main-content" class="main">
		    <div id="sidebar" class="sidebar">
		        
		        <div class="normal__content">
		            <!-- Content not sitcky goes here -->
		        </div>

		        <div class="sidebar__inner">
		            <!-- Content sitcky goes here -->
		        </div>
		        
		    </div>
		    <div id="content" class="content">
		        <!-- Content goes here -->
		    </div>
		</div>
	</body>
</html>

Hi Ahmed,

Maybe I do something wrong, but it seems like on mobile, sticky layer is always on the content. Is there any way to stop them for small displays?

Thank you.
Alexander

Hey, great plugin.
I saw you have done a V2.0, good job!
Now please do a tag and a release on github. It really helps users when choosing a library to see versions and so on.
If you are not sure how, just ask.

The function doesn't work properly. $element.prop('resizeListeners') property is not removed.

 var index = resizeListeners.indexOf(callback);

is always -1.
Maybe it connected with not correct work of addResizerListener.

In https://github.com/abouolia/sticky-sidebar/blob/master/sticky-sidebar.js#L551 IE11 crashes because no variable data is present in the scope. Did you mean 'data', or maybe this should be removed completely? There's no mention of data prop anywhere in the code…

If possible it would be nice to be able to specify the innerWrapperClass via data-attributes too.

Please, can you make the example with stickySidebar at the right column and content at the left. Like at this page - https://abouolia.github.io/sticky-sidebar/examples/basic.html, but vice-versa. Thanks in advance.

I have a bottom margin on the body that is causing the sidebar to flicker up and down when it reaches the footer. The margin is necessary to give space to a sticky footer that is absolutely positioned. Can someone please help?

Hi!
Good lib, thanks!
But after npm install --save sticky-sidebar and putting require('sticky-sidebar'); in my code, gulp (on building project) says: cannot find module 'sticky-sidebar'.
I think, you need to put main directive to your package.json file.

Hi. Great plugin. I'm using sticky-sidebar.min.js.

Everything seems to be working fine in Chrome, except I'm experiencing a little scroll flicker as the .inner-wrapper-sticky div changes from fixed to relative when reaching the end of the container element.

On the latest version of Firefox (55.0.3), the resize sensor does not seem to be working properly. I went ahead and tested this on the basic example of the plugin - https://abouolia.github.io/sticky-sidebar/examples/basic.html. Upon adding content to the sidebar and scrolling to bottom of the page, the sidebar crosses over into the footer.

Also, in IE 11 (11.1593.14393.0), the console is showing a 'SCRIPT445: Object doesn't support this action' error, in regards to CustomEvent initialization.

Please advise. Thanks!

The destroy method doesn't seem to work quite correctly on IE or Edge. The instance doesn't get destroyed.

Version: 3.2.0

Steps to reproduce:

1. Go to basic demo page with IE11 or Edge
2. Scroll down a bit, so that the sticky column sticks and follows
3. Open developer console and type a.destroy()
4. Sticky column will unstick and go back to page top. Instance seems to be destroyed.
5. Scroll back to the top.
6. Scroll down again. Sticky column follows again, as if it was reinitialized.

This issue only happens once in a while, but does seem to occur in all browsers. When scrolling to the bottom of the page, the fixed sidebar will sometimes flicker rapidly.

Here is a screencap of the issue. The sidebar actually flickers a lot faster than in that video, but I guess video couldn't capture it the speed.

I am using this plugin in conjunction with ResizeSensor.

It seems to be easier to recreate while dev tools/inspector is open. The issue is occurring on this site.

Any help on this would be much appreciated, thanks

When images are lazy loaded (loaded only when inside the viewport), neither resizeSensor nor using .updateSticky() causes the sticky element to update. If the window is resized, it then fixes itself.

Currently, you can see the issue here: http://test.travelalaska.com/Things%20To%20Do/Adventure.aspx

*Edit: see comment below. This link won't show the non-working version. *

Here's a screenshot from that page, where the images load after scrolling. I'm using updateSticky() on both of the right columns when any image is loaded. The resizeSensor element is the correct height, but the sticky elements are not sticking the full way down.

Steps to reproduce:

• Open https://abouolia.github.io/sticky-sidebar/
• Observe scrollable sticky element example
• Scroll to bottom of example
• Scroll slowly towards the top of the example
• Observe the sidebar

Here is a video that demonstrates the problem.
scrollable-sticky-element.mov.zip

I'm looking at the code right now - if I find a fix I'll open a PR.