How to know when you scrolled down? - javascript

Just visit http://techcrunch.com/ and scroll down. How do they do it? How that top line appears with a new logo? Is there any jQuery trick? How to determine when person scrolled down certain amount of pixels and show to him new html?

They might just use jQuery-Waypoints which lets you trigger events if the user "passes" a certain HTML-Element.
Example ( taken from page ):
$('.entry').waypoint(function() {
alert('You have scrolled to an entry.');
});

They are using jquery sonar plugin[1] which defines special jquery events[2].
The trick is putting a static positioned top element, on a very high z-index layer, with the part to be occupied by the dynamic logo initially transparent. When the jquery event is thrown, they just make the new logo visible above any underlying content.
[1] http://artzstudio.com/files/jquery-boston-2010/jquery.sonar/jquery.sonar.js
[2] http://benalman.com/news/2010/03/jquery-special-events/#api

Maybe they use window.pageYOffset and there is also document.documentElement.scrollHeight and finally they use the window.onscroll event.

They use the window.scroll() function to listen for the scroll event, then use window.scrollTop() to determine the offset of the logo from the top of the page.
see: http://jsfiddle.net/XkMrc/2/

Related

How can I target a specific element on scroll in React using JS?

So I want to target my About section on scroll, to add a class to the about section to make it fade in on scroll. As well as other sections as well I would like to target on scroll. Is there a way to target the specific element by ID or something on scroll?
showAbout = () => {
const top = window.pageYOffset;
if(top>400)
this.setState({
showAbout: true,
})
}
componentDidMount(){
window.addEventListener("scroll", this.showAbout)
}
This is the code I have currently, 400 is more of an arbitrary number, its different on each screen size. I was wondering if there is a way to do this same function, but by targeting the element ID on scroll?
Thank you for the help!
You can calculate the exact window offset for each of these elements on page load and trigger your animation when those offsets hit. You would also need to have a window.resize event that re-calculates those offsets for when a user resizes their window (or changes orientation on a phone).
OR, you can use a pre-built JS library to do this a lot easier for you. My recommendation is Scroll Magic:
https://scrollmagic.io/
You can indeed set up trigger points based on element IDs, and it works very smoothly.

Animated Scroll Image to a particular position on a window

For example:1)i Have a div 100px*900px2) i have an image 100px*200px what i want is i want to move my image the exact number of pixels i scroll up or down
Can any one tell me Update Check this. I want to move that image also when i scroll down animatedly(slowly) not fixed position.
You want to look at the scrollY property on the window object in Javascript. This holds the amount the window has scrolled.
You can then use something like jQuery .animate to move your image the desired amount.
$('#yourImage').animate({"top":window.scrollY+"px"});
Note: This code assumes your image is absolutely positioned.
EDIT
$(window).scroll(function(data){
//It is important to use .stop() for this as otherwise every slight scroll will add the animation to the animation queue.
//What you want is for it to forget the others and go to the latest scroll position
$('#im').stop().animate({"top":(window.scrollY + 10)+"px"}, 500);
});
This code will move an image every time the scroll event is triggered. I have tested this in Firefox using this jsFiddle

Trigger an event when user clicks on a divs horizontal scrollbar arrow

I have a div with a horizontal scroll.
Is there any way I can detect the click on the horizontal scrolls
arrow using jQuery ?
Note:
Actually I want the scroll to move a fixed no of pixels to the right when the user clicks the right scroll arrow and vice versa.
The event should not be triggered on scroll. It should be only triggered if user explicitly clicks the scrolls arrow.
There are multiple divs having scrollbars, having same class and no ids.
Would prefer to not use any plugins
Here is a demo for what you want
http://jsbin.com/opufow/4/edit
I hope this will help you?
you can use .scroll function of jquery.
Edit 2: Another suggestion is to do something like this depending on your implementation of scrolling areas (see working jsfiddle):
function CustomScrollArrow(elementToScroll) {
var $el = $(elementToScroll);
return $('<a>Click me to scroll</a>').css(/*...*/).click(function(){
$el.scrollLeft($el.scrollLeft()+10);
});
}
$('.ScrollAreaClass').each(function(){
// You could choose to append to your scrolling
// areas or their wrapper classes or whatever...
$('body').append(new CustomScrollArrow(this));
});​
Afterwards it's just a matter of styling your handmade arrows.
Edit 1: I've seen you updated your question, so here's an updated answer with an alternative solution.
You can try to circumvent the problem by using a customized scrollbars implementation, for example jScrollPane by Kelvin Luck or any other, whatever. If the solution offers click events on arrows - then you're set. Otherwise just do a bit of tinkering...
I maintain, however, my point of view that unless you are looking to perform an action before the browser executes the arrow click, I would recommend adding an event handler to the actual result of that click, i.e. the scroll.
Doing this will help to avoid inconsistencies across various implementations of scrolling in browsers; will keep working if scrolling is performed in another manner (i.e. swipe gesture); will still work if there's some javascript code that replaces the default browser implementation of scrollbars.
jQuery offers the .scroll handler to capture scrolling and .scrollLeft to determine the resulting position of the horizontally scrolled content.
Try a working jsfiddle or see the code below:
// Cache the initial scroll position:
var initialLeftScroll = $('#wrapper').scrollLeft();
// Bind event:
$('#wrapper').scroll(function (ev) {
// Get new horizontal scroll offset:
var currentLeftScroll = $('#wrapper').scrollLeft();
// Determine the difference
// (did the user scroll horizontally or just vertically?):
var leftScrollDifference = currentLeftScroll - initialLeftScroll;
// Now we can check
if (leftScrollDifference) {
/* Do something here */
}
// Reset the cache:
initialLeftScroll = currentLeftScroll;
});

Scrollto Jquery, continue to follow the element?

Is there a way to 'track' a moving element across a page, or continually scroll towards it, so that it never leaves the users view?
I've got an element which slowly moves across the page and eventually off screen, meaning the user has to scroll towards it to see it. This element continuously moves.
I'm using the ScrollTo Jquery plugin to guide the user towards this element, this works fine.
But, is there anyway to make it so the element is continually scrolled towards?
So that it is tracked across the page?
At the moment the user has to repeatedly click a button to ScrollTo the element since it quickly moves out of view.
Any help is much appreciated.
You could try using a css hook if you're using a recent (> 1.4.3) version of jQuery. It depends on the property you are using to scroll it, let's say top.
$.cssHooks["top"] = {
get: function(elem, computed, extra) {
return $.css(elem, 'top');
},
set: function(elem, value) {
// set it
$.css(elem, 'top');
$(document).scrollTo(value);
}
};
This means each time top is set, it would call the set function here.
You could detect the element's offset position and append another element to it.
If your query is just to keep the element in view of user : irrespective of his scrolling. Then why not just use simple " position: fixed" element.
Check out this link: http://www.w3.org/Style/Examples/007/menus.en.html

How to make an element slide with the viewport as it scrolls?

I've Googled for this but must be using the wrong keywords.
Basically I want to use the effect that Magento and now Stack Overflow uses. That is, there is an element in a column, and when you scroll down, it sticks to the top of the viewport. And once scrolled up again, it goes back into the normal page flow.
This Ask A Question is a good page for example. Scroll down and watch the "How to Format" element come down (might need to make your viewport smaller if you have a large screen to see the effect).
I've noticed it is setting position: fixed in the CSS. The JavaScript however is obfuscated.
What's the easiest way to achieve this effect? Is there a jQuery plugin available?
Here is an article that should help: http://www.wduffy.co.uk/blog/keep-element-in-view-while-scrolling-using-jquery/comment-page-1/
I noticed google doing this in certain places, like here http://news.google.com/nwshp?hl=en (the left side navigation bar). From what I can tell, they checking the position on the page and then setting the item to a fixed position once the page is scrolled down enough for the element to start scrolling off the screen.
It looks like the other method, using jQuery to set the top margin will allow the element to lag behind and get choppy (if you don't use animation) since the javascript must continue to position the element.
Here is an example in Ext, it would probably help a lot if I didn't have the select in the event handler, but it works.
Ext.fly(document).on("scroll", function(e,t,o){
Ext.select(".pinnable").each(function(el,c,idx){
var y = window.scrollY;
if(!el.hasClass("pinned")){
var ypos = el.getY();
if(y>ypos){
el.addClass("pinned");
el.set({
originalY:ypos
});
}
} else {
var origy = el.getAttribute("originalY");
if(origy && y<origy){
el.removeClass("pinned")
}
}
});
});

Categories