JQuery window scroll top and bottom - javascript

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())){
}
});

Related

Sticky remove on mobile screen

I have done topbar sticky on desktop view with the help of Jquery but I don't want a sticky top bar on a mobile screen during scroll.
I did topbar sticky with this code:
$(document).ready(function(){
$(window).scroll(function(){
var sticky = $('#top-header'),
scroll = $(window).scrollTop();
if (scroll >= 100) {
sticky.addClass('fixed');
} else {
sticky.removeClass('fixed');
}
});
});
You should modify your condition statement:
if ((scroll >= 100) && ($(window).width() > /* Mobile screen width */)) {
sticky.addClass('fixed');
}
You can add media query using css or you can define screen width for your jQuery code.
if($(window).width() > 767){
$(document).ready(function(){
$(window).scroll(function(){
var sticky = $('#top-header'),
scroll = $(window).scrollTop();
if (scroll >= 100) {
sticky.addClass('fixed');
} else {
sticky.removeClass('fixed');
}
});
});
}
use this code and you also need one more condition for mobile device width. using this code you can remove the "fixed" class on resize also.
$(document).ready(function(){
$(window).on('scroll resize',function(){
var sticky = $('#top-header');
var scrollTop = $(document).scrollTop();
var windowWidth = $(window).width();
if(scrollTop >= 200 && windowWidth >= 768){
sticky.addClass('fixed');
}else {
sticky.removeClass('fixed');
}
});
});

How to set 'back to top' above footer after scroll to bottom

I use the code given below for my back to top option
$(window).scroll(function() {
if ($(this).scrollTop()) {
$("#to-top").fadeIn();
} else {
$("#to-top").fadeOut();
}
if($(window).scrollTop() + $(window).height() < $(document).height() - $("#footer").height()) {
$('#to-top').css("position","fixed"); //resetting it
$('#to-top').css("bottom","0"); //resetting it
}
if($(window).scrollTop() + $(window).height() > $(document).height() - $("#footer").height()) {
$('#to-top').css("position","relative"); // make it related
$('#to-top').css("bottom","188px"); // 60 px, height of #toTop
}
});
$("#to-top").click(function() {
$("html, body").animate({scrollTop: 0}, 1000);
});
but it does not work while i scroll down, because my content has the position relative as well as i have a floting div which position is absolute.In above code i need to set the position of my content is absolute.If i do this the two content displace.
here is my html code:
<a id="to-top" style="position:fixed;bottom:0px;right:15px;" href="#" title="Back to Top"><img src="../images/BackToTop_icon.jpg"/></a>
how can i fixed this problem..
if you don't want to animate anything, then window.scrollTo(0,0) will do. (x coord, y coord).
If you want to animate it, then this will do:
$('body').animate({scrollTop:0},2000);
no need to create old html hash-anchors (www.domain.com/index.html#paragraph2), jQuery does the trick :)
This is now correct and it works....
$(document).ready(function() {
$("#to-top").css("display","none");
});
$(window).scroll(function() {
if ($(this).scrollTop()) {
$("#to-top").fadeIn();
} else {
$("#to-top").fadeOut();
}
if($(window).scrollTop() + $(window).height() < $(document).height() - $("#sc-main-footer").height()) {
$('#to-top').css("position","fixed"); //resetting it
$('#to-top').css("bottom","0"); //resetting it
}
if($(window).scrollTop() + $(window).height() > $(document).height() - $("#sc-main-footer").height()) {
$('#to-top').css("bottom","188px");
}
});
$("#to-top").click(function() {
$("html, body").animate({scrollTop: 0}, 1000);
});

Sticky sidebar scrolling lag and infinite scroll

I have a sidebar that scrolls down with the page. However, the sidebar seems to lag behind the scrolling of the page, ex. scroll down and sidebar shows up a few seconds later. Also, the sidebar will keep going down, making the page longer, and causing the footer to become inaccessible. What do I need to do to make the sidebar move with the scroll and for the sidebar to stop moving at the footer? Here is my jQuery code:
$(function() {
var $sidebar = $("aside"),
$window = $(window),
offset = $sidebar.offset(),
topPadding = 50;
$window.scroll(function() {
if ($window.scrollTop() > offset.top) {
$sidebar.stop().animate({
marginTop: $window.scrollTop() - offset.top + topPadding
});
} else {
$sidebar.stop().animate({
marginTop: 0
});
}
});
});
An example can be seen at http://meddiary.com/plans-pricing/. Fixing the code is welcomed but just pointing me in the right direction is the best.
Try solving it with pure CSS:
.affix {
position: fixed;
}
Or you can use an existing jQuery plugin like this one:
http://andrewhenderson.me/tutorial/jquery-sticky-sidebar/
This is how I fixed my issue:
if ($(window).width() > 767) {
var $sidebar = $("aside"),
$window = $(window),
offset = $sidebar.offset(),
topPadding = 50;
$window.scroll(function() {
if($window.scrollTop() > $('h3').offset().top) {
$sidebar.stop().css('marginTop', '680px');
} else if ($window.scrollTop() > offset.top) {
$sidebar.stop().animate({
marginTop: $window.scrollTop() - offset.top + topPadding
}, 100, function() {
});
} else {
$sidebar.stop().animate({
marginTop: 0
});
}
});
};
if ($(window).width() > 767) part keeps the sidebar from scrolling if the viewport is wider than 767px. if($window.scrollTop() > $('h3').offset().top) { $sidebar.stop().css('marginTop', '680px'); } part is for when the top of the viewport hits the desired element, h3, the scrolling stops. That part must be first because the else if statement is always true! Then I just reduced the animation time to stop the lagging.

Footer animates up when you reach bottom of screen, but fails to animate down when you scroll back up

I have a footer that animates up when the user scrolls to the very bottom of the page. Right now it is currently staying in the post-animation state after animation completes. However, I'm trying to get it to animate back down once the user scrolls back up the page a little bit.
Here's my code so far. This correctly animates the footer up, but not back down:
$(window).scroll(function() {
var i;
i = 0;
if ($(window).scrollTop() + $(window).height() === $(document).height()) {
i = 1;
$("footer").animate({
marginBottom: "-22px"
}, 500);
}
else if (i > 0 && $(window).scrollTop() + $(window).height() <= $(document).height() * 0.9) {
$("footer").animate({
marginBottom: "-156px"
}, 500);
i = 0;
}
});
You're resetting your "flag" variable, i on every scroll.
Here's a fiddle demonstrating a workaround (and what I mentioned in the comments): http://jsfiddle.net/px8y9/
var isShowing = false;
$(window).scroll(function() {
if ($(window).scrollTop() + $(window).height() === $(document).height()) {
alert("Show Footer");
isShowing = true;
} else if (isShowing === true && $(window).scrollTop() + $(window).height() <= $(document).height() * 0.9) {
alert("Hide Footer");
isShowing = false;
}
});

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

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();
}
});

Categories

Resources