I am using css scroll snap to scroll through that are 100vh in height. The scroll snap works beautifully.
That said I need to determine how far the site visitor has scrolled for a few different reasons.
I have tried:
let wrapper = document.getElementById('landing-page-wrapper');
console.log(wrapper.offsetTop);
console.log(window.scrollY);
I have also tried window.scrollTop, wrapper.scrollTop and more.
Here is a Codepen of what I am seeing
How can I know the distance scrolled while using 100vh sections and css scroll-snap
TIA
Based on your shared code, the reason why window.onscroll does not work as expected is because neither window nor document.body are overflowing vertically. Only the element that is overflowing will fire the scroll event, and in this case it is actually the element that matches the .box-wrapper selector.
Therefore if you listen to the scroll event on that element, then you should be able to retrieve its vertical scroll position using event.currentTarget.scrollTop:
document.querySelector(".box-wrapper").addEventListener("scroll", (e) => {
console.log(e.currentTarget.scrollTop);
});
See proof-of-concept example:
Related
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.
I'm trying to focus the top of a div on an anchor click using the below code.
$('html, body').animate({scrollTop: $("#" + divid).offset().top}, 100);
However, it is not getting scrolled to the top of div , rather the focus goes to a position inside the div. I cross checked the offset().top value of the div with the top value in Page Ruler chrome addon and they are in sync.So ideally it should scroll to the top of div. Any suggestion would be really helpful.
Your fiddle seems to be working (except that you forgot preventDefault() in the click handler).
Generally, you need to account for border, padding, margin on the scroll container (the window in your case). For a generic solution, have a look at this gist.
I'm using a jQuery plugin called hcsticky it detects a window's scroll position and then applies a position:fixed to an element.
My problem is that I have an position:absolute container that scrolls instead of the window. This means that my plugin doesn't apply the fixed position to my element.
This only happens on tablets as larger dimensions use a different stylesheet and the window itself scrolls.
Right now I have the plugin setup like this:
$('#imageContent').hcSticky({
innerSticker: $('#textContent'),
stickTo: $('#textContent'),
bottomEnd: -60,
top: 60
});
Right now this detects whether the scrollTop has has reached the top of #textContent and will apply fixed to #imageContent for the height of #textContent. None of this is triggered because, I believe, the function is measuring the $window scrollTop and not the #scroller scrollTop.
Am I missing something, is there something in this plugin's options that enables this that I'm missing? here
Hi I am trying to make a scroll bar (I'm still far from done, link here: http://jsfiddle.net/xD2Hy/24/ ), thing is that when I scroll (using the scroll bar) to the bottom, THEN and I resize the window to make it SMALLER, the scrollbar drowns under the window. To fix this, i tried adding a jquery offset to the scroll bar move it up when i resize. NOW when i scroll to bottom, then i resize, the scroll bar dissapears completely! I really dont know what to do, im still learning javascript, please help. Here's a the offset jquery of the code, check the link of the jsfiddle for the whole thing:
$('#scrollBar').offset({top:100});
It seems you're setting offset to 100px from document's top border. You need to set offset based on scrollbar's parent container offset and height, and scrollbar container's height. Try this instead:
var scrollContainer = $('#cow'),
scrollBar = $('#scrollBar');
scrollBar.offset({ top: scrollContainer.offset().top + scrollContainer.height() - scrollBar.height() });
Updated fiddle.
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/