CODEWITHSUNDEEP
javascriptjqueryhtmlcss
jasonh
jasonh

Reputation: 329

Fade Elements In on Scroll down and Fade out on up Scroll

I am trying to achieve a scroll fadeIn within a specific section in this case section with the id is test.

The fadeIn works fine without the if statement, but I would think I need to have it to identify the section. What I am also struggling to do is have the same class fadeOut when the mouse scrolls back up.

I am fairly new at Jquery and would appreciate the assistance.

css

.third_third { display:none; width: 100%; height: 150px; margin-bottom: 3%; }

jquery

$(document).ready(function() {
    if ($('section#test:visible')) {
        $(document).scroll(function() {
            $('.third_third').css("display", "inline-block").fadeIn(2000);
        });
    });
});

Upvotes: 1

Views: 1249

Answers (3)

Rémi Becheras
Rémi Becheras

Reputation: 15222

To identify your element, use this :

$(document).ready(function() {    
    $(document).scroll(function() {
        $('section#test.third_third').css("display", "inline-block").fadeIn(2000);
    });     
});

Upvotes: 0

Bokdem
Bokdem

Reputation: 464

Make the div appear after a certain amount of pixels scrolling down. The fadeIn transition is done using CSS.

This would be your jQuery code:

var $document = $(document),
$element = $('.fixed-menu'),
className = 'hasScrolled';

$document.scroll(function() {
  if ($document.scrollTop() >= 100) {
    $element.addClass(className);
  } else {
    $element.removeClass(className);
  }
});

Here i set up a jsFiddle as example

Upvotes: 1

twill
twill

Reputation: 775

Please indent your code! makes it much easier to read.. Maybe try something like this: http://jsfiddle.net/j5q0tu86/4/

$(document).ready(function () {
    $('.wrapper').bind('mousewheel', function (e) {

        if (e.originalEvent.wheelDelta < 0) {
            $('.third_third').stop(true, true).fadeIn(300);
            console.log('Scrolling Down');

        } else {
            $('.third_third').stop(true, true).fadeOut(300);
            console.log('Scrolling Up');
        }
    });
});

Upvotes: 0

Related Questions