rgalus / sticky-js Goto Github PK

I am noticing an issue with the width/height calculation for container elements and how it translates to the static width after becoming sticky.

If the container element has padding the sticky element is still set to the full width of the element. This causes layout issues for the sticky element.

Could you update your plugin to at least have the following calculation be an option?

  var styles = window.getComputedStyle(element);
  var padding = parseFloat(styles.paddingLeft) +
                parseFloat(styles.paddingRight);

  return element.clientWidth - padding;
}```

Thanks.

It is possible to dynamically change the height of the sticky element, please? If I change the height, it overflows the wrapper.

When the content is too tall for the screen, the sticky destroys itself.

This makes sense as the default behavior because otherwise the content would get cut off at the bottom of the screen and be inaccessible.

There is another way of avoiding this though.

.sticky {
  max-height: 100vh;
  overflow: auto;
}

This means that when the screen is too short to fit the content the content in the sticky container will become scroll-able.

My issue is that sticky-js will destroy itself when the screen gets too short even though there is no risk of the content getting cut off.

If there were a setting that allowed you to disable the self-destruction when the screen height is too short, that would fix the issue.

Hello @rgalus!

I have a problem in Safari 11.0.3 (macOS 10.13.3):

HTML (I'm using Bulma CSS Framework 0.6.2):

<div class="columns">
  <div class="column">
    <!-- my content here -->
  </div>
  <div class="column is-4" data-sticky-container>
    <div class="sticky-block" data-margin-top="20">
      <div class="sticky-block__inner">
        <!-- my sidebar here -->
      </div>
    </div>
  </div>
</div>

JavaScript (packed via Webpack 3.10):

import Sticky from 'sticky-js'

const sticky = new Sticky('.sticky-block')

I don't know why, but this lags/jumps only in Safari when I scroll page via touchpad (MacBook Pro 2015). I already tested in latest FireFox, Chrome and MS Edge (Windows 10) — everything is okay.

Also, data-sticky-wrap option doesn't work on my case.

Would be great to solve this problem or get understand why it makes! 👍

I found memory leaks related to bounded this in event listeners attached to window.
PR: #59

There's a typo causing stickyFor to malfunction:

i need a clear example with options to see the syntax..

With a 100% width element (menu bar) when on a mobile device, if you rotate the screen the menu bar stays the same width as before the window resize. Also if resizing a window on desktop same issue.

Is there a way to recalculate the width or set it to be always 100%?

Thanks much

Seems like none of the attribute values get updated on resize when using the sticky-wrap option. This makes it impossible to use on responsive websites.

Also, attributes are duplicated on original element and sticky-wrap element - is this intentional?

I think babel transformed your dist files in a way they might not work in every environment.

I guess the issue is, babel transformed this to (void 0) in the current sticky.compile.js

It worked in the previous commit.

I think you could evaluate your babel configuration.

IE11 gives SCRIPT1002 where the sticky class is iniatiated

Hey,

Thanks for the script, working well. The only thing being is with the parent boundary when the page is scrolled reasonably quickly the minus top positioning doesn't update quick enough and you see the 'edge' of the sticky element beyond the parent (as both have the same background colour, but are different widths). Please see below for an exaggerated example.

Seeing as we require it to stick within the edge/bottom of the parent, perhaps using absolute/bottom positioning would be a good solution? Hopefully a welcome suggestion, unless there's another reason for not using this!

Thanks again,
Tom

I'm trying to import sticky-js as an ES6 module.

import Sticky from 'sticky-js';

var sticky = new Sticky('.foo');

but it doesn't work. Any suggestions?

Hello,

I think a good test case is better than any explanation:
https://jsbin.com/cetopukadu/edit?html,css,js,console,output

Any ideas how to fix that?

Thanks!

I've noticed that removeStyle() doesn't remove the position property in IE 11 - 9.

I've only tested this lightly, but the following seems to work.

  removeStyle: function removeStyle(el, properties) {
    this.iterate(properties, function (property) {
      if (property === 'position') {
        return el.style[property] = '';
      } else {
        return el.style[property] = null;
      }
    });
  },

It would be great if you could allow the update/change of the margin top position. I have a sticky element that needs to stick to a header, but this header's height is smaller on mobile.

Thanks,
Tom

Hi,
I just started using sticky-js and noticed a trouble on both Chrome and Edge.
When my list of inline-blocks, containing text and with a floating point width (e.g. 873.45px) is read in getRectangle, it's floored (873px), pushing my last block on a new line.
Looks like that element.offsetWidth element.clientWidth, element.scrollWidth are floored.

For some reason my .sticky don't stop when it approaches the end of the section, it overlays the footer instead.

https://plutio.com/features

Am I doing something wrong? as it should do that automatically.

$(window).on('load ready resize', function () {
sticky = new Sticky('#sticker');
});

In the demo file, I found this code:
var sticky = new Sticky('[data-sticky]', {});
I assume the options go in between the curly braces {}, but i'm not sure how to get the options to work.

Example that does not work:
var sticky = new Sticky('[data-sticky]', { "data-sticky-wrap": true, "data-sticky-for": 960, "data-margin-top": 300 });

Adding or removing quotes around the option names won't work.
Thanks

Hi there, great library. Thanks for it!!

Sticky-js is implemented, but when I scroll down the page the right element (description) shoots up 10 pixels or so, and then doesn't scroll down with the user.

I've implemented the library into a Shopify store located here -
https://insight-ultrasound.myshopify.com/products/convex

Here is a basic mockup of the page container -

  <div class="grid product-single" data-sticky-container>
    <!-- IMAGE STUFF IS HERE, it should stay put -->
    <div class="grid__item desktop--one-half product-single__photos">
    </div>

     <!-- I WANT THIS TO SCROLL DOWN WITH THE PAGE -->
    <div class="grid__item desktop--one-half" data-sticky>
      <div class="product-single__meta">
         <p> Lorem ipsum </p>
      </div>
    </div>
  </div>

Essentially the page is in 2 columns.
Left side is product photos, right side is product description. I want the description to scroll down with the user.

Any ideas here? I think it must be the container and parent vs child layout of my page, but I've tried a few different configurations and can't get it to work.

Thanks so much!

Hi,

I Like your plugin a lot. jQuery-free single purpose libs are my favorite :)

I am using bootstrap 4 alpha 4 with a simple dropdown in a sticky div
and as long as the div is not-stickified (no scrolling done yet) there seems
to be some z-index problem. that can be pointed down to this style which is added to the div.

transform: translate3d(0px, 0px, 0px); 

Once I remove that manually the overlay problem seems fine. Don't know if that has some purpose.

Here is what the problem looks like:

I tried setting z-index on the sticky container with no luck.

Could I somehow fix this with some workaround?

thx

I'm showing / hiding a sidebar that I've made sticky. It initializes ok and is sticky, when I resize the window and hide the sidebar — then resize the window bigger again, the sidebar breaks and is no longer sticky. Using stickyFor does not make it work (does not recreate it)

Hello,

I want to use your library with basicScroll.

I need a way to know when sticky-js is ready ? Is this ever possible or do you plan on adding a ready callback ?

Thanks

Go to https://rgalus.github.io/sticky-js/ and scroll down so that the sticky elements are triggered.
Refresh so that the browser has the position as before and see that the sticky elements are not sticky.

Is there a fast solution?

When we use the function Destroy() the wrap (span) is not removed and another wrap (span) is added when I call it

Thanks for the amazing plugin!

Any chance of updating this with the Intersection Observer vs. window scroll event in the future?

Thanks!

First of all, great library, thanks for your work!

There is one thing that is missing IMHO - a method for destroying the sticky element. What I mean by that is removing all listeners. This is very useful for SPA. I use it in Angular 1 for example.

For people that needs workaround right now:
Let's say you still have the reference to the DOM element (element) so all you need to do is:

window.removeEventListener('scroll', element.sticky.scrollListener);
window.removeEventListener('resize', element.sticky.resizeListener);

I've just found this plugin and immediately liked it (maybe because of its similarity to foundation 😄)

However when seeing all the open PRs (some almost 3 years old) I'm wondering if this project is still maintained.
@rgalus do you have plans to continue working on this?

There is need to have event hooks for when the sticky class is added and when it is removed

I like this library, but it would be great if there is a CDN link provided. :)

The features list for the plugin has the following line:

It can be sticky to the entire page or to selected parent container

However, I cannot seem to find any documentation that states how to define the selected parent container when instantiating the stickyjs instance.

A pointer in the right direction would be appreciated!

I have a weird one, but I'm sure it's common problem.

I have a bar that becomes sticky at a sticky point, the problem is that my bar has a 15px lower margin. When the element becomes stuck, and parent container doesn't take on that margin, so the margin is lost (causing lower elements to move up the 15px lost).

I've hacked around this by manually adding a class to the parent after the sticky() is initialised. Another work around is to add the margin to the element below the sticky bar, but that causes other issues.

Would it be possible to able to a class to the containing element when it's created?

I'm not sure if this is a feature or a bug, but I'd like to disable or at least fine tune it. Even on your demo page this occurs. As I scroll down the page the element will eventually unsticky itself and get scrolled away. Inspecting the element shows me that the top attribute will hold steady as I scroll down but then suddenly drop and keep dropping past zero into negative values the further I scroll.

I would like to add a class onto the item when it is stuck. Can you think of a way or maybe add a class when it is active?

Hi, first of all thanks for creating a such good tool!
I'm working on a project with vue.js and im using your library. but i want to follow the good principles and use your lib as a directive, the problem now is that vue directives functions receive the elements as an HtmlElement object and the Sticky constructor only accepts element selector.

Is there a way of doing it? I cant figure it out

I'm using Ember.js and instantiating a Sticky object in a component lifecycle hook that is fired after the element is inserted in the DOM. I'm not getting any sticky behavior though and the marginTop option seems to drive whether the element has position fixed and is super sensitive (if the value is less than a certain amount the stickiness is never activated.

Do you or anyone have an example of using this library with a JS framework or library like Ember.js or React?

var sticky = new Sticky('[data-sticky]',{});
in DOM console put these with all necessary attributes
sticky-js not respond any event and function and no changes persists.
i'm using Chrome browser.

Firefox developer edition displays the following warning in the console

This site appears to use a scroll-linked positioning effect. This may not work well with asynchronous panning; see https://developer.mozilla.org/docs/Mozilla/Performance/ScrollLinkedEffects for further details and to join the discussion on related tools and features!

Hi, I noticed that sticky-js doesn't work when it is in a container with overflow-y: auto.

Codepen here: https://codepen.io/acespace90/pen/XwMGqe

Any suggestions?

Would be nice to be able to specify what element to stick to :)

Hi there, finally got this working.

Is there any way I could do something like Sticky-kit's 'stick_in_parent()' function?

'Sticky elements taller than the viewport can scroll independently up and down, meaning you don’t have to worry about your content being cut off should the sticky element be too tall or the user’s resolution too small.'
Can be seen about halfway down the page here - http://leafo.net/sticky-kit/

I've got a sticky section on my page, but if the height is too large it won't scroll at all. Client really wants this. Any ideas?

Sticky navbar not activates on first time, only activates after resize events. But when i calling this.onResizeEvents(element) manually in renderElement function, it seems working.

Hey there. I didn't find any way to solve this problem (recognizing the element sticky status, if it's sticky or not). I did a minor change in the code to add a class when the element is sticky ('.sticky-active') or not.

It's easy to workaround that (by setting top:1px; position:relative;) but i don't see the point of that use case. Is it possible to remove it ?

Hello! Thanks for a good piece of functionality.

I add it via requrejs main config like this:

require.config({
    paths: {
        'sticky': '../../node_modules/sticky-js/dist/sticky.compile', // sticky menus etc.
    }
});

And it breaks at the RequreJS module wrapping stage with the following browser console error stack:

Uncaught TypeError: Cannot call a class as a function
    at _classCallCheck (script.js:4235)
    at Sticky (script.js:4259)
    at main (script.js:2679)
    at callDep (script.js:2537)
    at main (script.js:2670)
    at callDep (script.js:2537)
    at main (script.js:2670)
    at callDep (script.js:2537)
    at main (script.js:2670)
    at callDep (script.js:2537)

Can you check if it is possible to make it work?
Thanks.
Val

Demo

Scroll down slowly to see the effect.

I have this

var Sticky = require('sticky-js');
var sticky = new Sticky('.sticky-item');

And it worked before updating but now it's throwing Cannot call a class as a function via sticky-compile.js

  function Sticky() {
    var selector = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
    var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};

    _classCallCheck(this, Sticky); <-- line