The docs for Google Analytics: https://developers.google.com/analytics/devguides/collection/analyticsjs/#the_javascript_tracking_snippet
has a fantastic scroll effect, where the left sidebar is the fixed height of the page, then increases in size as you scroll down, then shrinks down as you get to the bottom.
you can also scroll this sidebar independently of the main content...
is there an existing solution (or even a collection of solutions I could chain together), perhaps via jquery plugins, to achieve something similar?
right now i've been able to achieve something similar to MSDN: https://msdn.microsoft.com/en-us/library/mt607689.aspx
by affixing the content on scroll (similar to bootstraps affix component) but the height of this container extends beyond the height of the browser so we have to scroll to the bottom to make the sidebar scroll.
the solution on the google analytics page is much more elegant because they scroll independently. any existing solution would be useful, and I'd like to know if there is one before I try to build it myself :)
Have you tried http://rocha.la/jQuery-slimScroll/?
They appears to work the same way as the reference page.
Related
I used display:none for one of sections so its visible only on devices with less than 576px. And anchors are wrong, and scrolling jumps from second to first section. How to fix it?
This is the
page
According to GitHub's plugin docs, this is still an open issue that needs to be fixed by the lib's developer. What he mentioned as a workaround is destroying fullpage.js and reinitializing it again without the faulty section. (Whenever you are going to do that is up to you to find appropriate, whether on screen width resize, page loads, etc etc)
I have a requirement to add a scroll bar that is always visible and which can be directly used by mouse or touch to scroll the contents of a large ListView.
The normal way of scrolling on mobile devices is by swiping up or down. During the scroll process there will be a small scrollbar visible but that scrollbar disappears and even while visible it can't be used to do any actual scrolling.
After much searching I could not find what I needed.
So my question is: Is there a way to make the scrollbar in the ListView fully usable or should I disable it and create a separate scrollbar which I will need to keep in sync. If so how?
For a functional example of something I would be working with see: https://fiddle.sencha.com/#fiddle/124j
I want to do an independent scrolling between 3 columns on a Wordpress site, but I really don't know how can I do that, and what is the better langage to use (JS, CSS?).
I have two sidebar with content, you have to scroll to see the last content in the sidebars.
I have a container at the center with news and when you are at the bottom, you have an infinite loading.
What I want to do it's when user scroll on the page, the sidebars and the news content are scrolling, but, when there are no more contents in the sidebars, they become "fixed" and just the news container is scrolling.
Like this :
Can you help me please ?
All you'd simply have to do to create an independant scrollbar for each of these is to set an overflow: scroll; property on the right selectors however, the downside is that just setting overflow could potentially cause a horizontal scrollbar too.
There is an unstable yet broadly adopted alternative which is overflow-y - overflow-y works like overflow but only vertical.
So setting overflow-y: scroll; will allow at best a vertical scrollbar to appear.
Doing this with JS is not recommended as it will clog your scroll which CSS doesn't.
The reason JS clogs your scroll is because in JS you'll have to listen for a scroll event, when the user scrolls these are fired usually multiple times per second, and with 'multiple' I actually mean 10 to 100 times. So imagine executing even a little bit of code, if that code is bugged anywhere you can say goodbye to your users because they will have such slow scrolling.
The mechanism for having custom scrollbars on a page exists but it's not widely adopted either - just because of this reason. The concept was good but it was just detrimental to the end-user.
The downside for CSS scrollbars is that they will default to the browser scrollbar which will be different in every browser and unfortunately styling these is implemented differently across all of them and quirky at best.
NOTE
If your website is fullscreen and all three columns scroll independently the user will have to do 3 times the amount of scrolling before he or she sees ALL the content on the page, this might not be what you want. Also if you're stacking these constructions vertically on the same page you'll only be able to scroll down further once you've scrolled past the end of atleast one block of content.
This will agitate your users when they don't want to see the top content but just the bottom content for example.
IMO I wouldn't go for a solution like this if my website is full-width since it will annoy your users but then again, I do not know the entire context of what you're trying to achieve.
Good luck!
I am trying to make a sidebar div sit below a header secion, when you scroll down, it will turn into a fixed div and stay fixed until the bottom of the page, once it reaches a footer section, it will stick to the top of it and allow me to scroll down the footer area without seeing it anymore.
There is a perfect emaxple of what I am trying to describe on this site http://madebymany.com/blog/apples-aesthetic-dichotomy
In the left column, it sticks as you scroll down and then un-sticks at the bottom
I am looking for a good way to do this, hopefully an example or tutorial, I realize it is done with javascript changing the divs properties. I have tried searching but all I could find was old outdated articles over 5-6 years old and they only did half the job. I am not sure even what to call this feature?
That web site is using jQuery Scroll Follow.
Note that according to the jQuery Scoll Follow web site...
The Scroll Follow object will remain inside its immediate container.
... hence why the scrolling stops before the comments on your example web site; the element which is scrolling on the page is constrained inside of its parent <aside> element. You can check out the example.
You basically handle the page's scroll event and move the box around.
Most tutorials require jQuery, so get familiar with it. If you want a tutorial, here's a working one: http://designwoop.com/2011/01/how-to-create-a-jquery-sticky-sidebar/.
Why not dissect the code of that website too?
I was looking at an issue in JIRA (e.g. here, an issue in JIRA 4) and I noticed JIRA 4 has some interesting scrolling behaviour, where when scrolling down with the main browser scrollbar,the jira header scrolls up out of way, then the issue title stays fixed at top, then the rest of the issue continues to scroll. So the issue title is always visible.
There isn't an extra vertical scrollbar. Its all scrolled via the main browser scrollbar. So its either css or javascript magic! Any idea how they do that?
Cheers,
Phil.
It changes dynamically the div #stalker which has position:absolute;top:76px;. When the user scroll, change the position to position:fixed;top:0 and keep it in a fixed place, giving you the ability to scroll the rest content.
Edit
I created an example of this behavoir, because I was curious and here the demo if you want to check it http://jsbin.com/igiji5/3
Atlassian published the source of the Javascript at http://docs.atlassian.com/aui/3.0/jquery.stalker.js.html
That is created using JavaScript.
I can see by using FireBug to inspect the div#stalker that it changes class and style attributes when you are scrolling.