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?
Related
I know this question sounds confusing, so here's a better explanation:
I'm using a mobile. Say there's a scrollable element somewhere in the body. When I scroll the element and it reaches the bottom, I want instead of getting stuck for keep scrolling the element, it scrolls the page instead. That's also true if I reach the top of the element, it scrolls up the page, not getting stuck.
I tested it on two different mobile phones with the latest version of Chrome. The First one does exactly that. Weirdly enough, the second one only works when it gets to the top but not to the bottom. Is there any way to make it always work irrespective of the environment (mobile phone or browser) we are using?
Edit: What I'm trying to achieve with this
Desktop:
I want a way so that the buttons placed at the bottom of the content are not so distanced from the user's view. If we remove the scrollbar, then the users have to scroll all the way to the end of the content to be able to click the buttons.
The problem with this method is that, on mobile, in some browsers, it blocks the user from scrolling the page, even after reaching the end of the element. So they have to touch the edges of the screen to be able to scroll the page instead of the element.
What I want is, for users having difficulty touching the edges, they can still scroll the element. And when it reaches the bottom of the element, it scrolls the page.
I know this is weird. I know some of the better tricks like using the Read More-Read Less button, but it requires JavaScript I guess? I'm in a situation that's really hard to use JavaScript at the moment (shortly because of how bad the code is organized), and looking for a way if there's a simple trick using pure CSS. Any help or idea is appreciated!
Wondering how I can achieve the following effect on a website I'm building:
Div with 100vw width and 100vh height (we'll call this #container2) hides to the right of the home page (we'll call the home page #container1).
Moving mouse towards the right edge of the page causes #container2 to peek out.
If the user clicks on the visible portion of #container2, it slides all the way to the left, fully obscuring #container1.
The user is now on a new page with a corresponding URL, where they can scroll down and view more content.
I've got the first 3 steps more or less figured out. What I need help with is figuring out the best way to:
Handle the URL transition from site.com into site.com/newpage during the sliding animation
How to dynamically load the new page's content to the #container2 once the page transition happens, so the user can scroll down and see the new pages content if they click into it, but don't have to load the content if they choose to stay on the homepage.
Making it so if someone types or is linked directly to site.com/newpage, they will see the same thing that someone who started on the home page, clicked #container2, and watched the transition animation sees (but without showing a page transition).
I don't have any code snippets to show because I'm not really sure where to start. Any help or direction would be greatly appreciated. If possible, I'd like to use a vanilla javascript solution, as I've managed to make all the other features on the site run without JQuery. If JQuery is the only way to do this though, I'd still love to hear the solution.
There are a lot of ways you could do this. My intuition would be to have only one page that has different url fragments. Your question is fairly broad so my answer will also be broad.
One approach would be to use the target pseudo-class in css. All you need to do is make container2 a link that adds fragment to the end of the url that matches the classname of said container. You could have a some style for :hover that makes the container slide out and some settings for :target that brings the container to the center of the page. Container2 could have have a second section beneath the fold that contains the rest of the content for the page.
You could do something very similar with javascript by adding and removing classes from the various elements, but using the target pseudo class will help with your last bullet point. If a user goes directly to the link with the fragment, they will see the page with that container displayed.
I hope that gives you a place to start. Here is some info about the target pseudo-class.
I am doing an website where I have to keep one image fixed to the screen and on scroll I want different elements to appear one by one and stick to one position. When this is done I continue to the footer of the website.
I have done tried to reach that but whatever I do the page keeps scrolling and does not wait for all the elements to appear on the screen.
Example of what I want to do can be seen here Link on the second page where the mobile phone it is sticked in the screen and on scroll different content appear one by one.
How do I achieve this ? What kind of libraries would you suggest?
Thank you in advance.
stuff like this is usually done with js libriaries, as you already wrote. One that is actively supported and works quite well is Scrollmagic. It should be able to do what you describe, at least it can do the stuff in the example you linked: It can "pin" elements on the page for a defined duration (= "scroll duration") or animate elements controlled by the scroll position.
Scrollmagic can be found on Github or here: http://scrollmagic.io/ , examples to be seen here: http://scrollmagic.io/examples/index.html
Your fixed html content should have css position: fixed;.
Have you tried position: sticky? There may be browser compatibility issues but there are polyfils out there to fix that.
Please have a look at my sample page.
On that page notice the portion with the gibberish text. This is the "content part" which is meant to be scrolled. All other parts are supposed to be fixed.
If you move your mouse over the left navigation or the header and try to scroll, then naturally nothing happens.
How do I make the content part scroll even when the user's mouse is over the header or left navigation or any other fixed parts?
PS. I am trying to imitate Google Plus here. They seemed to have a scroll listener, but the Javascript code is too mangled for me to understand.
I was wrong in my previous conclusion that Google+ is using Javascript for this.
Yesterday broke down their site into pieces using Firebug. Now it is clear that they too are using position: fixed for fixed parts.
Here is my updated sample page. Notice that now we can use keyboard arrows too to move the page up or down. This page is not using any Javascript.
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.