JavaScript Number changes while scrolling - javascript

I'm currently working on a website. I want to have a fixed text (I know how to do that) that changes if you scroll.
So if you're on top of the page it shows '0' and then, while scrolling, the number goes up and up and when you scrolled one viewport-height it should be '10000'.
I think this should be done with javascript, but I'm just a beginner with it. Could you please help me? Thank you very much.
edit
Thanks Ajay for the tip with the onscroll function. But this always just adds a number on scrolling. I want something like this (look at the top left hand corner). Where the size is relative to the position on the site and not the scrolling wheel.

Try using the onScroll event of javascript.
Here is a useful link to learn.

Related

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/

Topbar covering webpage header

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. :)

How to create a Scroll Button?

I'm working on horizontal website. I would like to create 2 buttons (left button and right button) which can help users to scroll to left and right.
The site that I'm working on
The functionality that I wanted to create is, when I mouseover the button the page will start and continue the scrolling action until the mouse move away from the button then the page stop scrolling.
I found something from codepen "http://goo.gl/uTQdzD" that is similar to what I looking for but that is not function in the way I wanted. It's required to keep clicking it only it can continue scroll, once it clicked then it only move a certain pixels distances and stop then have to click again... even I tried to change to mouseover, the same thing... I have to moving the mouse in and out the button only it can continue to scroll the page.
I'm not a professional web coder or developer but just a new guy. I Hope someone out here could help me out.
Thanks in advance.
Here you go: http://codepen.io/caseybaggz/pen/uBysA?editors=001
I changed the .click to a mouseenter event which is what you are looking for. Additionally, the increments that you noticed were happening because of the step variable being assigned 400. So, I just replaced the 400 with wWidth and within the mouseenter function, told it to scroll the bodyWidth.
I'm not totally sure why you would want to do this? The natural flow of web design is to design/build sites vertically. To have the user scroll horizontally is a little awkward regarding the UX and could be considered bad design…especially now that devices come into play.
Be sure to learn web-design and UX standards first before you get into a position for developing sites. It not only helps to contribute for bettering the web, but also the UX. ;)
Hope this helps and good luck!

How to scroll an element inside parent when a fixed element passes?

This is a bit too tricky for my jQuery / javascript knowledge so i'm sorry to say i haven't really tried anything yet. I need some hints to get pointed in the right direction!
The problem is that i have a fixed element on my page, and when scrolling down this element will enter different wrappers, and while in that wrapper i need a smaller child element to "snap" to my fixed element and while it's in the element.
Kind of hard to explain, i made a static mockup here:
http://jsfiddle.net/ycmYc/
When "fixed cart button" reaches a price, i need it to attach and scroll with the cart button as long as it's inside the prices "product-div". When it leaves and enters the next the price should stay in the bottom of it's product and then snap to the cart-button again when the users is reaching it by scrolling up.
Well, again, sorry for not having tried anything but i am lost. If i had to do this without any help i think i'd go with waypoints.js but it feels far from optimal.
Any help MUCH APPRECIATED!
The fixed element will always have the same position, so i guess offset from the browser top could be used instead of keeping track of it's position. Always something ;)
Update:
Been working on it myself, and got it working downwards but not upwards:
Should clarify what i mean:
http://retype.se/temp/scrolltest/test.html
When scrolling by the price, it joins the button downwards and snaps loose when leaving the container. My problem now is making it snap to it and scroll back to its original position when scrolling upwards :)
Do you want it like this?
http://jsfiddle.net/ycmYc/39/
only result: http://fiddle.jshell.net/ycmYc/39/show/light/
updated:
How about this?
http://jsfiddle.net/ycmYc/93/
only result: http://fiddle.jshell.net/ycmYc/93/show/light/
this is just a brainfart, but maybe it gets things going (sry, dont have time for a fiddle). But I got the idea, of maybe trying to cheat optically.
What I mean is, to calculate the absolute positions of all price divs, hide them, and when the cart div reaches that position by scrolling, show the price div for x amount of pixel scrolling (or via z-indexes by making backgrounds, not sure what suits you better).
Hope this helps a bit, maybe I get time today to script it out.
It kinda depends on the constraints. You can detect the scroll position of a window with:
window.pageYOffset or document.documentElement.scrollTop.
If the divs are all the same size you could easily calculate which div the button is over and the position: fixed the price next to it.

Custom style scroll bar

Does anyone here know any tutorial/guide lines/link that will help me create an scrollbar like the one at http://www.wdyl.com/#apple [on the left top]
Yes, jQuery.fracs, which I read about just the other day on daily.js.
It does not have the magnifying effect like the link in the question, however it does generate a dimensionally correct tiny version of the page it is on, which I think is really smart.

Categories