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
Related
I'm facing a huge problem. I have a modal that renders a list of texts. The div where the text is shown has a scrollbar, but when I change the text the scrollbar remains at the same spot. If I scroll to the middle and change the text it will appear from the middle and not from the top as it should.
I've tried this code: window.scrollTo(0,0) but it resets the main page scroll not the modal one.
Could anyone help me?
I'm not sure I'm understanding your question. It is more helpful if you post the bit of code that's giving you trouble so we can clearly see what's going wrong. That said, window.scrollTo(0,0) will scroll the whole page. If you want to scroll to the top of an element like that, call .scrollTop from the element you wish to scroll. I think you are looking for something like this:
$("#myScrollDiv").scrollTop(0);
I've built that page. and it's using the framework vue.js 2 and Jquery.
It's blowing out my head because that page is very slow.
Could you expert guys help me with some idea about how to speed up it.
Thank Guys.
The page is that:
http://softwareapqp.com.br/teste/public/pecas/21/cronograma
you can click in "editar" button and in blue button which opens you can try to drap and drop it. You'll see how it's realy slow.
or, you can click in "Desenvolvimento Fornecedores" or "adicionar atividade" and see how the modal is slow to open.
Had a quick look, your right it's not a seamless experience. It doesn't look like a problem with JavaScript, this is more of a UI/UX problem. One thing stood out, you have a horizontal scroll inside a vertical scroll inside the vertical scroll of the page itself.
Maybe you can have panels with left right panning navigation arrows that asynchronouously loads content when the user clicks the arrows instead of scrollable windows. This way, you're only loading what the user can see and scrolling the page wouldn't be such a pain. Only load the data/HTML when it's useful, otherwise it's just bloating up your memory/DOM.
I'm making a website and want a navigation bar that stays at the top of the screen. I can do this fine but when I scroll to top it goes above header. How do I get it to stop scrolling with the user before the top of the page? I have watched countless tutorials but none seem to work. I think I need JavaScript to unstick the bar at a certain height, but unsure how. Also how do I restick it when the user scrolls back down?
Yes, you will need JavaScript to handle this. It is not too complicated, but you will basically need to add an event handler for the scroll event on the window, and inside the handler you can check the scrollTop of the window to see how much has been scrolled. When it has been scrolled "enough" (usually the height of your header) you can then switch the position of the header to fixed.
You can see a demo about it on the excellent CSS Tricks, and there are many tutorials and plugins that can help with this.
Yes, as danwellman said, you need js.
I have a small code I used in my webpage.
// Highlight the top nav as scrolling occurs
$('body').scrollspy({
target: '.navbar-fixed-top',
offset: 51
});
You need a file like "scrolling-nav.js" or anything you prefer. And in your html, don't forget to call it.
// In the end or in the beggining you call your js file
<script src="...(filepath)/scrolling-nav.js"></script>
There are many more cool possible snippets you can find. This is really to keep the navbar fixed after the offset of '51'. You can also add the smoothed movement to the webpage section after selecting a menu button.. If you have a onepage website, for example. This would also be js.
Good luck. :)
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