Hope this isn't a duplicate question as I've been searching for some time for this issue and haven't found a clean solution yet. Maybe I'm just not searching correctly.
I have a navbar which has its position set to fixed trough javascript when it reaches the top of the viewport. I'm using jquery 1.11.3 to get offset().top of the element, however this value doesn't seem to update itself when the vertical height of the viewport changes.
For example, on an Android tablet with Chrome the address bar disappears, the 'resize' event is triggered but the offset().top of the element remains the same causing my navbar to remain static although it was scrolled past the top of the viewport and should be now fixed. I have also used a timeout to read the new value on resize but to no avail.
Is there some way to ask jquery to reconsider the viewport size so that I don't update my internal offset based on the new values? Or maybe this isn't the way to go?
I encounter the same problem as you. On window resize, my element offset value was not change. In my case, my element was in fixed position. Maybe yours too? But if I scroll the page, the element offset changed. So In my case, I just put a fixed offset value to be use for my element.
Try implement this code in your window resize event
elementTop = $('#element').offset().top;
windowTop = $(window).scrollTop();
if( elementTop - windowTop < 0) {
// write your set fixed position code here
}
Related
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:
I have a long, scrollable list in an absolutely positioned container in the middle of my page (I do know how far the container is offset from the top of the screen, and the overflow is hidden on all the key elements). Each li in the list has a mouseover event. The events I see have a pageY in it, but that's the mouse position, and thus varies if I enter the li from above vs below. I need a constant value to position something alongside.
I looked in the srcElement property but the offsetTop within that is several 1000s, which means it is not based on the viewable content but the scrolled content.
How can I get a constant value of a scrolled div relative to the window as whole?
Note I canNOT easily run other DOM requests.
You can use the offsetTop you mentioned and substract the current scrollYOffset which you can get using window.pageYOffset.
var y = srcElement.offsetTop - window.pageYOffset;
I have a website with 4 divs that all have heights of 100vh that fill the entire view height and view width. But I can't seem to figure out the section of the div I have navigated to. Is there a way I can use
$(this).scrollTop()
to find out the view or div I am currently viewing? I know this question is quite confusing but if you understand what I am getting at, I truly need your help.
Basically, in your case, you have to know how much have you scrolled the page.
var scrolledY = window.scrollY || window.pageYOffset || document.documentElement.scrollTop;
After that, as long as your divs have height of 100vh it is the same as window.innerHeight. Therefore, you can calculate the index of div you scrolled to:
var divIdx = Math.floor(scrolledY / vh);
Now, all together: http://jsbin.com/qepodojoqa/edit?html,css,js,console,output
You need to bind an event to scroll and check if you scrolled past a div's top offset.
$(document).scrollTop()
gives you your current top scroll, and
element.offsetTop
gives you the div's offset from the top (i.e, the distance between its top and the top of its parent node, body in this case).
Be aware that there are other ways to detect the top scroll, depending on your needs.
I am using a jQuery script to place an element a given distance from the bottom of the screen. (Yes, JavaScript is necessary to get the dynamic, intended behavior on this page.)
For most browsers, the element, which is represented by the grey bar at bottom of the image below, this code will place the element just fine:
var container = $('section.explore');
var winHeight = $(window).height();
container.css('margin-top', winHeight - container.height());
However, on Android browsers, I get this behavior (note the grey bar at the bottom):
In order to the get the search bar a certain distance from the bottom of the window, I have to scroll the entire way up so that the address bar is visible, then the bar is properly positioned.
Is there a way that I can better measure the window height so that the user doesn't have to view the address bar to see the element in its proper position?
Thank you for your time.
Try checking for accurate values in
window.innerHeight or window.outerHeight
Also check for accurate values in the resize event on window.
$(window).bind('resize', function () {
console.log(window.innerHeight);
console.log(window.outerHeight);
});
I think the resize event should fire each time the browser address bar appears and disappears.
In Javascript, I wanted to understand a few things:
Can we both get/set scroll pos for a window?
What is the diff between window scroll pos and for normal element on page?
Can we set scroll pos for any HTML elements or is it only for those with overflow properties?
Is there any difference in these property calc for iPad?
For scrollWidth, does it get affected by vertical scrollbars..If yes, is it the same in all browsers?
Your answers.
$(window).scrollTop(), $(window).scrollTop(100);
window scroll position is the main page's scroll postion(left/top) where as for normal element the scroll position applies when we set overflow:auto to it and then we can get/set the scroll position of it.
We can get the scroll position of any element using $("selector").scrollTop()/scrollLeft() but yes if the overflow is not auto then I think it will always return 0.
For iPad the scrollTop()/scrollLeft() do not work, you have to use window.pageYOffset/window.pageXOffset
JavaScript equivalents, not tested though across browsers
$(window).scrollTop() - document.documentElement.scrollTop/scrollLeft
$("selector").scrollLeft() - document.getElementById("elementId").offsetTop/offsetLeft