javascript - 固定标题 - 菜单不会掉落

标签 javascript jquery

嗨,我正在尝试在滚动工作时获得固定的标题。但是当单击菜单时,它只会跳到页面顶部。

固定标题中的菜单应该像在原始标题中一样下拉菜单,而不是跳跃。

在 fiddle 中向下滚动页面以显示辅助标题。

JS fiddle

https://jsfiddle.net/bs3ag1h8/5/

脚本

// HEADER SHRINK
$(window).on('scroll', function() {
        if ($(window).scrollTop() > 170) {
            $('.fixed-header').show();
        } else {
            $('.fixed-header').hide();
        }
    });

// TOGGLE MENU ~ CLICK DIV
    $('div.top_header').click(function() {
    $('#logo_menu ul').slideDown(300,'easeInOutQuad');
    return false;
  });

    $('#logo_menu a').click(function() {
    $(this).parents('ul').not('#logo_menu').slideUp(300,'easeInOutQuad');
    return false;
  });

    $('#logo_menu ul').mouseleave(function() {
    $(this).slideUp(300,'easeInOutQuad');
  });

// TOGGLE MENU conctact us ~ CLICK aHREF - must set div to display: hidden; or none; css

 $('a.dropsmall').click(function (e) {
     $(this).next("div").slideDown(200, 'easeOutCirc');
     console.log('div clicked');
     e.preventDefault();
     return false;
 });

 $('li.mainmenudrop').mouseleave(function () {
     $(this).children("div").slideUp(300, 'easeInOutQuad');
 });

 // TOGGLE MENU login ~ CLICK aHREF - must set div to display: hidden; or none; css

 $('a.dropsmall3').click(function (e) {
     $(this).next("div").toggle(10, 'easeOutCirc');
     console.log('div clicked');
     e.preventDefault();
     return false;
 });

//Main Menu toggle
    $('a.dropsmall2').click(function() {
        $(this).next('ul').slideDown(300,'easeInOutQuad');
    });

    $('#dropmenu a').click(function() {
        $(this).parents('ul').not('#dropmenu').slideUp(300,'easeInOutQuad');
    });

    $('#dropmenu > li').mouseleave(function() {
        $(this).children('ul').slideUp(300,'easeInOutQuad');
    });

//Remove class and replace with another
/*$("#hover_text2").mouseover( 
    function() {
    $(".bodyfooter_text2").toggleClass("bodyfooter_text2hover");
  }); */

$.extend($.easing,
 {
     easeInOutQuad: function (x, t, b, c, d) {
        if ((t/=d/2) < 1) return c/2*t*t + b;
        return -c/2 * ((--t)*(t-2) - 1) + b;
    },
    easeOutCirc: function (x, t, b, c, d) {
        return c * Math.sqrt(1 - (t=t/d-1)*t) + b;
    },
    easeInOutElastic: function (x, t, b, c, d) {
        var s=1.70158;var p=0;var a=c;
        if (t==0) return b;  if ((t/=d/2)==2) return b+c;  if (!p) p=d*(.3*1.5);
        if (a < Math.abs(c)) { a=c; var s=p/4; }
        else var s = p/(2*Math.PI) * Math.asin (c/a);
        if (t < 1) return -.5*(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
        return a*Math.pow(2,-10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )*.5 + c + b;
    }

    });

最佳答案

您需要进行以下更改:

  1. 删除 href="#"来自标签<a>菜单标题
  2. 您不需要有 2 个不同的菜单代码,一个位于顶部,一个出现在滚动时,您应该只有 1 个菜单并将其设置为 positionfixed在 CSS 中
  3. 如果您仍然需要滚动时出现的第二个菜单,请参阅 jsfiddle JSFiddle 上的解决方案

请参阅下面的实际代码:)

// HEADER SHRINK
$(window).on('scroll', function() {
  if ($(window).scrollTop() > 170) {
    $('.fixed-header').show();
  } else {
    $('.fixed-header').hide();
  }
});

// TOGGLE MENU ~ CLICK DIV
$('div.top_header').click(function() {
  $('#logo_menu ul').slideDown(300, 'easeInOutQuad');
  return false;
});

$('#logo_menu a').click(function() {
  $(this).parents('ul').not('#logo_menu').slideUp(300, 'easeInOutQuad');
  return false;
});

$('#logo_menu ul').mouseleave(function() {
  $(this).slideUp(300, 'easeInOutQuad');
});

// TOGGLE MENU conctact us ~ CLICK aHREF - must set div to display: hidden; or none; css

$('a.dropsmall').click(function(e) {
  $(this).next("div").slideDown(200, 'easeOutCirc');
  console.log('div clicked');
  e.preventDefault();
  return false;
});

$('li.mainmenudrop').mouseleave(function() {
  $(this).children("div").slideUp(300, 'easeInOutQuad');
});

// TOGGLE MENU login ~ CLICK aHREF - must set div to display: hidden; or none; css

$('a.dropsmall3').click(function(e) {
  $(this).next("div").toggle(10, 'easeOutCirc');
  console.log('div clicked');
  e.preventDefault();
  return false;
});

//Main Menu toggle
$('a.dropsmall2').click(function() {
  $(this).next('ul').slideDown(300, 'easeInOutQuad');
});

$('#dropmenu a').click(function() {
  $(this).parents('ul').not('#dropmenu').slideUp(300, 'easeInOutQuad');
});

$('#dropmenu > li').mouseleave(function() {
  $(this).children('ul').slideUp(300, 'easeInOutQuad');
});

$.extend($.easing, {
  easeInOutQuad: function(x, t, b, c, d) {
    if ((t /= d / 2) < 1) return c / 2 * t * t + b;
    return -c / 2 * ((--t) * (t - 2) - 1) + b;
  },
  easeOutCirc: function(x, t, b, c, d) {
    return c * Math.sqrt(1 - (t = t / d - 1) * t) + b;
  },
  easeInOutElastic: function(x, t, b, c, d) {
    var s = 1.70158;
    var p = 0;
    var a = c;
    if (t == 0) return b;
    if ((t /= d / 2) == 2) return b + c;
    if (!p) p = d * (.3 * 1.5);
    if (a < Math.abs(c)) {
      a = c;
      var s = p / 4;
    } else var s = p / (2 * Math.PI) * Math.asin(c / a);
    if (t < 1) return -.5 * (a * Math.pow(2, 10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p)) + b;
    return a * Math.pow(2, -10 * (t -= 1)) * Math.sin((t * d - s) * (2 * Math.PI) / p) * .5 + c + b;
  }

});
.fixed-header {
  background: #FFF;
  box-shadow: 3px 0 5px rgba(0, 0, 0, 0.5);
  display: none;
  padding: 10px;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 10000;
}
.fixed-header .header-content {
  margin: auto;
  width: 600px;
}
/****Layout*****************************/

.container {
  width: 1130px;
  margin: 0 auto;
  vertical-align: middle;
}
/* TOP HEADER */

.extheader {
  width: 100%;
  background: #fff;
  float: left;
}
.smaller {
  line-height: 10px;
}
.top_header {
  width: 100%;
  margin-top: 10px;
}
.logo {
  cursor: default;
  float: left;
  text-align: left;
  width: 39%;
  z-index: 9999;
  padding-top: 2px;
  padding-bottom: 2px;
  padding-left: 1%;
}
.logoImage {
  max-width: 30%;
  display: block;
}
/* Telephone & request call */

.headerlink {
  float: right;
  width: 59%;
  padding-right: 1%;
  font-family: SourceSansPro-Semibold;
  font-size: 22px;
}
#headerlink,
#headerlink h2 {
  text-decoration: none;
  color: #364C60;
  text-align: right;
  float: right;
  padding-left: 6px;
  color: #217DD1;
}
/* Menu Bar 	position:fixed;
	z-index:99;
	top:55px;*/

.extmenubar {
  width: 100%;
  background: #fff;
  float: left;
}
.menubar {
  width: 98%;
  padding: 0 1% 0 1%;
  float: left;
  border-radius: 0 0 7px 7px;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.menubarleft {
  float: left;
  width: 80%;
}
.menubarright {
  float: right;
  width: 20%;
}
/* Body */

/*Main Menu*/

.dropmenu,
.dropmenu ul,
.dropmenu li,
.dropmenu a {
  margin: 0;
  padding: 0;
  border: none;
  outline: none;
  z-index: 99;
}
.dropmenu {
  height: 27px;
  width: 600px;
}
.dropmenu li {
  position: relative;
  list-style: none;
  float: left;
  display: block;
}
.dropmenu li a {
  display: block;
  padding: 0 10px 0 5px;
  margin-right: 0px;
  height: 27px;
  line-height: 27px;
  text-decoration: none;
  font-size: 13px;
  font-family: 'SourceSansPro-Semibold';
  color: #000;
}
.dropmenu ul li a {
  font-size: 14px;
  font-family: 'SourceSansPro-Light';
  font-weight: 300px;
}
.dropmenu li:hover a {
  color: #000;
}
.dropmenu ul li:hover > a {
  color: #000;
}
.dropmenu ul li:hover a {
  background: #E1ECF5;
}
/*.dropmenu li:hover a { background: #444489; }*/

.dropmenu li ul {
  border-left: 5px solid #2081D9;
}
/*.dropmenu li ul li:hover a { border-left: 8px solid #ff4200; }*/

.dropmenu ul {
  position: absolute;
  top: 27px;
  left: 10px;
  opacity: 0;
  background: #fff;
  -webkit-transition: opacity 0.1s ease-in-out 0.2s;
  -moz-transition: opacity 0.1s ease-in-out 0.2s;
  -o-transition: opacity 0.1s ease-in-out 0.2;
  -ms-transition: opacity 0.1s ease-in-out 0.2s;
  transition: opacity 0.2s ease-in-out 0.2s;
  -webkit-border-radius: 0 0 5px 5px;
  -moz-border-radius: 0 0 5px 5px;
  border-radius: 0 0 2px 2px;
  display: none;
}
.dropmenu li:hover > ul {
  opacity: 1;
}
.dropmenu ul li {
  height: 0;
  overflow: hidden;
  -webkit-transition: height .3s ease .1s;
  -moz-transition: height .3s ease .1s;
  -o-transition: height .3s ease .1s;
  -ms-transition: height .3s ease .1s;
  transition: height .3s ease .1s;
}
.dropmenu li:hover > ul li {
  height: 27px;
  line-height: 27px;
  overflow: hidden;
}
.dropmenu ul li a {
  width: 130px;
  padding-left: 11px;
  height: 27px;
  line-height: 27px;
}
.dropmenu ul li:last-child a {
  -webkit-border-radius: 0 0 2px 2px;
  -moz-border-radius: 0 0 2px 2px;
  border-radius: 0 0 2px 2px;
  padding-bottom: 20px;
}
.dropmenu ul li:last-child {
  padding-bottom: 3px;
}
.dropmenu li a.liunk {
  background: url(../images/arrowb.gif) no-repeat 6px center;
}
.dropmenu li a.liunk:hover {
  background: url(../images/arrowd.png) no-repeat 6px center;
}
.arrow {
  float: left;
  height: 12px;
  width: 13px;
  margin: 5px 0 0px 0;
  background: url("../images/arrowc.png") no-repeat 0px 5px;
  -webkit-transition: -webkit-transform 0.5s ease-in-out;
  transition: transform 0.5s ease-in-out;
}
#dropmenu li:hover #rotate {
  background: url("../images/arrowc.png") no-repeat 0px 5px;
  -webkit-transform: rotate(-90deg);
  transform: rotate(-90deg);
}
/*Header menu and shopping cart*/

#mainmenu {
  list-style: none;
}
.mainmenuShopping {
  width: 130px;
  float: right;
  margin-right: 5px;
}
.mainmenuShopping li a {
  color: #000;
}
.mainmenuShopping li:hover a {
  color: #303A44;
}
.mainmenuHeader {
  width: 100%;
  float: right;
}
.mainmenuHeader li a {
  color: #000;
}
.mainmenuHeader li:hover a {
  color: #000000;
}
#mainmenu li {
  float: right;
  display: block;
  position: relative;
  border: none;
  cursor: default;
}
.mainmenuh {
  line-height: 10px;
  height: 15px;
  padding-bottom: 1px;
}
.mainmenus {
  line-height: 27px;
  height: 27px;
}
#mainmenu li a {
  font-size: 11px;
  display: block;
  text-decoration: none;
}
.mainmenufontH {
  font-family: 'SourceSansPro-Light';
}
.mainmenufontS {
  font-family: 'SourceSansPro-Semibold';
}
#mainmenu li .dropsmall,
.dropsmall3 {
  padding: 0 7px 0px 4px;
}
#mainmenu li:first-child .dropsmall {
  padding: 0 1px 0 3px;
}
#mainmenu li:hover .dropsmall {} .dropbox {
  float: right;
  position: absolute;
  text-align: left;
  padding: 0px 10px 10px 10px;
  background: #fff;
  display: none;
  z-index: 999999;
}
.dropboxLogin {
  width: 560px;
  padding: 7px 0px 0px 0px;
  right: -161px;
  top: 13px;
  background: #fff;
  z-index: 999;
  float: right;
  font-size: 12px;
}
}
.dropboxLogin p {
  color: #7E5919;
}
.dropboxContact {
  width: 270px;
  border: 1px solid #9AAAB8;
  right: -1px;
  top: 13px;
  z-index: 999999;
}
.dropboxShopping {
  width: 270px;
  border: 1px solid #9AAAB8;
  right: -1px;
  top: 23px;
}
.dropbox_1 {
  display: inline;
  float: left;
  position: relative;
  margin-left: 5px;
  margin-right: 5px;
  text-align: left;
}
#mainmenu h2,
#mainmenu h3,
#mainmenu ul li {
  font-family: Arial, Helvetica, sans-serif;
  line-height: 21px;
  font-size: 12px;
  text-align: left;
  color: #111;
}
#mainmenu h2 {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  font-weight: 400;
  margin: 7px 0 14px 0;
  padding-bottom: 4px;
  border-bottom: 1px solid #217DD1;
  text-align: left;
}
#mainmenu p {
  line-height: 16px;
  margin: 0 0 10px 0;
}
#mainmenu li:hover div a {
  font-size: 11px;
  color: #4FA4F9;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
}
#mainmenu li:hover div a:hover {
  color: #000;
}
#mainmenu li ul {
  list-style: none;
  padding: 0;
  margin: 0 0 12px 0;
}
#mainmenu li ul li {
  font-size: 12px;
  line-height: 24px;
  position: relative;
  text-shadow: 0 1px 0 #FFF;
  padding: 0;
  margin: 0;
  float: none;
  text-align: left;
  width: 130px;
}
#mainmenu li ul li:hover {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
}
.arrowb {
  float: left;
  height: 12px;
  width: 13px;
  margin: 5px 3px 0 0;
  background: url("../images/arrowc.png") no-repeat 0px 5px;
  -webkit-transition: -webkit-transform 0.5s ease-in-out;
  transition: transform 0.5s ease-in-out;
}
.menubarright li:hover #rotateb {
  background: url("../images/arrowc.png") no-repeat 0px 5px;
  -webkit-transform: rotate(-90deg);
  transform: rotate(-90deg);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="bblock1">

  <div style="position: fixed;" class="extmenubar">
    <div class="container">
      <div class="menubar ">
        <div class="menubarleft">
          <!-- Start Menu -->
          <ul class="dropmenu" id="dropmenu">
            <!-- Home 
		<li><a href="#" class="dropsmall2">Home</a>
		</li>-->
            <!-- Shop -->
            <li><a class="dropsmall2"><span class="arrow" id="rotate"></span>&nbsp;BIO HOMES</a>
              <ul style="display: none;">
                <li><a href="#">Introduction</a>
                </li>
                <li><a href="#">Innovation</a>
                </li>
                <li style="margin-bottom:10px;"><a href="#">Services</a>
                </li>
                <li><a href="#">Development</a>
                </li>
                <li><a href="#">Future</a>
                </li>
              </ul>
            </li>
            <li><a class="dropsmall2"><span class="arrow" id="rotate"></span>&nbsp;BIO ENERGY</a>
              <ul style="display: none;">
                <li><a href="#">Bio Heating</a>
                </li>
                <li><a href="#">Bio Lighting</a>
                </li>
                <li><a href="#">Bio Air </a>
                </li>
                <li><a href="#">Bio Frequency</a>
                </li>
              </ul>
            </li>
            <!-- Business Open -->
            <li><a class="dropsmall2"><span class="arrow" id="rotate"></span>&nbsp;BIO WATER</a>
              <ul style="display: none;">
                <li><a href="#">Whole House Filter</a>
                </li>
                <li><a href="#">Reverse Osmosis</a>
                </li>
                <li style="margin-bottom:10px;"><a href="#">Portable filters</a>
                </li>
                <li><a href="#">Portable storage</a>
                </li>
                <li><a href="#">Rain water storage</a>
                </li>
              </ul>
            </li>
            <!-- 2nd Close -->
            <!-- 5th Open -->
            <li><a class="dropsmall2"><span class="arrow" id="rotate"></span>&nbsp;BIO GARDEN</a>
              <ul style="display: none;">
                <li><a href="#">Bio Grow system</a>
                </li>
                <li><a href="#">Bio Watering system</a>
                </li>
                <li style="margin-bottom:10px;"><a href="#">Indoor growing</a>
                </li>
                <li><a href="#">Organic seeds</a>
                </li>
                <li><a href="#">Organic plants</a>
                </li>
              </ul>
            </li>
            <!-- 5th Close -->
            <!-- Business Open -->
            <li><a class="dropsmall2"><span class="arrow" id="rotate"></span>&nbsp;BIO HEALTH</a>
              <ul>
                <li><a href="#">Core health</a>
                </li>
                <li><a href="#">Enzymes</a>
                </li>
                <li><a href="#">Vitamins</a>
                </li>
                <li><a href="#">Minerals</a>
                </li>
                <li style="margin-bottom:10px;"><a href="#">Protien</a>
                </li>
                <li><a href="#">Detox</a>
                </li>
                <li><a href="#">Body boost</a>
                </li>
              </ul>
            </li>
            <!-- 2nd Close -->
          </ul>
        </div>
        <!-- 6th Open-->
        <div class="menubarright">
          <ul id="mainmenu" class="mainmenuShopping">
            <li class="mainmenudrop mainmenus"><a href="" class="dropsmall mainmenufontS">SHOPPING CART<span class="arrowb" id="rotateb"></span></a>
              <div class="dropbox dropboxShopping">
                <div class="dropbox_1">
                  <h2>Request Call Back</h2>
                  <p style="font-size:11px; margin-left:1px;">Please enter your telephone number and we will contact you shortly.</p>
                  <form action="feedback" accept-charset="utf-8" method="post">
                    <input name="send_email" value="yes" type="hidden">
                    <p>Tel:
                      <input class="menulogininput" name="Telephone" maxlength="25" style="font-size:13px; height: 14px; width:164px; margin-left:1px;" type="text">
                      <input class="btn blue blog" name="" value="Go" style="width:45px; margin-left:2px; font-size:13px; height: 20px; line-height:13px;" type="submit">
                    </p>
                  </form>
                  <h2>Email Us</h2>
                  <form action="feedback" accept-charset="utf-8" method="post">
                    <input name="send_email" value="yes" type="hidden">
                    <p style="font-size:11px;  margin-left:1px;">If you have any questions please email us:</p>
                    <p>Email:
                      <input class="menulogininput" name="Name" size="20" style="font-size:13px; height:14px; width:145px; margin-left:1px;" type="text">
                      <input class="btn blue blog" name="" value="Send" style="width:45px; margin-left:2px; height: 20px; line-height:13px; font-size:13px;" type="submit">
                    </p>
                    <p>
                      <textarea id="textareae" style="width:250px; margin:2px 0px 0px 1px;" name="Questions" cols="1" rows="3"></textarea>
                    </p>
                  </form>
                </div>
              </div>
            </li>
          </ul>
        </div>
        <!--End-->
      </div>
    </div>
  </div>


  <div>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>u
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>i
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>u
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>u
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>u
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>v
  </div>

关于javascript - 固定标题 - 菜单不会掉落,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39310118/

相关文章:

javascript - jQuery JSON API 调用不起作用?

javascript - jQuery 双范围 slider 重新加载

javascript - 如何查找数组元素的索引

javascript - 声明的函数被 IE 11 视为未定义

javascript - 如何在 iggridupdating 编辑器焦点上打开 jquery 对话框

javascript - 从对象中找到最高值

javascript - 如何正确地将 keyup() 函数应用于具有不同输入的不同 DOM 元素?

javascript - 如何使用参数获取 Javascript 中的当前日期

javascript - 如何制作一个正则表达式,将标签 {{name}} 替换为以这种方式命名的类的属性值

javascript - Chrome 插件 - 上下文菜单插入文本