Scroll + custom js function working together

[franticape]

Hello, i would like to have 2 animations working together, the smooth scroll to anchor JS and the custom JS function i coded.

i got a code from this forum for the scroll animation (and edited a bit to suit my case).

jQuery(document).ready(function($) {

  var $body                = $('body');
  var bodyHeight           = $body.outerHeight();
  var adminbarHeight       = $('#wpadminbar').outerHeight();
  var navbarFixedTopHeight = $('.hm1.x-bar').outerHeight();
  var locHref              = location.href;
  var locHashIndex         = locHref.indexOf('#');
  var locHash              = locHref.substr(locHashIndex);
  var dragging             = false;
  
  $body.on('touchmove', function() {
      dragging = true;
  } );
  $body.on('touchstart', function() {
      dragging = false;
  } );


  //
  // Calculate the offset height for various elements and remove it from
  // the element's top offset so that fixed elements don't cover it up.
  //

  function animateOffset( element, ms, easing ) {
    $('html, body').animate({
      scrollTop: $(element).offset().top - adminbarHeight - navbarFixedTopHeight + 1
    }, ms, easing);
  }


  //
  // Page load offset (if necessary).
  //

  $(window).load(function() {
    if ( locHashIndex !== -1 && $(locHash).length ) {
      animateOffset(locHash, 1, 'linear');
    }
  });


  //
  // Scroll trigger.
  //

  $('a[href*="#"]').unbind('touchend click').on('touchend click', function(e) {
      console.log($('.hm1.x-bar-fixed').outerHeight());
    href        = $(this).attr('href');
    notComments = href.indexOf('#comments') === -1;
    if ( href !== '#' && notComments ) {
      var theId = href.split('#').pop();
      var $el   = $('#' + theId);
      if ( $el.length > 0 ) {
        e.preventDefault();
        
        if (dragging) {
            return;
        }
        
        animateOffset($el, 850, 'easeInOutExpo');
      }
    }
  });
});

and i coded this:

jQuery(document).ready(function($, event){
 if ( $(window).width() > 438) {   
   /* $('header.x-masthead, html').addClass('masthead-bckgr-color'); */
    $('.x-main').addClass('effect transformed');
    $('.x-main').toggleClass('transformed',false);
    $('.behind-header').hide();
    $(window).on('click scroll',dynamicForm);
    
  function dynamicForm(e){
    switch(e.type){

    			case 'click':{
    				if($(e.target).closest('.open-btn').length){
    							$('.effect').toggleClass('transformed',true);
              		$('.navbar').css('height','inherit');
              		$('.behind-header').show();
              		$('.behind-header').removeClass('remove-transition');
              		$('.behind-header').addClass('add-transition');
              		$('.behind-header').css('display','show');
              
              		
    				} else if($(e.target).closest('.close-btn').length){
              		$('.effect').toggleClass('transformed',false);
              		$('.behind-header').removeClass('add-transition');
              		$('.behind-header').addClass('remove-transition');
                  
            }else{ 
              if(!$(e.target).closest('behind-header')){
      						$('.effect,').toggleClass('transformed',false);
                  $('.behind-header').removeClass('add-transition');
              		$('.behind-header').addClass('remove-transition');
                  
                
      				}
            }
    				break;
    			}

    			default:{
    				if(!$(e.target).hasClass('close-btn') || !$(e.target).hasClass('open-btn') ){
      						$('.effect').toggleClass('transformed',false);
                  $('.behind-header').removeClass('add-transition');
              		$('.behind-header').addClass('remove-transition');
              		
      				}
            break;
    			}

    		}
  }    
  } else{
        $('.effect').removeClass('transformed');
      }
});

i would like to have both of them happen simultaneously, i mean, i want that if the user clicks a button with an id “#contact” and the offset != 0, it will first scroll up to the top and then trigger the next function (the one i coded).

if you go to my site i’m almost there, because it does scroll to the top but you have to click again for it to open.

i thought that i could maybe trigger another click once the window has scrolled to the top or something but i don’t know if that would be the best approach to solve the issue.

could you please point me to the right direction? i have experimented a bit with the code and you can head to the site’s header ( standard header) and check what i’ve done so far.

[rad]

Hi there,

Thanks for writing in.

Your second code binds it to window’s scroll event and it has no connection with the first code, the first one is like an artificial scrolling made through javascript.

Would you mind providing more information why you need to combine these? But with the information you provided, it seems like you wish to trigger the window’s scroll event when the custom scrolling is executed? Or maybe when the custom scroll starts?

How about changing this

  function animateOffset( element, ms, easing ) {
    $('html, body').animate({
      scrollTop: $(element).offset().top - adminbarHeight - navbarFixedTopHeight + 1
    }, ms, easing);
  }

to this

  function animateOffset( element, ms, easing ) {

   $(window).trigger('scroll'); //trigger it before the custom scroll starts

    $('html, body').animate({
      scrollTop: $(element).offset().top - adminbarHeight - navbarFixedTopHeight + 1
    }, ms, easing);

  }

or to this

  function animateOffset( element, ms, easing ) {

   $(window).trigger('scroll'); //trigger it before the custom scroll starts

    $('html, body').animate({
      scrollTop: $(element).offset().top - adminbarHeight - navbarFixedTopHeight + 1
    }, ms, easing, function(){
                                        $(window).trigger('scroll'); //trigger it after the custom scrolling is done
                        } );

  }

The main key is $(window).trigger('scroll'); triggering the scroll event will also trigger dynamicForm() since it’s bound .

Thanks!

[franticape]

i also thought the trigger event was key (the click one, though).

dynamicForm() is actually the main element here. that’s the site’s contact form, whenever a user clicks a button with the class “open-btn” it should scroll up to the top of the site and trigger the animation that opens the contact form afterwards. right now, with my current configuration, both are happening at the same time. i wanted to know what would be the easiest way to fuse them together.

[franticape]

ok, so i changed the entire code of the scroll-up and made it a little bit more basic but it did the job. the final code looks like this (it’s not the final code, this one is like the first draft and even though it’s a bit messy, it will do for now)

jQuery(document).ready(function($, event){

  if ( $(window).width() > 438) { 

    $('.x-main').addClass('effect transformed');
    $('.x-main').toggleClass('transformed',false);
    $('.behind-header').hide();
    
    $('.x-main').addClass('effect transformed');
    $('.x-main').toggleClass('transformed',false);
    $('.behind-header').hide();
    $(window).on('click scroll',dynamicForm);

  }else{
      $('.effect').removeClass('transformed');
    }

  //FUNCTIONS
 
  function dynamicForm(e){
    switch(e.type){

          case 'click':{
            $('html,body').animate({ scrollTop: 0 }, 'slow', function(){

                if($(e.target).closest('.open-btn').length){
                  $('.effect').toggleClass('transformed',true);
                  $('.navbar').css('height','inherit');
                  $('.behind-header').show();
                  $('.behind-header').removeClass('remove-transition');
                  $('.behind-header').addClass('add-transition');
                  $('.behind-header').css('display','show');        
                }else if($(e.target).closest('.close-btn').length){
                  $('.effect').toggleClass('transformed',false);
                  $('.behind-header').removeClass('add-transition');
                  $('.behind-header').addClass('remove-transition');     
                }else if(!$(e.target).closest('behind-header')){
                  $('.effect,').toggleClass('transformed',false);
                  $('.behind-header').removeClass('add-transition');
                  $('.behind-header').addClass('remove-transition');
                }
            });
            
          break;
          }

          default:{
            if(!$(e.target).hasClass('close-btn') || !$(e.target).hasClass('open-btn') ){
                  $('.effect').toggleClass('transformed',false);
                  $('.behind-header').removeClass('add-transition');
                  $('.behind-header').addClass('remove-transition');
                  
              }
            break;
          }

        }
  }

});

thanks for the support (awesome as always!)

[nabeel]

Glad you managed to solve the issue.

Cheers!