conflicting scripts not functioning

Question

I have using 2 scripts declared on my footer. each script works perfectly when declared alone but if I declared the second one. the other function the other not.

Here is the code that works when declared alone and with the other script. This has his own js file.

var fixed = false;

$(document).scroll(function() {
    if( $(this).scrollTop() > 20 ) {
        if( !fixed ) {
            fixed = true;
            $('.navbar-fixed-top').addClass('scroll');

        }
    } else {
        if( fixed ) {
            fixed = false;
            $('.navbar-fixed-top').removeClass('scroll');

        }
    }
});

/*
 * Smooth Scroll
 */


$(function() {

        function filterPath(string) {
            return string
            .replace(/^\//,'')
            .replace(/(index|default).[a-zA-Z]{3,4}$/,'')
            .replace(/\/$/,'');
        }

        var locationPath = filterPath(location.pathname);
        var scrollElem = scrollableElement('html', 'body');

        // Any links with hash tags in them (can't do ^= because of fully qualified URL potential)
        $('a[href*=#]').each(function() {

            // Ensure it's a same-page link
            var thisPath = filterPath(this.pathname) || locationPath;
            if (  locationPath == thisPath
                && (location.hostname == this.hostname || !this.hostname)
                && this.hash.replace(/#/,'') ) {

                    // Ensure target exists
                    var $target = $(this.hash), target = this.hash;
                    if (target) {

                        // Find location of target
                        var targetOffset = $target.offset().top;
                        $(this).click(function(event) {

                            // Prevent jump-down
                            event.preventDefault();

                            // Animate to target
                            $(scrollElem).animate({scrollTop: targetOffset}, 400, function() {

                                // Set hash in URL after animation successful
                                location.hash = target;

                            });
                        });
                    }
            }

        });

        // Use the first element that is "scrollable"  (cross-browser fix?)
        function scrollableElement(els) {
            for (var i = 0, argLength = arguments.length; i <argLength; i++) {
                var el = arguments[i],
                $scrollElement = $(el);
                if ($scrollElement.scrollTop()> 0) {
                    return el;
                } else {
                    $scrollElement.scrollTop(1);
                    var isScrollable = $scrollElement.scrollTop()> 0;
                    $scrollElement.scrollTop(0);
                    if (isScrollable) {
                        return el;
                    }
                }
            }
            return [];
        }

    });

The other one is this declared below the first script. now this didn't work when the other is present but works perfectly when alone. also I tried the no conflicting script but same goes for the result.

<script>
$(document).ready(function(){

$(function(){
   document.querySelector( "#nav-toggle" )
    .addEventListener( "click", function() {
      this.classList.toggle( "active" );
      $(".navmobile").slideToggle();
 });
});
      $(window).resize(function() {
      if ($(window).width() >= 767) {
         $(".navmobile").hide();
      }
      else {
    $("#nav-toggle").removeClass("active");
    $(".navmobile").hide();
    }
   });
});
</script>

Answer 1

You probably have this element in your code:

<a href="#" id="nav-toggle"></a>

Note the href="#" part - the first script is using event.preventDefault() for every A element with href that containing "#", so the second script doesn't get click event. remove the href="#" from that element (or leave the attribute empty) and it should work.

Answer 2

Change

// Any links with hash tags in them (can't do ^= because of fully qualified URL potential)
$('a[href*=#]').each(function() {

to

// Any links with hash tags in them (can't do ^= because of fully qualified URL potential)
$('a[href*=#]').not("#av-toggle").each(function() {

so the first script ignore the link you are clicking to do the toggling.