i am creating my website and i have a problem.
On top of my page there is my header and in it my nav
When i scroll down the page and the header isn't in the visible window i want to slide down (from top) another DIV (then fixed to the top and always visible) with a button. When the User clicks on the button must my header slide down.
If the user scrolls back to the top of my page an the header comes in to the visible window my fixed DIV with the buttons must disapear.
I hope you understand what i mean with my very bad english und hope you can help me.
i create an working fiddle for u
https://jsfiddle.net/ps4952ss/5/
hope this help
I think that you want to use StickUp, this will keep things simple and quick. You can get it from Github the url is https://github.com/LiranCohen/stickUp, I hope that this helps...
I created a picture which shows what i want.
Click to see the picture
The user see the page at top - everything is normal
Now the user scrolls down and the header goes up and isn't in the visible area anymore. At this point comes the trigger down..
...and when the user clicks the trigger the header slides down AND can slide up because of the trigger.
If the User scrolls to top the trigger slides up and we are in Stage 1 again
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 am using wordpress' revolution slider that spans the home page. I want to put a scroll down button, so users are aware they can scroll. I want something like this one: https://exposure.so/
I tried putting a div on top of everything and a link that links to anchor link further down the page. It works, but I don't know how to make the div disappear when the user goes down, and reappear if they go back up. Anyone know how to fix this?
You need to calculate the scrollbar's handle position using javascript or jQuery.
If its towards the bottom of the page, hide the button, else show it.
To find scrollbar position : LINK
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
I got my tabs working how I want - please view the site here:
http://beelinetest.site50.net/uw_virtual_tour.html#
Does anyone know how I can hide the content at the bottom of the screen (scroll down), this is the info that slides up when the tab is clicked. But make sure it appears as it slides from behind the footer?
In CSS, add overflow: hidden to your #maincontentcontainer element.
I have an absolute DIV with a large top css value. It begins as a hidden DIV and is revealed by slideToggle (jquery) when a button is pressed. This is fine for divs at the top of the page.
If there is a button off the bottom of the window, and needs to be scrolled down to - when it is clicked the hidden DIV appears beside the button because of its large top value - 400px or bigger. However the window goes back to top of page, and you have to scroll back down to view the content.
Can the window be stopped from jumping to top, and have the revealed DIV in the same position, yet dont have to scroll to see it?
I think the question you asked and the answer you want is very similar to this:
How do I stop a web page from scrolling to the top when a link is clicked that triggers JavaScript?