Im looking to create this effect here
http://alvarotrigo.com/pagePiling/examples/horizontalScroll.html#page3
The only problem is that for my specific use case I need this to be just one section on a normal page (not possible with this plugin).. so when the user scrolls to this section they get locked into a scroll that only goes horizontally for 5 slides then goes back into a normal scroll and so continues on down the page... I cant seem to find anything related to achieving this (that works).. very greatful for any pointers.
Related
This is my first post here, before this I have had tremendous help from this forum and all the users previous posts. The question I have now I cannot find the answer to. So:
I have an object (button) which when pressed smoothscrolls the user up to top of the page. Im successful in making it fixed to the top of the screen, however, lets say youre at the bottom of the page and you press the "smoothscroll button", its starts scrolling you upwards to the top. But when your "near" the top I want the button to stop and the scrolling to continue...
Im not sure how to describe it better, but if you go from the top of the page, or when at the top of the page, you dont see the button and when you start scrolling down, youll see the button as any object on the screen "climbing upwards" and when the button reaches the top of the screen it stays there fixed.
Im sure this is common on ads for example..
How would you achieve this? Any help appreciated..
Thx,
Layman
It seems like this is what you want to achieve.
http://stickyjs.com/
if you are still not impressed.. here is a link to the treasure of plugins that would do what you need with very little code.
http://jquery-plugins.net/tag/sticky-scroll
One of my coworkers wrote a plugin that hides a button as the page is being scrolled to the top. You may be able to use similar logic. It would be something like this:
btt.revealPosition = 300;
$(window).scroll(function(){
if($(window).scrollTop() >= btt.revealPosition){
//Add a class here that lets the button scroll with the page
}else{
//Add a class here that fixes the button to the top of the page
}
});
It basically watches the scroll position as you're scrolling back to the top of the page. Upon reaching the revealPosition of the button, you could add a class or modify the css with jquery to change how the button is acting.
This logic was taken from the following plugin:
jquery-backtotop
I have seen several questions about floating or fixed sidebars on Stackoverflow, but I could find none that covers this scenario.
Take a look at this page as an example: http://msdn.microsoft.com/en-us/library/aa691131(v=vs.71).aspx
When the page is scrolled up, the sidebar also scrolls up with it, until its top edge hits the top of the window. As the scrolling continues, the side bar stays fixed in its place until the page footer reaches up and pushes the sidebar up with itself.
Therefore, the sidebar is always trapped between the page header and the page footer, but within that limitation, it tries to stay visible as much as possible.
This is done by using javascript. I was wondering if you guys have already achieved something like this, or if you know of a solution, that you can share here.
Thank you.
This is a great tutorial on how to acheive this effect through jQuery... http://www.hongkiat.com/blog/css-sticky-position/
It uses jQuery .addClass() to add a class to the element when a certain scroll position is reached.
And the respective .removeClass() when the user scrolls back past.
I want a scrolling menu that begins at a certain part of the page (like under the header), but stays there till you scroll down and it hits the top of your browser window, then follows you down the rest of the page.
Anyone have any clue how to do this? I can't find it anywhere on the net. I've seen others similar to it, but none that move to the top of the window.
There's a great example on gmail when you are viewing an email. The toolbar stays at the top of the email box, but once you scroll past the email box, it follows you down the page.
I know that position:absolute;top:0; will make it stay at the top without the fluid motion (I hate it because it looks sloppy).
** edit **
I really only need to know how to detect that the menu div is at the top of your page. I can do a mock thing where if you scroll down how ever far the menu div is, it will start scrolling down, but I'd rather actually get whether the menu div is past the browser window or not.
It's a mixed position of fixed and absolute, you will handle.scroll event and switch between that.
You can find an example here
Creating a floating box which stays within a div
Thanks a lot for all ur supports...Now I've a problem to resolve..I want to scroll the vertical bar and show the items in the page to appear as the scroll will go down(the way it happens in facebook page..It keeps on adding lists,items,comments,images as u keep on dragging the vertical scroll bar down)...Right now I don't have any code segment to use..and I've least idea regarding this..Please help me out..Preferable language/script could be asp.net,html,javascript,css,C# as I don't have any knowledge on PHP and MySQL..
This is called infinite or continuous scrolling, and it's mostly done in combination with jQuery.You can find some links below - though i couldn't find a working demo (and i know nothing about asp.net).
http://www.eggheadcafe.com/tutorials/asp-net/b8381915-06d9-4538-b4bb-5ac2a8e73f34/implementing-continuous-scrolling-ui-pattern-in-aspnet.aspx
http://weedallaboutit.wordpress.com/2011/10/13/infinite-scrolling-with-an-asp-net-webform-jquery-and-a-little-bit-of-code/
http://studentguru.gr/b/xinarisc/archive/2011/05/29/infinite-scrolling-with-jquery-amp-asp-net.aspx
Here is what I am thinking:
I have long web page and when the user reaches the end, I don't want the scrolling to stop just then, but I want to reload the page again from the bottom and continue the scrolling.
Detailed
As the user scrolls to the bottom, I want the top of the website to be removed from the top and placed at the bottom in a smooth way and this effect has be vice versa also. I mean if user scrolls up at the top of the page, then the footer must load at the top and continue in this fashion.
Yes, Infinite Scroll can do this. There is also a jQuery plugin.
Now whether you should do this... that's an entirely different question. Personally I find this behaviour extremely annoying.