I am encountering an issue with a link on a particular page. When scrolling down, the link works perfectly; however, when I attempt to scroll up, it remains in the same position. Here is a snippet of the code:
(function($){
/* Store the original positions */
var d1 = $('.one');
var d1orgtop = d1.position().top;
var d2 = $('.two');
var d2orgtop = d2.position().top;
var d3 = $('.three');
var d3orgtop = d3.position().top;
var d4 = $('.four');
var d4orgtop = d4.position().top;
/* Respond to the scroll event */
$(window).scroll(function(){
/* Get the current scroll position */
var st = $(window).scrollTop();
/* Change classes based on section positions */
if (st >= d1orgtop) {
d1.addClass('latched');
} else {
d1.removeClass('latched');
}
if (st >= d2orgtop) {
d2.addClass('latched');
} else {
d2.removeClass('latched');
}
if (st >= d3orgtop) {
d3.addClass('latched');
} else {
d3.removeClass('latched');
}
if (st >= d4orgtop) {
d4.addClass('latched');
} else {
d4.removeClass('latched');
}
});
For an example, you can view the code on JSFIDDLE JSFIDDLE
Clicking the href at the top of the page results in a successful scroll down. However, clicking the href at the bottom does not lead to any action. Where could I have made a mistake?