I have a function where I enable scrolling only to for the difference of the div height and window height, so that it doesn't scroll down from the point where div ends.
But that is not what I want, because if I resize the screen to smaller size, user is not able to scroll all the way down to the end of that particular div. How can I modify this so that I enable scrolling to the point where the div is visible and only to that point and not over it?
scrollPoint = $(".magazine-section").offset().top - $(window).height();
$(window).scroll(function() {
$(window).scrollTop() > scrollPoint ? $(window).scrollTop(scrollPoint) : '';
}).scroll();
You need to set scrollPoint again when the window is resized using $(window).resize().
$(window).resize(function() {
scrollPoint = $(".magazine-section").offset().top - $(window).height();
}
Related
Hi Guys,
I'm not so good with jQuery and javascript.
I will make a script that take the position of my div and when it's on the top of the page it make something.
Example:
I have a menu. When i scroll the page and my div arrive at the top (or better at 100/200px from top), something in my menu changes...
I hope somebody can help me.
Thanks.
You should use the jQuery offset() scrollTop() and scroll() methods to achieve this.
http://api.jquery.com/offset/
https://api.jquery.com/scrollTop/
https://api.jquery.com/scroll/
Offset returns the pixel value of the elements from the top of the page. Run this on scroll, and you can detect when the element is 100px, or 200px from the top.
Here is an example of running offset() and scrollTop() on window.scroll(), and adding/removing classes when the element has reached the top of this page. In this example, I am fixing the $mainMenuBar to the top of the page when the user scrolls past it, and un-fixing it when the user scroll back up past it.
// declare vars
var $window = $(window),
$mainMenuBar = $('.anchor-tabs'),
$mainMenuBarAnchor = $('.anchor-tabs-anchor');
// run on every pixel scroll
$window.scroll(function() {
var window_top = $window.scrollTop();
var div_top = $mainMenuBarAnchor.offset().top;
if (window_top > div_top) {
// Make the div sticky.
$mainMenuBar.addClass('fixed-top');
$mainMenuBarAnchor.height($mainMenuBar.height());
}
else {
// Unstick the div
$mainMenuBar.removeClass('fixed-top');
$mainMenuBarAnchor.height(0);
}
});
Hope this helps.
You can compare the offset of your div element to how far down the page the user has scrolled.
The $(window).scrollTop() function get you how far the user has scrolled down, i.e :
$(window).scroll(function() {
var yourDiv = $("#theIdOfYourDiv");
var window_offset = yourDiv.offset().top - $(window).scrollTop();
if ( window_offset < 100 )
{
// do what you want
}
});
I'm designing a vertical scroll website where each page is a 105% tall div.
I'm having a bit of trouble getting Javascript to slap a class on a div once the user scrolls down.
The div in question is on the second page, so around 170% from the top. So far I have this:
$(window).scroll(function() {
var height = $(window).scrollTop();
var q = 1.7;
if(height >= q) {
$(window).off("scroll");
$('#A2').addClass('animated bounceIn');
}
});
Unfortunately, it doesn't seem to be working.
Nothing wrong with your script here: http://jsbin.com/dixuqoku/1/edit
To compare to 170% of the viewport height, you could just multiply the viewport height with 1.7:
var oneSeventy = $(window).height() * 1.7;
I'm trying to detect when my user has scrolled to the point just before he sees the first pixel of the footer.
Here is how I'm trying to calculate the position just before the footer:
footerVisible = $(document).height() - $(window).height() - $('footer').height() - 1;
alert(footerVisible);
I'm taking the height of the whole document and subtracting the viewport height and the height of the footer.
This alerts me 3695.
Now I'm logging the scroll position like this:
$window.scroll(function(e){
console.log($window.scrollTop());
}
When scrolling all the way to the bottom of the document (ie: seeing the full footer and end of document) the console indicates I'm at position 3211.
My logic is clearly flawed somewhere...
How can I calculate the 'scrollTop' position that the user will be on just before he sees the first pixel of the footer.
Can anyone provide a fiddle that throws an alert juste before the user sees the footer?
EDIT
Fiddle available here
To see the "first pixel of the footer", the scroll position will have to be one pixel less from one window height from the height of the footer.
var footerVisible = $(document).height() - $(window).height() - $('footer').height() - 1;
Your scroll function should be something like this:
$(window).scroll(function() {
if( $(window).scrollTop() >= footerVisible ) {
alert('Footer Visible');
}
});
I have the below function set in place to fade out/in certain content based on its proximity to the top/bottom of the page. The desired effect is pretty visible and obvious if you click on the ABOUT link on the top, but if you use the WORK button to scroll down the content just pops in at the right position but the fading does not occur as it does with the top.
I'm sure it has something to do with the scrollBottom equivalent I've created but not sure how to go about fixing this
http://coreytegeler.com/new
$(window).load(function(){
$(window).scroll(function() {
var st = $(window).scrollTop();
var sb = $(document).height() - $(window).height() - $(window).scrollTop();
$('#about .content').css({'opacity' : (1 - st/450)});
$('#work .content').css({'opacity' : (450 + sb*-1)});
$('#home .content').css({'opacity' : (-(450 + sb*-1))});
$('#home .content').css({'opacity' : (-(1 - st/450))});
});
});
In my browser, your page loaded with a document height of 2892 and a window height of 952. Plugging those dimensions into your equations gives the opacity of #work varying from -1478 to 450. This has it starting to display when the window is 450px from the bottom, fully fading in when the window is 451px from the bottom - probably a little faster than you intended.
If you change the work line to
$('#work .content').css({'opacity' : ((450 + sb*-1)/450)});
then your opacity will vary from -3.28 to 1, crossing 0 and starting to fade in when the window has scrolled to 450px from the bottom, reaching 1.00 (100% fade in) when the window has scrolled all the way down.
The following code is used to detect if a user has scrolled to the bottom of the page and it works.
if($(window).scrollTop() == $(document).height() - $(window).height()){
//do something
}
Problem:
I don't understand why you subtract the height of the window from the height of the document, then compare that to the scroll height to determine whether or not the bottom of the page has been reached. Why isn't it simply
if($(window).scrollTop() == $(document).height()){
//do something
}
or
if($(window).scrollTop() == $(window).height()){
//do something
}
This is because $(window).scrollTop() returns the position of the top of the page, and $(document).height() returns the position of the bottom of the page. Therefore you need to subtract the height of the window to get the position to compare against, as this will give you the position where the top of the page would be if you were fully scrolled to the bottom.
$(window).scrollTop() is the location of the top of the window relative to the document. On the page I'm looking at right now, that's 1385 if I'm scrolled to the very bottom. $(document).height() is the height of the entire page (1991 for me). $(window).height() is the height of the window (viewport) (606 for me). This means that the position of the top of the viewport plus the height of the window is the position of bottom of the viewport. 1385 + 606 = 1991.
The scrollTop value will never be as high as the document height value. That would mean that you scrolled past the document so that it's all outside the window.
Comparing scrollTop to the window height would only mean that you have scrolled one screen down, not to the bottom of the document.
Subtracting the window height from the document height gives you the value where scrollTop will be, when the bottom of the window is at the bottom of the document.