Sticky Sidebar Jitters on Scroll - javascript

I implemented a sticky sisebar library that aims to be easy to use as you are free in setting up the sidebar and its CSS. The library only gives you an additional value as custom property (--push-down) you can use in CSS to push the sidebar to its current position.
The problem I'm facing is that the script causes massive jitters in the sidebar position on some devices. These do only occur on the first scroll - if you've scrolled through the site once, it's working fine.
I would like to know why that could be the case (and if it's possible to be fixed. If not I still want to find out what's happening here.)
Using throttle functions does not make a difference here, as described here: https://stackoverflow.com/a/44779316/6336728. I'm already using the suggested method of doing layout read on scroll and layout write with requestAnimationFrame.
I put the code of my GitHub repo in this CodePen to try it out quickly; only the JS part is relevant.

Related

Page Pilling or FullPage - How to make this scroll effect

I know that it is not a very precise question, but I do not know where to start, I have an example which is the objective design, however I cannot find any solution and / or documentation to help me make this type of layout.
More specifically this is the scroll effect that I want to do, http://modern8.com/d5-process/
It should be noted that I have already tried with FullPageJS and I have not been able to recreate it, if you can see the effect consists of applying fixed and relative position according to the scroll but as I indicate, I do not know where to start.
I really appreciate the help you can give me.
The effect is the same as in pagePiling.js but pagePiling.js uses snap scroll so you'll snap to each section. There's no scrollbar.
The closer you can get with fullPage.js is by using the paid Parallax extension with autoScrolling: false (to avoid snap) and placing the whole content of the section inside the fp-bg element.
There's an article about it here.
https://alvarotrigo.com/blog/how-create-tumblr-website-effect/

How to manage scrollbars as we want

In the website I am currently creating, I am using Angular 8 (not sure whether the component paradigm has an influence on my troubles with scrollbars).
Like most websites, I need to implement a scrollbar in case the data does not fit the screen. But as I added more and more components, I realized that the way I used scrollbars was confusing and I ended up not being able to implement the behaviour I wanted.
I looked on the Internet but most ressources explain how to customize scrollbars, which is not what I am looking for. The article explaining the few CSS overflow properties were not very useful as well, because I did not have what I wanted, even though I kind of have tried every possibility (at least most I could think of).
Do you have any piece of advice to manage scrollbars ? Good practices & so on.
Currently the behaviour I am trying to implement is the following :
I have a home component containing a navbar and a router-outlet. The navbar is actually overflowing (because of box-shadow and an icon).
The router-outlet contains (if on the right page) a sidebar on the left side which represent a list of emails, and the content on the right. I don't want a global scrolling because I would have a empty space above the sidebar (where the navbar should have been but is gone because of scroll). I would need a scroll for the sidebar, and a scroll for the content.
So if you have any ressource which could help me understand how to use these scrollbars and manage them elegantly, that would be super appreciated :)
Try this perfect-scrollbar which is used for Angular 8.

Alternative to Bootstrap Affix

Been working with Bootstrap for a little bit, but am working without it on a new project.
Was curious whether anyone knew of an alternative, easy-to-use plugin to Bootstrap's 'affix'.
I'm really just looking for an element to go to position:fixed upon a certain scroll point (ideally defined by an element), stop at a particular scroll point (ideally defined by a page footer).
Maybe jquery stickem plugin? As stated in their README
Make items sticky as you scroll, to a point.

Trigger function when element in view

I'm using https://github.com/peachananr/onepage-scroll to create a one pager and would like to trigger a function (a modal lightbox) when scrolling to a specific section.
I've tried a few different scripts (appear, waypoint) but so far have come up trumps. Not sure if it's got to do with the fact that onepage scroll isn't actually scrolling but moving the section into the viewpoint.
Any help would be highly appreciated!
You could make use of the callbacks the plugin provides.
Also, if you want to change for a more complete plugin such as fullPage.js, there you have the option scrollBar than when set to true will allow plugins such as waypoint or appear to work as expected.
The reason for it is detailed in fullPage.js FAQs:
Parallax, as well as many other plugins which depends on the
scrolling of the site, listens the scrollTop property of javascript.
fullPage.js doesn't actually scroll the site but it changes the top or
translate3d property of the site. Only when using the fullPage.js
option scrollBar:true or autoScrolling:false it will actually scroll
the site in a way it is accessible for the scrollTop property.
The same principle is applied to onepage-scroll but the difference is that fullPage.js provides a way to deal with it (scrollBar:true) and onepage-scroll doesn't.

rdio Player Footer Slider

Im trying to recreate the script that rdio (http://rdio.com) has created for their player footer. when you click on footer, a panel slides up nicely and to reveal more content. another example is by teehan lax; the top dropdown http://www.teehanlax.com/ but theirs doesn't support firefox properly.
I came across this snippet, http://www.dynamicdrive.com/dynamicindex17/dddropdownpanel.htm
But its not clean as rdio's or teehan.
any thoughts on library they might using?
We're just using basic CSS transitions, and adding and removing classes. The z-index of the bottom bar is set such that it appears in front of everything else, and the class changes control how the content is changed.
You can accomplish the same height changes with jQuery quite easily, as described here: https://stackoverflow.com/a/4965097/1309238

Categories