当页面滚动时，我如何才能获取下降导航以不漏洞

Question

当页面滚动滚动导航"错误"时。当页面滚动导航打开并关闭时。然后，当您滚动回到顶部，导航重新恢复相对定位，直到您开始向下滚动之前，将不再打开（此时第一个错误再次发生）。

是否有更有效的方法来完成这项任务？

我在下面列出了完整的代码，以防该网站上有其他任何可能导致问题发生的信息。

我正在寻找JavaScript答案。

/* Navigation Scroll */
var startPos = -1;
window.onscroll = function () {
    var bar = document.getElementById('pm-nav');
    var ourCompany = document.getElementById("our-company");
    var services = document.getElementById("services");
    var products = document.getElementById("products");
    var resources = document.getElementById("resources");
    var goTo = document.getElementById("go-to");
    if (startPos < 0) startPos = findPosY(bar);
    if (pageYOffset > startPos) {
        bar.style.position = 'fixed';
        bar.style.top = 0;
        ourCompany.classList.toggle("dropdown-content-scroll");
        services.classList.toggle("dropdown-content-scroll");
        products.classList.toggle("dropdown-content-scroll");
        resources.classList.toggle("dropdown-content-scroll");
        goTo.classList.toggle("dropdown-content-scroll");
        
    } else {
        bar.style.position = 'relative';
        ourCompany.classList.remove('dropdown-content-scroll');
        services.classList.remove('dropdown-content-scroll');
        products.classList.remove('dropdown-content-scroll');
        resources.classList.remove('dropdown-content-scroll');
        goTo.classList.remove('dropdown-content-scroll');
    }
};
function findPosY(obj) {
    var curtop = 0;
    if (typeof (obj.offsetParent) != 'undefined' && obj.offsetParent) {
        while (obj.offsetParent) {
            curtop += obj.offsetTop;
            obj = obj.offsetParent;
        }
        curtop += obj.offsetTop;
    }
    else if (obj.y)
        curtop += obj.y;
    return curtop;
}
/* When the user clicks on the button, toggle between hiding and showing the dropdown(s) content */
function toggleDrop(drop) {
    switch (drop) {
        case "our-company":
            document.getElementById("services").classList.remove('active-drop');
            document.getElementById("products").classList.remove('active-drop');
            document.getElementById("resources").classList.remove('active-drop');
            document.getElementById("go-to").classList.remove('active-drop');
            document.getElementById("our-company").classList.toggle("active-drop");
            break;
        case "services":
            document.getElementById("our-company").classList.remove('active-drop');
            document.getElementById("products").classList.remove('active-drop');
            document.getElementById("resources").classList.remove('active-drop');
            document.getElementById("go-to").classList.remove('active-drop');
            document.getElementById("services").classList.toggle("active-drop");
            break;
        case "products":
            document.getElementById("services").classList.remove('active-drop');
            document.getElementById("our-company").classList.remove('active-drop');
            document.getElementById("resources").classList.remove('active-drop');
            document.getElementById("go-to").classList.remove('active-drop');
            document.getElementById("products").classList.toggle("active-drop");
            break;
        case "resources":
            document.getElementById("services").classList.remove('active-drop');
            document.getElementById("products").classList.remove('active-drop');
            document.getElementById("our-company").classList.remove('active-drop');
            document.getElementById("go-to").classList.remove('active-drop');
            document.getElementById("resources").classList.toggle("active-drop");
            break;
        case "go-to":
            document.getElementById("services").classList.remove('active-drop');
            document.getElementById("products").classList.remove('active-drop');
            document.getElementById("resources").classList.remove('active-drop');
            document.getElementById("our-company").classList.remove('active-drop');
            document.getElementById("go-to").classList.toggle("active-drop");
            break;
        default:
            //make this unknown...
    }
}
var ourCompany = document.getElementById("our-company");
var services = document.getElementById("services");
var products = document.getElementById("products");
var resources = document.getElementById("resources");
var goTo = document.getElementById("go-to");
// Close the dropdown(s) if the user clicks outside of it
window.onclick = function (e) {
    if (!e.target.matches('.dropbtn')) {
        if (ourCompany.classList.contains('active-drop')) {
            ourCompany.classList.remove('active-drop');
        }
        if (services.classList.contains('active-drop')) {
            services.classList.remove('active-drop');
        }
        if (products.classList.contains('active-drop')) {
            products.classList.remove('active-drop');
        }
        if (resources.classList.contains('active-drop')) {
            resources.classList.remove('active-drop');
        }
        if (goTo.classList.contains('active-drop')) {
            goTo.classList.remove('active-drop');
        }
    }
}

/* Basic Site Rules */
* {margin:0;padding:0;}
.maxWidth-1280 {max-width:1280px;margin:0 auto;}
.maxWidth-1440 {max-width:1440px;margin:0 auto;}
.pm-box-sizing * {box-sizing: border-box;}
    /* Columns */
        .pm-col-5 {
            float: left;
            width: 20%;
        }
        /* Clear floats after the columns */
        .pm-row:after {
            content: "";
            display: table;
            clear: both;
        }
    /* Columns :END*/
/* Basic Site Rules :END */
/* Main Header */
.pm-mainHeader {
    text-align:center;
    padding: 65px 0;
}
/* Main Header :END */
/* Main Navagation */
.pm-mainNav {
    overflow: hidden;
    background-color: #333;
    font-family: Arial;
    margin: 0 auto;
    z-index:10; 
    width:100%;
    left:0;
    right:0;
}
.dropdown {
    float: left;
    overflow: hidden;
}
.dropdown .dropbtn {
    font-size: 16px;    
    border: none;
    outline: none;
    color: white;
    width: 100%;
    padding: 16px;
    background-color: inherit;
}
.pm-mainNav a:hover, .dropdown:hover .dropbtn {
    background-color: white;
    color: black;
}
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    width: 100%;
    left: 0;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 2;
}
.dropdown-content-scroll {
    position: fixed;
    top: 50px;
}
.dropdown-content .header {
    background: red;
    padding: 16px;
    color: white;
}
.active-drop {
    display: block;
}
/* Create three equal columns that floats next to each other */
.column {
    float: left;
    width: 33.33%;
    padding: 10px;
    background-color: #ccc;
    height: 250px;
}
.column a {
    float: none;
    color: black;
    padding: 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}
.column a:hover {
    background-color: #ddd;
}
/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
  @media (max-width: 600px) {
    .pm-mainNav a {width: 100%;}
    .dropdown, .dropbtn {width: 100%;}
    .column {
      width: 100%;
      height: auto;
    }
  }
/* Main Navagation :END */
/* Main Content */
.pm-mainContent {
    background: #e3e3e3;
    padding: 500px 0;
    text-align:center;
}
/* Main Content :END*/
/* Main Footer */
.pm-mainFooter {
    padding: 100px 0;
    text-align:center;
    background: #333;
    color: white;
}
/* Main Footer :END */

    <form id="siteForm" runat="server">
        <!-- Website Header -->
        <header class="pm-mainHeader">
            <div class="maxWidth-1440">This is a Header</div>
        </header>
        <!-- Website header :END -->
        <!-- Website Navigation -->
        <div id="pm-nav" class="pm-mainNav">
            <div class="maxWidth-1440">
                <div class="pm-row pm-box-sizing">
                    <div class="dropdown pm-col-5">
                        <button onclick="toggleDrop('our-company');return false;" class="dropbtn">Our Company</button>
                        <div id="our-company" class="dropdown-content maxWidth-1440">
                            <div class="header">
                                <h2>Menu our-company</h2>
                            </div>   
                            <div class="pm-row">
                                <div class="column">
                                    <h3>Category 1</h3>
                                    <a href="#">Link 1</a>
                                    <a href="#">Link 2</a>
                                    <a href="#">Link 3</a>
                                </div>
                                <div class="column">
                                    <h3>Category 2</h3>
                                    <a href="#">Link 1</a>
                                    <a href="#">Link 2</a>
                                    <a href="#">Link 3</a>
                                </div>
                                <div class="column">
                                    <h3>Category 3</h3>
                                    <a href="#">Link 1</a>
                                    <a href="#">Link 2</a>
                                    <a href="#">Link 3</a>
                                </div>
                            </div>
                        </div>
                    </div> 
                    <div class="dropdown pm-col-5">
                        <button onclick="toggleDrop('services');return false;" class="dropbtn">Services</button>
                        <div id="services" class="dropdown-content maxWidth-1440">
                            <div class="header">
                                <h2>Menu services</h2>
                            </div>   
                            <div class="pm-row">
                                <div class="column">
                                    <h3>Category 4</h3>
                                    <a href="#">Link 1</a>
                                    <a href="#">Link 2</a>
                                    <a href="#">Link 3</a>
                                </div>
                                <div class="column">
                                    <h3>Category 5</h3>
                                    <a href="#">Link 1</a>
                                    <a href="#">Link 2</a>
                                    <a href="#">Link 3</a>
                                </div>
                                <div class="column">
                                    <h3>Category 6</h3>
                                    <a href="#">Link 1</a>
                                    <a href="#">Link 2</a>
                                    <a href="#">Link 3</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="dropdown pm-col-5">
                        <button onclick="toggleDrop('products');return false;" class="dropbtn">Products</button>
                        <div id="products" class="dropdown-content maxWidth-1440">
                            <div class="header">
                                <h2>Menu products</h2>
                            </div>   
                            <div class="pm-row">
                                <div class="column">
                                    <h3>Category 1</h3>
                                    <a href="#">Link 1</a>
                                    <a href="#">Link 2</a>
                                    <a href="#">Link 3</a>
                                </div>
                                <div class="column">
                                    <h3>Category 2</h3>
                                    <a href="#">Link 1</a>
                                    <a href="#">Link 2</a>
                                    <a href="#">Link 3</a>
                                </div>
                                <div class="column">
                                    <h3>Category 3</h3>
                                    <a href="#">Link 1</a>
                                    <a href="#">Link 2</a>
                                    <a href="#">Link 3</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="dropdown pm-col-5">
                        <button onclick="toggleDrop('resources');return false;" class="dropbtn">Resources</button>
                        <div id="resources" class="dropdown-content maxWidth-1440">
                            <div class="header">
                                <h2>Menu resources</h2>
                            </div>   
                            <div class="pm-row">
                                <div class="column">
                                    <h3>Category 1</h3>
                                    <a href="#">Link 1</a>
                                    <a href="#">Link 2</a>
                                    <a href="#">Link 3</a>
                                </div>
                                <div class="column">
                                    <h3>Category 2</h3>
                                    <a href="#">Link 1</a>
                                    <a href="#">Link 2</a>
                                    <a href="#">Link 3</a>
                                </div>
                                <div class="column">
                                    <h3>Category 3</h3>
                                    <a href="#">Link 1</a>
                                    <a href="#">Link 2</a>
                                    <a href="#">Link 3</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="dropdown pm-col-5">
                        <button onclick="toggleDrop('go-to');return false;" class="dropbtn">Go To</button>
                        <div id="go-to" class="dropdown-content maxWidth-1440">
                            <div class="header">
                                <h2>Menu go-to</h2>
                            </div>   
                            <div class="pm-row">
                                <div class="column">
                                    <h3>Category 1</h3>
                                    <a href="#">Link 1</a>
                                    <a href="#">Link 2</a>
                                    <a href="#">Link 3</a>
                                </div>
                                <div class="column">
                                    <h3>Category 2</h3>
                                    <a href="#">Link 1</a>
                                    <a href="#">Link 2</a>
                                    <a href="#">Link 3</a>
                                </div>
                                <div class="column">
                                    <h3>Category 3</h3>
                                    <a href="#">Link 1</a>
                                    <a href="#">Link 2</a>
                                    <a href="#">Link 3</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>         
            </div>
        </div>
        <!-- Website Navigation :END -->
        <!-- Main Content -->
        <div class="pm-mainContent">
          <div class="maxWidth-1440">
            Hello World!!
          </div>
        </div>
        <!-- Main Content :END -->
        <!-- Main Footer -->
        <footer class="pm-mainFooter">
            <div class="maxWidth-1440">This is a Footer</div>
        </footer>
        <!-- Main Footer :END -->
    </form>

Answer 1

要修复开口和关闭错误，您希望用if (pageYOffset > startPos)内部的.add()替换所有.toggle()方法。请记住，.toggle()既会添加>和删除相关类。考虑到您在滚动，正在添加，然后立即删除课程。简单地添加类（尽管反复）将阻止其闪烁。您也可以检查是否已经添加了课程。

请注意，您还需要将各种开关案例中的toggle()方法更改为add()，尽管这不是严格必要的，因为上面的修复程序将确保它们始终具有正确的类。

在滚动回到页面顶部时，要修复菜单"关闭"，您想将overflow: visible添加到.pm-mainNav。

最后，我还建议使用 this 而不是多个开关案例，请大大降低代码的逻辑行。

希望这会有所帮助！：）

/* Navigation Scroll */
var startPos = -1;
window.onscroll = function() {
  var bar = document.getElementById('pm-nav');
  var ourCompany = document.getElementById("our-company");
  var services = document.getElementById("services");
  var products = document.getElementById("products");
  var resources = document.getElementById("resources");
  var goTo = document.getElementById("go-to");
  if (startPos < 0) startPos = findPosY(bar);
  if (pageYOffset > startPos) {
    bar.style.position = 'fixed';
    bar.style.top = 0;
    ourCompany.classList.add("dropdown-content-scroll");
    services.classList.add("dropdown-content-scroll");
    products.classList.add("dropdown-content-scroll");
    resources.classList.add("dropdown-content-scroll");
    goTo.classList.add("dropdown-content-scroll");
  } else {
    bar.style.position = 'relative';
    ourCompany.classList.remove('dropdown-content-scroll');
    services.classList.remove('dropdown-content-scroll');
    products.classList.remove('dropdown-content-scroll');
    resources.classList.remove('dropdown-content-scroll');
    goTo.classList.remove('dropdown-content-scroll');
  }
};
function findPosY(obj) {
  var curtop = 0;
  if (typeof(obj.offsetParent) != 'undefined' && obj.offsetParent) {
    while (obj.offsetParent) {
      curtop += obj.offsetTop;
      obj = obj.offsetParent;
    }
    curtop += obj.offsetTop;
  } else if (obj.y)
    curtop += obj.y;
  return curtop;
}
/* When the user clicks on the button, toggle between hiding and showing the dropdown(s) content */
function toggleDrop(drop) {
  switch (drop) {
    case "our-company":
      document.getElementById("services").classList.remove('active-drop');
      document.getElementById("products").classList.remove('active-drop');
      document.getElementById("resources").classList.remove('active-drop');
      document.getElementById("go-to").classList.remove('active-drop');
      document.getElementById("our-company").classList.add("active-drop");
      break;
    case "services":
      document.getElementById("our-company").classList.remove('active-drop');
      document.getElementById("products").classList.remove('active-drop');
      document.getElementById("resources").classList.remove('active-drop');
      document.getElementById("go-to").classList.remove('active-drop');
      document.getElementById("services").classList.add("active-drop");
      break;
    case "products":
      document.getElementById("services").classList.remove('active-drop');
      document.getElementById("our-company").classList.remove('active-drop');
      document.getElementById("resources").classList.remove('active-drop');
      document.getElementById("go-to").classList.remove('active-drop');
      document.getElementById("products").classList.add("active-drop");
      break;
    case "resources":
      document.getElementById("services").classList.remove('active-drop');
      document.getElementById("products").classList.remove('active-drop');
      document.getElementById("our-company").classList.remove('active-drop');
      document.getElementById("go-to").classList.remove('active-drop');
      document.getElementById("resources").classList.add("active-drop");
      break;
    case "go-to":
      document.getElementById("services").classList.remove('active-drop');
      document.getElementById("products").classList.remove('active-drop');
      document.getElementById("resources").classList.remove('active-drop');
      document.getElementById("our-company").classList.remove('active-drop');
      document.getElementById("go-to").classList.add("active-drop");
      break;
    default:
      //make this unknown...
  }
}
var ourCompany = document.getElementById("our-company");
var services = document.getElementById("services");
var products = document.getElementById("products");
var resources = document.getElementById("resources");
var goTo = document.getElementById("go-to");
// Close the dropdown(s) if the user clicks outside of it
window.onclick = function(e) {
  if (!e.target.matches('.dropbtn')) {
    if (ourCompany.classList.contains('active-drop')) {
      ourCompany.classList.remove('active-drop');
    }
    if (services.classList.contains('active-drop')) {
      services.classList.remove('active-drop');
    }
    if (products.classList.contains('active-drop')) {
      products.classList.remove('active-drop');
    }
    if (resources.classList.contains('active-drop')) {
      resources.classList.remove('active-drop');
    }
    if (goTo.classList.contains('active-drop')) {
      goTo.classList.remove('active-drop');
    }
  }
}

/* Basic Site Rules */
* {
  margin: 0;
  padding: 0;
}
.maxWidth-1280 {
  max-width: 1280px;
  margin: 0 auto;
}
.maxWidth-1440 {
  max-width: 1440px;
  margin: 0 auto;
}
.pm-box-sizing * {
  box-sizing: border-box;
}
/* Columns */
.pm-col-5 {
  float: left;
  width: 20%;
}
/* Clear floats after the columns */
.pm-row:after {
  content: "";
  display: table;
  clear: both;
}
/* Columns :END*/
/* Basic Site Rules :END */
/* Main Header */
.pm-mainHeader {
  text-align: center;
  padding: 65px 0;
}
/* Main Header :END */
/* Main Navagation */
.pm-mainNav {
  overflow: visible;
  background-color: #333;
  font-family: Arial;
  margin: 0 auto;
  z-index: 10;
  width: 100%;
  left: 0;
  right: 0;
}
.dropdown {
  float: left;
  overflow: hidden;
}
.dropdown .dropbtn {
  font-size: 16px;
  border: none;
  outline: none;
  color: white;
  width: 100%;
  padding: 16px;
  background-color: inherit;
}
.pm-mainNav a:hover,
.dropdown:hover .dropbtn {
  background-color: white;
  color: black;
}
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  width: 100%;
  left: 0;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 2;
}
.dropdown-content-scroll {
  position: fixed;
  top: 50px;
}
.dropdown-content .header {
  background: red;
  padding: 16px;
  color: white;
}
.active-drop {
  display: block;
}
/* Create three equal columns that floats next to each other */
.column {
  float: left;
  width: 33.33%;
  padding: 10px;
  background-color: #ccc;
  height: 250px;
}
.column a {
  float: none;
  color: black;
  padding: 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}
.column a:hover {
  background-color: #ddd;
}
/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media (max-width: 600px) {
  .pm-mainNav a {
    width: 100%;
  }
  .dropdown,
  .dropbtn {
    width: 100%;
  }
  .column {
    width: 100%;
    height: auto;
  }
}
/* Main Navagation :END */
/* Main Content */
.pm-mainContent {
  background: #e3e3e3;
  padding: 500px 0;
  text-align: center;
}
/* Main Content :END*/
/* Main Footer */
.pm-mainFooter {
  padding: 100px 0;
  text-align: center;
  background: #333;
  color: white;
}
/* Main Footer :END */

<form id="siteForm" runat="server">
  <!-- Website Header -->
  <header class="pm-mainHeader">
    <div class="maxWidth-1440">This is a Header</div>
  </header>
  <!-- Website header :END -->
  <!-- Website Navigation -->
  <div id="pm-nav" class="pm-mainNav">
    <div class="maxWidth-1440">
      <div class="pm-row pm-box-sizing">
        <div class="dropdown pm-col-5">
          <button onclick="toggleDrop('our-company');return false;" class="dropbtn">Our Company</button>
          <div id="our-company" class="dropdown-content maxWidth-1440">
            <div class="header">
              <h2>Menu our-company</h2>
            </div>
            <div class="pm-row">
              <div class="column">
                <h3>Category 1</h3>
                <a href="#">Link 1</a>
                <a href="#">Link 2</a>
                <a href="#">Link 3</a>
              </div>
              <div class="column">
                <h3>Category 2</h3>
                <a href="#">Link 1</a>
                <a href="#">Link 2</a>
                <a href="#">Link 3</a>
              </div>
              <div class="column">
                <h3>Category 3</h3>
                <a href="#">Link 1</a>
                <a href="#">Link 2</a>
                <a href="#">Link 3</a>
              </div>
            </div>
          </div>
        </div>
        <div class="dropdown pm-col-5">
          <button onclick="toggleDrop('services');return false;" class="dropbtn">Services</button>
          <div id="services" class="dropdown-content maxWidth-1440">
            <div class="header">
              <h2>Menu services</h2>
            </div>
            <div class="pm-row">
              <div class="column">
                <h3>Category 4</h3>
                <a href="#">Link 1</a>
                <a href="#">Link 2</a>
                <a href="#">Link 3</a>
              </div>
              <div class="column">
                <h3>Category 5</h3>
                <a href="#">Link 1</a>
                <a href="#">Link 2</a>
                <a href="#">Link 3</a>
              </div>
              <div class="column">
                <h3>Category 6</h3>
                <a href="#">Link 1</a>
                <a href="#">Link 2</a>
                <a href="#">Link 3</a>
              </div>
            </div>
          </div>
        </div>
        <div class="dropdown pm-col-5">
          <button onclick="toggleDrop('products');return false;" class="dropbtn">Products</button>
          <div id="products" class="dropdown-content maxWidth-1440">
            <div class="header">
              <h2>Menu products</h2>
            </div>
            <div class="pm-row">
              <div class="column">
                <h3>Category 1</h3>
                <a href="#">Link 1</a>
                <a href="#">Link 2</a>
                <a href="#">Link 3</a>
              </div>
              <div class="column">
                <h3>Category 2</h3>
                <a href="#">Link 1</a>
                <a href="#">Link 2</a>
                <a href="#">Link 3</a>
              </div>
              <div class="column">
                <h3>Category 3</h3>
                <a href="#">Link 1</a>
                <a href="#">Link 2</a>
                <a href="#">Link 3</a>
              </div>
            </div>
          </div>
        </div>
        <div class="dropdown pm-col-5">
          <button onclick="toggleDrop('resources');return false;" class="dropbtn">Resources</button>
          <div id="resources" class="dropdown-content maxWidth-1440">
            <div class="header">
              <h2>Menu resources</h2>
            </div>
            <div class="pm-row">
              <div class="column">
                <h3>Category 1</h3>
                <a href="#">Link 1</a>
                <a href="#">Link 2</a>
                <a href="#">Link 3</a>
              </div>
              <div class="column">
                <h3>Category 2</h3>
                <a href="#">Link 1</a>
                <a href="#">Link 2</a>
                <a href="#">Link 3</a>
              </div>
              <div class="column">
                <h3>Category 3</h3>
                <a href="#">Link 1</a>
                <a href="#">Link 2</a>
                <a href="#">Link 3</a>
              </div>
            </div>
          </div>
        </div>
        <div class="dropdown pm-col-5">
          <button onclick="toggleDrop('go-to');return false;" class="dropbtn">Go To</button>
          <div id="go-to" class="dropdown-content maxWidth-1440">
            <div class="header">
              <h2>Menu go-to</h2>
            </div>
            <div class="pm-row">
              <div class="column">
                <h3>Category 1</h3>
                <a href="#">Link 1</a>
                <a href="#">Link 2</a>
                <a href="#">Link 3</a>
              </div>
              <div class="column">
                <h3>Category 2</h3>
                <a href="#">Link 1</a>
                <a href="#">Link 2</a>
                <a href="#">Link 3</a>
              </div>
              <div class="column">
                <h3>Category 3</h3>
                <a href="#">Link 1</a>
                <a href="#">Link 2</a>
                <a href="#">Link 3</a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- Website Navigation :END -->
  <!-- Main Content -->
  <div class="pm-mainContent">
    <div class="maxWidth-1440">
      Hello World!!
    </div>
  </div>
  <!-- Main Content :END -->
  <!-- Main Footer -->
  <footer class="pm-mainFooter">
    <div class="maxWidth-1440">This is a Footer</div>
  </footer>
  <!-- Main Footer :END -->
</form>