当页面滚动时，如何让我的下拉导航不出错？

Question

当页面滚动时，下拉导航“bugs out”。当页面滚动时，导航会打开和关闭。然后，当您滚动回顶部并且导航回到相对位置时，下拉菜单将不再打开，直到您开始向下滚动（此时第一个错误再次出现）。

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

我在下面列出了完整的代码，以防网站上还有其他可能导致问题发生的内容。

我正在寻找 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

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

请注意，您还需要将各种 switch case 中的 toggle() 方法更改为 add()，但这并不是绝对必要的，因为上述修复将确保它们始终具有正确的类。

要修复当您滚动回页面顶部时菜单卡在“关闭”状态的问题，您需要将overflow: visible 添加到.pm-mainNav。

最后，我还建议使用 this 而不是多个 switch case，从而大大减少了逻辑代码行数。

希望这会有所帮助！ :)

/* 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>