How can I use sticky positioning whilst using Smooth Scrollbar? - javascript

Hi I'm currently working on a horizontal scrolling site. I am very much a noob when it comes to javascript but I found a codepen that I modified to suit my needs.
I would like the button element to position sticky within the div but I think due to the javascript in use sticky positioning does not work. I have had a look at the documentation and can't seem to see anything that would work, however, I am very much a novice when it comes to javascript.
button{ position: sticky; }
Would anyone be able to give me a few pointers?
Here is the codepen that I am working on
Based on this original codepen
The js it is using
I very much appreciate any help I can get thanks!

Related

How to make the site scroll smoothly with the mouse?

I found a smooth scrolling site. All elements move very smoothly. I googled for a long time, but did not even find a similar example. Any ideas how this can be repeated? https://www.sweetpunk.com/en/
The site is likely using a library similar to locomotive-scroll to achieve this effect. See here for a demo: https://locomotivemtl.github.io/locomotive-scroll/
There is a css property that's does something similar
*{
scroll-behaviour:smooth;
}

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/

Smooth Scrolling and Anchor Tags Issue

I am having a very odd issue and also finding it difficult to implement smooth scrolling on my single page website.
You can view my site HERE
Firstly, Is the strange anchor issue, when I click the link in the hamburger menu, the link appears in my address bar (which I would like to get rid of at some point) but when I scroll down the page it just keep being stuck on that div only I cannot scroll the page freely.
Secondly, I can't seem to implement any smooth scrolling techniques which I find on the net so far and I would really appreciate a little hint as to what I am doing wrong. I have tried to put name="" and rel="" into the <li> and <a> elements (adjusting the smooth scroll code accordingly but still nothing.
Please find reference HERE
I am a bit of a newbie with javascript so maybe i am not doing something simple here.
Thanks in advance!
Terry
After speaking to some other students I found that the issues is due to the html and body CSS. I needed them to both have height auto and min-hight 100%.
Although this still does resolve the issue with the revealOnScroll. I need to tweak this code I think as it isn't able to then calculate the offset().top

Permanently disabling horizontal scroll? Out of ideas

Alright, I've pretty much hit rock bottom with this one. This mobile site keeps generating horizontal scroll bars every time I hover over a working link. When the navigation drawer is out, it ends up overriding the overflow property, which is breaking my site. Overflow:hidden; isn't really doing anything for me.
I have no idea where the issue is coming from, so all I can do is link the site and hope someone way smarter than me can help figure it out. In the meantime, is there any sort of jQuery hack to completely disable horizontal scrolling? I would even be okay with disabling scrolling all together when the nav drawer is out.
Heres the site http://www.helloimmatt.com
It's still in very rough shape, but resize down to mobile and pull out the nav drawer to see the issue. Thanks in advance, I'm stumped.
You can use following:
body {
overflow-x: hidden;
}
or
$("body").css("overflow-x", "hidden");
Also, you can try diable using JQuery (or javascript, if you like)
I made jsfiddle with example for you: http://jsfiddle.net/Kvn7t/1/

Creating 3 Scrollable grids

I am trying to implement a webpage like the mockup I've posted. I tried looking for some jquery libraries that can help me achieve this task, but havent found any yet.
The idea is to make three separate scrollable grids, all three should occupy the entire browser screen, and the header bars should be able to hold text at the center.
Any help that would put me in the right direction will be a great help.
Try with this plugin: jScrollPane / http://www.kelvinluck.com/assets/jquery/jScrollPane/jScrollPane.html
Demo in jsfiddle: http://goo.gl/hG9CV
You don't really need to do this using jquery, Simple CSS would work, just use position:fixed to position the divs and overflow:scroll to create scrollable element.
See a sample fiddle

Categories