acch / scrollpos-styler Goto Github PK

First of all, nice work!
However I have a simple (maybe stupid) question:

Say that on a page, I have a header and a navbar and I want to style those differently upon scrolling.

For example, when I scroll down 10px, I want the header to change color, while if I scroll down 10px I want the navbar to change height.

I understand how to use it with one element, you just type:

< h1 class="sps sps--abv">My Header< /h1 >

and you define the sps--abv to take place when the scrolling is happening.

However what class should I add to style my nav bar?
I can't write

< nav class="... sps sps--abv">....

Because I want to style sps--abv different for the navbar.

Thanks in advance, cheers!

Would it be possible to include a minified version of the script for the NPM package?

Cheers!

Hi,

Love it but encouter with scrollOffsetY.
ScrollPosStyler.init({ scrollOffsetY:200 });
It won't change the offet value,

can you help me on that ?

Many thanks

Hey,

using v0.7. When page is already scrolled down and i'm refreshing it, 'sps--blw' class doesn't show up mots of the times and only sometimes does.
With v0.6 everything works as expected.
Tested on my mac with Chrome, Safari and Firefox - all behave the same.
Anyone else has this problem?

.. would be awesome. Thanks.

I can't find how this is supposed to work...

import ScrollPosStyler from "scrollpos-styler";

ScrollPosStyler.init(); // Uncaught TypeError: init is not a function

As I understand it, the 'scrollOffsetY' is the scroll position in px from the top of the page to trigger the style. This is great, as you can find a position (say 150px) and when it scrolls past, it apply your style.

However, if your style changes the size of something, hides an elements, or so on, the trigger offset that you may want may move (ie: scrolling past a navigation menu).

Can we choose a HTML element ID and it can get the bottom offset of said ID, and anything scrolled passed the bottom of the element will trigger? A jQuery style example is:
var bottom = $('#bottom').position().top + $('#bottom').outerHeight(true);

Hey, Is there a way / option to apply the script inside a container with a scroller inside?
For example inside a modal the Window overflow is hidden so the scroll is depending of its container.
Unfortunately I didn't find that the script is working for this kind of configuration... any Idea?

Thank you for this good script!

everything is good in chrome.
i can not run same project , in mozila firefox ,
i scroll down , my side bar dont scroll to down , and scroll bar get more shorter and shorter ,
but page dont scroll down!

I am using bootstrap 4 and as they recommend, for the function 'affix' I am using your script.

Before discussing my problem, I tell them that I had a problem and resolved.
You have not exemplified use your code with a column (not using the whole width), I have done, and when the property applies 'position: fixed' entire structure is disarmed. I have solved this code in my script.js my theme.

$(function() {
  var sideBarNavWidth = $('.parent-div').width() - parseInt($('.sps').css('paddingLeft')) - parseInt($('.sps').css('paddingRight'));
  $('.sps').css('width', sideBarNavWidth);
});

example: https://jsfiddle.net/0vL1ccfn/2/

Now my question specifically.
Affix function in bootstrap 3 has the offset: {bottom:}

As replicate this function in your script?

Is it possible to add a bower.json file and have this registered?

• Setup a live version of the demo (e.g. hosted on GitHub Pages)
• Add at least a minimal CONTRIBUTING.md
• Mention the license in the README
• Include the version number in the JS file
• Tag a release
• Test that the plugin works properly when resizing the browser window
• Stop leaking variables (e.g. scrollPosY) into the global scope. Use an IIFE.
• Using getElementById seems overly restrictive. What if I want to style multiple elements?
  • Also, you might want to make an explicit initialization function. The current code doesn't let me style an element that was created after the initial page load.