jQuery/Javascript sticky sidebar jitter - javascript

I have a wordpress plugin called Standard Widget Extentions which essentially uses jQuery to create a sticky floating sidebar. You can see this in action on a page on my site, its the sidebar with the social sharing buttons on the left http://turnnatural.com/2-seemingly-healthy-kitchen-items-you-need-to-toss-right-away-and-what-to-replace-them-with/
The issue I have is when you scroll it seems to "jitter" about and doesn't have a fluid movement. Is there some javascript/jquery/css changes to fix this?
I have asked in the forum of the creator but I get no response and I'm at a loss.
Thanks

Related

Recreating the scrolling effect from Google Analytics docs

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.

HTML5 auto scroll to next section

As you can see right here: https://www.sequoiacap.com/
I'm trying to mimic its scrolling behavior right here, and its implementation really baffles me. Is it scrolling to another section? Or is it scrolling the background? Is there a name for this specific website style?
I have a one page parallax theme that I would like to auto scroll for user, so that each scroll gives the user a new fullscreen section. I would like to know how many plugins I would need to use. Some basic examples or directions for research would be greatly appreciated.
Thank you.
Here's 2 possible ways out of many, for how you could implement this:
jump.js which is a dependency-free library (meaning it does not require jQuery or similar)
fullPage which is a full page slider plugin for jQuery. This might be more of what you want, because it does not introduce a scrollbar.

Parallax floating image gallery

I need to create parallax floating gallery - when I scroll the page, images move relative to each other and the parent container, from bottom to top of the page visible area. Here's an example on another site (section - sockstagram). Basically, I need to create exactly the same effect. I've already tried to do this using the same library the mentioned example uses - Skrollr. However, it's buggy - causes issues in Safari desktop and mobile (breaks layout of some other elements on the page). Can someone point me in right direction? jQuery plugin or some custom code to achieve this. Thanks ahead.
You can use parallax.js or even a framework like MaterializeCSS which has one implemented and adds also the benefits of having a grid-based framework to design your web.

How to apply horizontal smooth scrolling to (example included) JQuery website?

A very generous Stack Overflow user helped me with the following drag horizontal navigation (seen here: http://jsfiddle.net/eT5MM/2/) and I'm now trying to implement the JQuery smooth horizontal scrolling as an additional form of navigation, should a user be on a mobile device: http://tympanus.net/codrops/2010/06/02/smooth-vertical-or-horizontal-page-scrolling-with-jquery/
Unfortunately, my reference links aren't working properly, and I'm not sure if there is conflicting JavaScript, or something different. The website is not currently live, so unfortunately I'm unable to share that code, however it is nearly exactly the same as the above JSFiddle code, and I'm using
<a name="Name">
and
<a href="#Name">
to navigate the page.
Thank you!
A
using the same code of previous question, here is the clickable scrolling menu
JsFiddle

Really cool JS tools: does anybody know what this is?

Very cool JS components: http://www.msnbc.msn.com/id/40664031/ns/us_news-crime_and_courts/
Check out the icons next to the vertical scrollbar in your browser, and the expanding 'sharing' toolbar at the bottom.
Does anybody know if these are publicly available components? Has anybody seen these before?
Edit: I'm talking about:
The way the sections in the bottom bar expand into tabs to show more controls. Try clicking on "Login and settings", for example.
The way the links near the scrollbar take you to the respective sections. Very cool tool to aid user discovery in a long page.
I was intrigued by the scroll markers used for jumping around the page so I made a start at replicating the functionality in a plugin:
https://github.com/sj26/jquery.scrollmarkers
It's definitely not pretty yet, but it's a start.
Its a private library built by Krux Digital, Inc.
I dug into the source of http://cdn.krxd.net/krux.js
Its ajax tabs..
Also, you can have a bar fixed at bottom of page simply by using
position:fixed
property in css, then in the div at bottom, impliment jQuery.tabs, and for each tab load data via ajax. Wont be that difficult. and if MSN has implemented it, they would have surely spent a lot of time on it

Categories

Resources