jQuery .scroll() events

0 votes
934 views
added Apr 3, 2018 in jQuery by LC Marshal Captain (25,790 points)
edited Jul 12, 2018 by LC Marshal
//if scroll more than 147, do this, else do this

window.addEventListener('scroll', function(e) {
  if (window.scrollY > 147) {
    $('body').addClass("fix-prop-header");
  } else {
    $('body').removeClass("fix-prop-header");
  }
});

8 Responses

0 votes
responded Apr 3, 2018 by LC Marshal Captain (25,790 points)
edited Jul 12, 2018 by LC Marshal
//If #target scrolled, find #log and append the div
$( "#target" ).scroll(function() {
  $( "#log" ).append( "<div>Handler for .scroll() called.</div>" );
})

 

0 votes
responded Jun 29, 2018 by LC Marshal Captain (25,790 points)
edited Jul 12, 2018 by LC Marshal
//make sure the event is inserted into the same function
$(window).scroll(function(){
  var $headerSearch = $(".header-search"),
      $showSearch = $('.show-header-search'),
      $hideSearch = $('.hide-header-search');

  if ($(window).scrollTop() >= 300) {
     $('.header-small').fadeIn(200);
     $headerSearch.hide();
  }
  else {
     $('.header-small').hide();
  }

  $showSearch.click(function() {
    $headerSearch.fadeIn(200);
  });

  $hideSearch.click(function() {
    $headerSearch.fadeOut().addClass('hide');
  });

   $showSearch.mouseover(function() {
    $headerSearch.removeClass('hide').addClass('normalize');
  }); 
});
0 votes
responded Apr 12, 2019 by LC Marshal Captain (25,790 points)
$(window).scroll(function() {
    if (window.scrollY > 147) {
      $('.skin-ads').addClass('pos-fixed');
    } else {
      $('.skin-ads').removeClass('pos-fixed');
    }
});

 

0 votes
responded Apr 16, 2019 by LC Marshal Captain (25,790 points)
edited Apr 16, 2019 by LC Marshal
$(window).scroll(function() {
    var awardFBar = $('#awards2019 .floating-bar');
    if (window.scrollY > 800) {
        awardFBar.addClass('in');
    } else {
        awardFBar.removeClass('in');
    }
});

 

SCSS

  .floating-bar {
    position: fixed;
    top: -200%;
    left: 1%;
    color: #000;
    width: 100px;
    background: #fff;
    transition: all .5s .2s ease-in-out;
    font-weight: 600;
    .floating-menu {
      text-align: center;
      padding: 12px;
      border-bottom: 1px solid #000;
      &:hover {
        background: $award19-color;
      }
    }
    &.in {
      @media (min-width: $break_d_sm ) {
        // display: block;
        top: 25%;
      }
      transition: all .5s .2s ease-in-out;
      
    }
    a {
      color: #333;
    }
  }

 

0 votes
responded Apr 16, 2019 by LC Marshal Captain (25,790 points)
$(window).on('scroll', function(){
  var half = $(window).height() / 2;
  
  if ($(window).scrollTop() > half) {
    console.log("Window reached 50%");
  }
});

 

0 votes
responded May 8, 2019 by LC Marshal Captain (25,790 points)
$(window).on('load scroll resize', function() {
  var header = $('.header'),
      heroes = $('.hero'),
      maines = $('.main');
  if (window.innerWidth > 1199 && window.outerWidth > 1199) {
    if ($(this).scrollTop() > parseInt(maines.innerHeight() - heroes.innerHeight())) {
      heroes.addClass('sticky');
      heroes.css('top', parseInt(maines.innerHeight() - heroes.innerHeight() + header.innerHeight()) + 'px');
    } else {
      heroes.removeClass('sticky');
      heroes.removeAttr('style');
    }
  } else {
    heroes.removeClass('sticky');
    heroes.removeAttr('style');
  }
});

 

0 votes
responded Jul 4, 2019 by LC Marshal Captain (25,790 points)

If element scroll certain height, do this

$(window).scroll(function() {
  if (window.scrollY > 1200) {
    parallaxAdCon.hide(); 
  }
  else {
    parallaxAdCon.show(); 
  }
});

 

0 votes
responded Jul 9, 2019 by LC Marshal Captain (25,790 points)
// if screen size is this, and has this..

if ($(window).width() < 768) {
  if((parallaxFlg.css('display') == 'none')){
    parallaxAdCon.hide();  
  }
  else {
    contentPara.css({'margin-top': '600px'});
    parallaxFlg.css({'position': 'fixed', 'top': '140px', 'left': '0'});
  
    $(window).scroll(function() {
        parallaxAdCon.show(); 
        if (window.scrollY > 1300 ) {
          parallaxAdCon.hide(); 
        } else {
          parallaxAdCon.show(); 
        }
    });

  }
}

 

lazacode.org - Malaysia's programming knowledge sharing platform, where everyone can share their finding as reference to others.
...