Make elements to fade in when visible [closed]

Question

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.

---

Questions asking for code must demonstrate a minimal understanding of the problem being solved. Include attempted solutions, why they didn't work, and the expected results. See also: Stack Overflow question checklist

Closed 8 years ago.

Improve this question

I'm using this jQuery plugin One Page Scroll and I would like to know how can I determine that the elements in different pages fade in when visible on the screen? Also it should be responsive as I adapted this plugin to work with Media-queries.

I've tryed to add fadeToggle afterMove, but it displays all the elements.

I've also spotted that the Plugin adds the active class to the element. Maybe I can target this? Please help, I'm novice with jQuery

Answer 1

The documentation states that there is a configuration function called "afterMove".

$('#main').onepage_scroll({
  afterMove: function(index){
    //do your fadeIn here.
    $('section').eq(index).children().fadeIn();
  }
});

Answer 2

Get the window height, then on scroll determine if it is "within the window":

$(function(){
    var $item = $('.itemToShow'),
        $mainTop = $('.main').scrollTop();

    $(window).on({
        scroll:function(){
            if($(document).scrollTop() >= $mainTop){
                $item.fadeIn(300);
            } else {
                $item.fadeOut(300);
            }
        },
        resize:function(){
            $itemTop = $item.scrollTop();
        }
    });
});

This captures the scrollTop of the item (the integer value of pixels from the top you would need to "scroll down" to reach the top of the element), then when scrolling compares that number to the amount of pixels scrolled down. Once the scrolled down value is higher than the amount needed, it will fade in the item, and if you scroll back up (lessening the document scroll value), it will fade it out.

I updated the code to repopulate the $mainTop value based on resizing the window, and optimized it a bit. Should work though, I do practically this exact setup for my sticky menu setup.