CODEWITHSUNDEEP
javascriptjqueryhtml
user3483104
user3483104

Reputation: 1

Change html contents of div when a specific anchor is reached

I have a one-page scrolling site with changing backgrounds. I have a static footer that says 'scroll down' but when the user reaches the last page/anchor I want it to disappear or say 'end'.

My code is a mish-mash of other things I have found on Stack Overflow but here goes:

$(function () {
    $(document).scroll(function () {
        $('.section').each(function () {
            var section = $(this).attr('href');
            if (section === "#4thPage") {
                document.getElementById("scrolldown").innerHTML = "newtext";
                currentSection = section;
            }
        });
    });
});

On JS Fiddle: http://jsfiddle.net/charleskh/X5Kqe/13/

Thank you.

Upvotes: 0

Views: 162

Answers (3)

Näbil Y
Näbil Y

Reputation: 1650

Probably a bit overkill, but I was doing something similar recently and seeing this post I was inspired to rewrite it as a plugin.

Here are the plugins (examples at bottom):

function isFunction(f) {
    var getType = {};
    return f && getType.toString.call(f) === '[object Function]';
}

$.prototype.scrollPosition = function(topPos, options) {
    var self = this;
    $(document).on('scroll', function() {
        var yPos = isFunction(topPos) ? topPos.call(this) : topPos;

        if($(this).scrollTop() > yPos) {
             if(isFunction(options.scrollPast) &&
               (typeof(this.lastScrollTop) === "undefined" || this.lastScrollTop <= yPos))
                options.scrollPast.call(self);
        }
        else if(isFunction(options.scrollReturn) &&
               (typeof(this.lastScrollTop) === "undefined" || this.lastScrollTop > yPos))
            options.scrollReturn.call(self);

        this.lastScrollTop = $(this).scrollTop();
    });
}

$.prototype.scrollAt = function(options, includeMargins) {
    var self = this;
    $(this).scrollPosition(function() {
        var topPos = $(self).offset().top;
        if(includeMargins)  {
            topPos -= parseInt($(self).css('margin-top'));
        }
        return topPos;
    }, options);
}

$.prototype.scrollPast = function(options, includeMargins) {
    var self = this;
    $(this).scrollPosition(function() {
        return $(self).offset().top + $(self).outerHeight(includeMargins);
    }, options);
}

Examples

In below example, it will call the scrollPast callback when you have past the y-coordinate 100, and scrollReturn after coming from >= 100 back to < 100.

$(element).scrollPosition(100, {
    scrollPast: function() {
        console.log("REACHED", $(this));
    },
    scrollReturn: function() {
        console.log("BEFORE", $(this));
    }
});

You may also use a function callback that returns a position, in the place of the fixed position (being 100 in previous example). Demonstrated in below example, the elements actual position is considered despite if it changes.

$(element).scrollPosition(function() {
    return $(this).offset().top;
}, {callbacks etc...});

Similarly, the two implementations .scrollAt and .scrollPast are using this method. .scrollAt takes effect when the element is just about to escape your screen (optionally considers margin) while .scrollPast takes effect when it's outside your screen (also margin is optional). Example usage (same parameters for both):

$(element).scrollPast({
    scrollPast: function() {
        console.log("REACHED", $(this));
    },
    scrollReturn: function() {
        console.log("BEFORE", $(this));
    }
}, true);

The callback name will always be scrollPast, for all of those implementations. Therefore, the .scrollAt would look like this:

$(element).scrollAt({
    scrollPast: function() {
        console.log("REACHED", $(this));
    },
    scrollReturn: function() {
        console.log("BEFORE", $(this));
    }
}, true);

Upvotes: 1

Terry
Terry

Reputation: 66133

The strategy is to check for the position of the last element of interest you want against the scrollTop value of the viewport — if the scrollTop position exceeds that (i.e. you have scrolled past the element), which can be evaluated by using a conditional statement, you can perform the action you want:

$(function () {
    // You should consider throttling the firing of the scroll event for better performance
    $(window).scroll(function () {
        // 1. Get position where you want the element to disappear
        //    You should update the selector as you see fit
        // 2. Get scroll position along the y-axis with .scrollTop
        var threshold = $('.section[href*="4thPage"]').offset().top,  // #1
            scrollY = $(window).scrollTop();                          // #2

        // Compare threshold and scrollY
        if(scrollY > threshold) {
            $('#scrolldown').text('newtext');
        }
    });
});

http://jsfiddle.net/teddyrised/X5Kqe/16/

Upvotes: 1

keypaul
keypaul

Reputation: 497

You need to get the offset value (top) of that anchor, and make a condition to compare it with the value of window scrolled.

Upvotes: 0

Related Questions