如何在没有冲突的情况下连接这两个脚本？

Question

对不起，我的英语。我想将这2种效果连接到一个jsfiddle上，但只有导航气泡幻灯片可以使用。标题滚动分解：/我该怎么做？

我有这个效果不错的滚动标题：

嗨！对不起我的英语不好。我想将这2种效果连接到一个jsfiddle上，但只有导航气泡幻灯片可以使用。标题滚动分解：/我该怎么做？

我有这个效果不错的滚动标题：

(function() {
  // Variables
  var $curve = document.getElementById("curve");
  var last_known_scroll_position = 0;
  var defaultCurveValue = 350;
  var curveRate = 3;
  var ticking = false;
  var curveValue;

  // Handle the functionality
  function scrollEvent(scrollPos) {
    if (scrollPos >= 0 && scrollPos < defaultCurveValue) {
      curveValue = defaultCurveValue - parseFloat(scrollPos / curveRate);
      $curve.setAttribute(
        "d",
        "M 800 300 Q 400 " + curveValue + " 0 300 L 0 0 L 800 0 L 800 300 Z"
      );
    }
  }

  // Scroll Listener
  // https://developer.mozilla.org/en-US/docs/Web/Events/scroll
  window.addEventListener("scroll", function(e) {
    last_known_scroll_position = window.scrollY;

    if (!ticking) {
      window.requestAnimationFrame(function() {
        scrollEvent(last_known_scroll_position);
        ticking = false;
      });
    }

    ticking = true;
  });
})();

@import "https://fonts.googleapis.com/css?family=Ubuntu:300, 400, 500, 700";
*, *:after, *:before {
  margin: 0;
  padding: 0;
}

.svg-container {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: -1;
}

svg path {
  transition: .1s;
}
svg:hover path {
  d: path("M 800 300 Q 400 250 0 300 L 0 0 L 800 0 L 800 300 Z");
}

body {
  background: #fff;
  color: #333;
  font-family: 'Ubuntu', sans-serif;
  position: relative;
}

h3 {
  font-weight: 400;
}

header {
  color: #fff;
  padding-top: 10vw;
  padding-bottom: 30vw;
  text-align: center;
}

main {
  background: linear-gradient(to bottom, #ffffff 0%, #dddee1 100%);
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  padding: 10vh 0 80vh;
  position: relative;
  text-align: center;
  overflow: hidden;
}
main::after {
  border-right: 2px dashed #eee;
  content: '';
  position: absolute;
  top: calc(10vh + 1.618em);
  bottom: 0;
  left: 50%;
  width: 2px;
  height: 100%;
}

footer {
  background: #dddee1;
  padding: 5vh 0;
  text-align: center;
  position: relative;
}

small {
  opacity: .5;
  font-weight: 300;
}
small a {
  color: inherit;
}

  <div class="svg-container">
    <!-- I crated SVG with: https://codepen.io/anthonydugois/pen/mewdyZ -->
    <svg viewbox="0 0 800 400" class="svg">
      <path id="curve" fill="#50c6d8" d="M 800 300 Q 400 350 0 300 L 0 0 L 800 0 L 800 300 Z">
      </path>
    </svg>
  </div>

  <header>
    <h1>This is a header title</h1>
    <h3>Here you are, scroll down.</h3>
  </header>

  <main>
    <p>And the main section.</p>
  </main>

  <footer>
    <p>And, the footer.</p>
  </footer>

我想与此连接：

(function(window) {

  'use strict';

  // class helper functions from bonzo https://github.com/ded/bonzo

  function classReg(className) {
    return new RegExp("(^|\\s+)" + className + "(\\s+|$)");
  }

  // classList support for class management
  // altho to be fair, the api sucks because it won't accept multiple classes at once
  var hasClass, addClass, removeClass;

  if ('classList' in document.documentElement) {
    hasClass = function(elem, c) {
      return elem.classList.contains(c);
    };
    addClass = function(elem, c) {
      elem.classList.add(c);
    };
    removeClass = function(elem, c) {
      elem.classList.remove(c);
    };
  } else {
    hasClass = function(elem, c) {
      return classReg(c).test(elem.className);
    };
    addClass = function(elem, c) {
      if (!hasClass(elem, c)) {
        elem.className = elem.className + ' ' + c;
      }
    };
    removeClass = function(elem, c) {
      elem.className = elem.className.replace(classReg(c), ' ');
    };
  }

  function toggleClass(elem, c) {
    var fn = hasClass(elem, c) ? removeClass : addClass;
    fn(elem, c);
  }

  var classie = {
    // full names
    hasClass: hasClass,
    addClass: addClass,
    removeClass: removeClass,
    toggleClass: toggleClass,
    // short names
    has: hasClass,
    add: addClass,
    remove: removeClass,
    toggle: toggleClass
  };

  // transport
  if (typeof define === 'function' && define.amd) {
    // AMD
    define(classie);
  } else {
    // browser global
    window.classie = classie;
  }

})(window);

/**
 * main4.js
 * http://www.codrops.com
 *
 * Licensed under the MIT license.
 * http://www.opensource.org/licenses/mit-license.php
 * 
 * Copyright 2014, Codrops
 * http://www.codrops.com
 */
(function() {

  var bodyEl = document.body,
    content = document.querySelector('.content-wrap'),
    openbtn = document.getElementById('open-button'),
    closebtn = document.getElementById('close-button'),
    isOpen = false,


    morphEl = document.getElementById('morph-shape'),
    s = Snap(morphEl.querySelector('svg'));
  path = s.select('path');
  initialPath = this.path.attr('d'),
    steps = morphEl.getAttribute('data-morph-open').split(';');
  stepsTotal = steps.length;
  isAnimating = false;

  function init() {
    initEvents();
  }

  function initEvents() {
    openbtn.addEventListener('click', toggleMenu);
    if (closebtn) {
      closebtn.addEventListener('click', toggleMenu);
    }

    document.querySelector('.menu-wrap').addEventListener('click', function(ev) {
      if (ev.target.nodeName === "SPAN" || ev.target.nodeName === "A") {
        toggleMenu();
      }
    });

    // close the menu element if the target it´s not the menu element or one of its descendants..
    content.addEventListener('click', function(ev) {
      var target = ev.target;
      if (isOpen && target !== openbtn) {
        toggleMenu();
      }
    });
  }

  function toggleMenu() {
    if (isAnimating) return false;
    isAnimating = true;
    if (isOpen) {
      classie.remove(bodyEl, 'show-menu');
      // animate path
      setTimeout(function() {
        // reset path
        path.attr('d', initialPath);
        isAnimating = false;
      }, 300);
    } else {
      classie.add(bodyEl, 'show-menu');
      // animate path
      var pos = 0,
        nextStep = function(pos) {
          if (pos > stepsTotal - 1) {
            isAnimating = false;
            return;
          }
          path.animate({
            'path': steps[pos]
          }, pos === 0 ? 400 : 500, pos === 0 ? mina.easein : mina.elastic, function() {
            nextStep(pos);
          });
          pos++;
        };

      nextStep(pos);
    }
    isOpen = !isOpen;
  }

  init();

})();

(function() {
  // Variables
  var $curve = document.getElementById("curve");
  var last_known_scroll_position = 0;
  var defaultCurveValue = 350;
  var curveRate = 3;
  var ticking = false;
  var curveValue;

  // Handle the functionality
  function scrollEvent(scrollPos) {
    if (scrollPos >= 0 && scrollPos < defaultCurveValue) {
      curveValue = defaultCurveValue - parseFloat(scrollPos / curveRate);
      $curve.setAttribute(
        "d",
        "M 800 300 Q 400 " + curveValue + " 0 300 L 0 0 L 800 0 L 800 300 Z"
      );
    }
  }

  // Scroll Listener
  // https://developer.mozilla.org/en-US/docs/Web/Events/scroll
  window.addEventListener("scroll", function(e) {
    last_known_scroll_position = window.scrollY;

    if (!ticking) {
      window.requestAnimationFrame(function() {
        scrollEvent(last_known_scroll_position);
        ticking = false;
      });
    }

    ticking = true;
  });
})();

    .container {
  background: #fff;
}

.menu-button {
  right: 0;
}

#section1 {
  height: 800px;
  border: 1px solid red;
}

#section2 {
  height: 800px;
  border: 1px solid red;
}

#section3 {
  height: 800px;
  border: 1px solid red;
}
        .svg-container {

    z-index: 0!important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://patbb2.ssd-linuxpl.com/strony/base1/js/classie.js"></script>
<script src="https://patbb2.ssd-linuxpl.com/strony/base1/js/snap.svg-min.js"></script>
<script src="https://patbb2.ssd-linuxpl.com/strony/base1/js/main4.js"></script>
<link href="https://patbb2.ssd-linuxpl.com/strony/base1/css/menu_bubble.css" rel="stylesheet" />
<link href="https://patbb2.ssd-linuxpl.com/strony/base1/fonts/font-awesome-4.2.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="https://patbb2.ssd-linuxpl.com/strony/base1/css/demo.css" rel="stylesheet" />
<link href="https://patbb2.ssd-linuxpl.com/strony/base1/css/normalize.css" rel="stylesheet" />


<div class="container">
  <div class="menu-wrap">
    <nav class="menu">
      <div class="icon-list">
        <a href="#section1"><span>Section 1</span></a>
        <a href="#section2"><span>Section 2</span></a>
        <a href="#section3"><span>Section 3</span></a>
      </div>
    </nav>
    <button class="close-button" id="close-button">Close Menu</button>
    <div class="morph-shape" id="morph-shape" data-morph-open="M-7.312,0H15c0,0,66,113.339,66,399.5C81,664.006,15,800,15,800H-7.312V0z;M-7.312,0H100c0,0,0,113.839,0,400c0,264.506,0,400,0,400H-7.312V0z">
      <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 100 800" preserveAspectRatio="none">
						<path d="M-7.312,0H0c0,0,0,113.839,0,400c0,264.506,0,400,0,400h-7.312V0z"/>
					</svg>
    </div>
  </div>
  <button class="menu-button" id="open-button">Open Menu</button>
  <div class="content-wrap">
    <div class="content">

      <div id="section1">
        
        
         <div class="svg-container">
    <!-- I crated SVG with: https://codepen.io/anthonydugois/pen/mewdyZ -->
    <svg viewbox="0 0 800 400" class="svg">
      <path id="curve" fill="#50c6d8" d="M 800 300 Q 400 350 0 300 L 0 0 L 800 0 L 800 300 Z">
      </path>
    </svg>
  </div>

  <header>
    <h1>This is a header title</h1>
    <h3>Here you are, scroll down.</h3>
  </header>

        
      </div>
      <div id="section2">
        <h2>Section 2</h2>
      </div>
      <div id="section3">
        <h2>Section 3</h2>
      </div>

    </div>
  </div>
  <!-- /content-wrap -->
</div>
<!-- /container -->