How to fire an event 300px above the end of the document - javascript

While scrolling, I want to fire an event 300px before the end of the document.
Say the height of my HTML document is 1000px and the height of the window viewport is 600px, on scrolling 100px down, the event should be fired.
I've this code
$(window).scroll(function(){
if ($(window).scrollTop() == $(document).height() - $(window).height() ){
callFunction();
}
});
This fires the event when the scroll has reached the bottom. So I modified it as
$(window).scroll(function(){
var height = $(window).height() + 300;
if ($(window).scrollTop() == $(document).height() - height ){
callFunction();
}
});
But obviously, it seems to be wrong since it doesn't work. Please Help.

var down = $(window).height() + 300;
if ($(window).scrollTop() > $(document).height() - down){
try this one
Working demo

I think the problem you are having is that the scrollTop will never have exactly the right pixel value you are looking for. Your math is correct but use a > instead of == and you should be more successful.
$(window).scroll(function(){
var height = $(window).height() + 300;
if ($(window).scrollTop() > $(document).height() - height ){
callFunction();
}
});

I had to modify your script a bit but here is an example:
var invoked = false;
var height = $(document).height() - 300 - $(window).height();
$(window).scroll(function(){
if ($(window).scrollTop() >= height && !invoked ){
invoked = true; // don't call this twice
alert('foo');
callFunction();
}
});

Related

Adjust div height dynamically based on scroll

I know there's a pretty simple way of doing this, but I can't seem to find anything in my searches.
I've found lots of examples of getting to a certain scroll location on the page and then animating a div to a different size, however I want to adjust a div's max height depending on the scroll location. Initially i'd like the div max-height to be about 150px, and then as you scroll from around 200px down the page to 400px down the page, I want the max-height of the div to decrease to 75px. Then obviously as you scroll back up, it gets larger.
I can't provide an example of what I've tried already, as I'm yet to attempt it as I have no idea on where to start.
Note: The size should gradually adjust with the scroll position.
I'm not sure if I understood your problem, but when I did I came out with this :D
$(window).scroll(function(){
var scrollTop = $(window).scrollTop();
if(scrollTop < 200){
maxHeight = 150;
}else if(scrollTop > 400){
maxHeight = 75;
}else{
maxHeight = 150 - 75 * (((scrollTop-200) * 100)/200)/100;
}
$('#thediv').stop().animate({'max-height': maxHeight+"px"}, 500);
})
Here you have a sample : https://jsfiddle.net/keccs4na/
You could try this:
$(window).on('scroll', function() {
var scrollTop = $(window).scrollTop();
if (scrollTop >= 200 && scrollTop <= 400) {
$('#divID').stop().animate({height: "75px"}, 250);
} else {
$('#divID').stop().animate({height: "150px"}, 250);
}
});
Note: You'll want to use CSS to initially set the height to 150px.
Try this.
$(window).on('scroll', function () {
var v = $(window).scrollTop();
if (v > 200) {
$('#id-of-div').css({"height": "75px","max-height":"75px"});
}
else {
$('#id-of-div').css({"height": "150px","max-height":"150px"});
}
});
EDIT:
$(window).on('scroll', function () {
var v = $(window).scrollTop();
if (v > 200) {
$('#id-of-div').animate({"height": "75px","max-height":"75px"},500);
}
else {
$('#id-of-div').animate({"height": "150px","max-height":"150px"},500);
}
});

jQuery height doesn't equal scrollTop

In my jquery I am trying to calculate when the scrollbar is 100px from the bottom, and when it gets there I will do an ajax query (for now I am doing an alert as you can see).
$(document).on("scroll", function(e){
var scrollHeight = $(document).height();
var offset = $(document).scrollTop();
console.log(scrollHeight);
console.log(offset);
if(scrollHeight - offset <= 100){
alert("here");
}
});
For some reason that I can not figure out it doesn't work. If I scroll to the bottom I would assume that the height() would equal scrollTop() but it doesn't, and here is what it shows:
scrollHeight = 1923
offset = 998
Am I using the wrong methods for this?
You need to add the height of the window with scrollTop. Link
$(document).on('scroll', function () {
var docHeight = $(document).height(),
scrollTop = $(document).scrollTop(),
windowHeight = $(window).height();
if (docHeight - (scrollTop + windowHeight) <= 100) {
alert(docHeight - (scrollTop + windowHeight));
}
});
Looks like you might be forgetting to subtract the pane's view-able height. I've done something similar in my code here:
var scrollPos = $('#viewable-div').height() - $('#scrolling-content').height();
if ($("#scrolling-content").scrollTop() > (scrollPos - 100)) {
//load more
}
When you scroll the element all the way down, scrollHeight should be equal to scrollTop + clientHeight.
If the element has no scrollbars scrollWidth/Height should be equal to clientWidth/Height.
• When the element has no scrollbars IE makes the scrollHeight equal to the actual height of the content; and not the height of the element. scrollWidth is correct, except in IE8, where it’s 5 pixels off.
• Opera gives odd, incorrect values.
You can use a statement like this
((container.scrollTop() + container.height() + detectionOffset) >=
container.get(0).scrollHeight)
Where container could be the document.body and detectionOffset would be 100
This has been answered a few times before, including here
One piece of code that I'm using and is always working (even on Opera) is this:
$(window).on("scroll", function () {
var scrollHeight = $(document).height();
var scrollPosition = $(window).height() + $(window).scrollTop();
if ((scrollHeight - scrollPosition) / scrollHeight === 0) {
/* Do something */
}
});

JQuery window scroll top and bottom

I am able to load my ajax when scrolling all the way to the bottom, i am trying to figure out how i can modify the piece of code below so that it works only when the window is scrolled to the top ?
$(window).scroll(function () {
if ($(document).height() <= $(window).scrollTop() + $(window).height()) {
//this works here for scrolling bottom
}
else if ($(document).height() >= $(window).scrollTop() + $(window).height()){
//i tried checking for greater than the window scroll but that didn't owrk
}
});
When the scrollTop() returns the vertical position of the scroll bar 0 it means the scroll bar is in top position.
$(window).scroll(function () {
if ($(window).scrollTop() == 0){
alert("Up");
}
});
Or you can update your code as follows,
$(window).scroll(function () {
if ($(window).scrollTop() + $(window).height() < $(document).height()){
alert("Up");
//i tried checking for greater than the window scroll but that didn't work
}
});
Check this or perhaps you should check if height of document and window object to make sure they're not null.
$(window).scroll(function () {
if ($(document).height() <= Number($(window).scrollTop() + $(window).height())) {
//this works here for scrolling bottom
}
// only greater i think, not equa
else if ($(document).height() > Number($(window).scrollTop() + $(window).height())){
}
});

Trigger function at specific window size

I have a div that follows the browser as it scrolls and is contained within another div.
The following function keeps my div in place and moving when the user scrolls:
$(function() {
var offset = $("#sidebar").offset();
var topPadding = 15;
$(window).scroll(function() {
if ($(window).scrollTop() > offset.top) {
$("#sidebar").stop().animate({
marginTop: $(window).scrollTop() - offset.top + topPadding
});
} else {
$("#sidebar").stop().animate({
marginTop: 0
});
};
});
});
This works pretty well, except when the browser height is less than 400px, then it gets buggy.
So I thought I'd include a simple line to get it to only run when the browser is >=400 as such:
if (window.innerHeight >= 400) {
$(function() {
var offset = $("#sidebar").offset();
var topPadding = 15;
$(window).scroll(function() {
if ($(window).scrollTop() > offset.top) {
$("#sidebar").stop().animate({
marginTop: $(window).scrollTop() - offset.top + topPadding
});
} else {
$("#sidebar").stop().animate({
marginTop: 0
});
};
});
});
}
This seems to work fine so long as the initial browser height is greater than 400px. If the browser window is resized from it's initial height, the code will still execute, which is counter to what I want.
Essentially, is there a way to dynamically track the browser size and only run this code when the height is larger than 400px and not run when less than 400px?
Thanks for any help!
Just move the check into your event handler:
$(function() {
var offset = $("#sidebar").offset();
var topPadding = 15;
$(window).scroll(function() {
if (window.innerHeight >= 400) { // <=== Moved it here
if ($(window).scrollTop() > offset.top) {
$("#sidebar").stop().animate({
marginTop: $(window).scrollTop() - offset.top + topPadding
});
} else {
$("#sidebar").stop().animate({
marginTop: 0
});
}
}
});
});
Now the check is done when you're processing the scroll event, rather than just once at the outset preventing the scroll from being hooked at all.
Separately, because you're doing this on the scroll event, which happens pretty often, I'd try to minimize the number of times you wrap or look up elements. Instead of doing it on every event, since window isn't going to change and I suspect your sidebar isn't going to change either, wrap/look them up once:
$(function() {
var offset = $("#sidebar").offset();
var topPadding = 15;
var sideBar = $("#sidebar");
var $window = $(window);
$window.scroll(function() {
if ($window.height() >= 400) { // <=== Moved it here
if ($window.scrollTop() > offset.top) {
sidebar.stop().animate({
marginTop: $window.scrollTop() - offset.top + topPadding
});
} else {
sidebar.stop().animate({
marginTop: 0
});
}
}
});
});
That also makes it reasonable to use jQuery's height function on window for cross-browser compatibility.
To track the browser width & height as it is being resized:
$(window).resize(function()
{
var viewportWidth = $(window).width();
var viewportHeight = $(window).height();
// More code here...
};
However, I think there is a better way to keep your div in place, one that does not involve Javascript. Have you tried using position:fixed?

Jquery follow scroll

I have a sort of sidebar on my website, which has to scroll down together with the user so that it is always in the view.
The code I'm using now is actually working fine however there is one problem. On smaller screens the sidebar scrolls before your at the sidebar thus making it impossible to see it all even if you scroll.
So what I want is the sidebar to scroll with the bottom instead of it being pushed down with the top so that when you reach the end of the sidebar it starts to scroll.
This is the code that I'm currently using.
var documentHeight = 0;
var topPadding = 10;
$(function() {
var offset = $("#mainright").offset();
documentHeight = $(document).height();
$(window).scroll(function() {
var sideBarHeight = $("#mainright").height();
if ($(window).scrollTop() > offset.top) {
var newPosition = ($(window).scrollTop() - offset.top) + topPadding;
var maxPosition = documentHeight - (sideBarHeight);
if (newPosition > maxPosition) {
newPosition = maxPosition;
}
$("#mainright").stop().animate({
marginTop: newPosition
});
} else {
$("#mainright").stop().animate({
marginTop: 0
});
};
});
});
I guess the "best practice" for accomplishing a task like this is to use dynamically changing css position from absolute to fixed and vice versa. A basic example could look like:
$(function(){
var $box = $('.box'),
offset = $box.offset(),
doc_h = $(document).height();
$(window).scroll(function(){
if($(window).scrollTop() > offset.top) {
if(!$box.hasClass('fix'))
$box.toggleClass('normal fix');
}
else{
if(!$box.hasClass('normal'))
$box.toggleClass('normal fix');
}
});
});​
Example in action: http://www.jsfiddle.net/YjC6y/14/
$(function() {
var top = 50;
$(window).scroll(function() {
$('#box').stop().animate({ top: $(window).scrollTop() + top}, 1000);
});
});
Try the example : http://jsbin.com/omiyi3
I think you can instead make the sidebar responsive by throwing your function into one of these:
if (responsive_viewport >= 768) {}
This makes it so that the function will only load if the viewport is bigger than or equal to 768px.

Categories

Resources