固定标题-菜单不下降
fixed header - menu does not drop
嗨，我正试图在滚动工作上获得固定的标题。但是当菜单被点击时，它只是跳到页面的顶部。
固定标题中的菜单应该像在原始标题中那样放下菜单，而不是跳转。
向下滚动页面以显示副标题。
JS小提琴
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;
}
});
您需要做以下更改:
- 从菜单标题的
<a>标签中删除href="#" - 你不需要有两个不同的菜单代码，一个在顶部，一个出现在滚动，你应该只有一个菜单，并使其
position为fixed在css - 如果你仍然需要第二个菜单出现在滚动看到这里的解决方案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> 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> 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> 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> 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> 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>相关文章：
- Wordpress标题和子菜单样式对IE的不满
- 按年份和月份折叠帖子标题菜单
- 在聚合物的子菜单标题中添加事件
- 从下拉菜单选项中显示“标题”标签
- 如何在可展开菜单中正确显示标题
- 引导滚动间谍不起作用，导航菜单按钮导致标题重新加载
- 如何创建一个仅在内容上滚动而不在标题上滚动的滚动条菜单
- 激活下拉菜单时动态更改标题的位置
- 在打开(活动）移动下拉菜单时将标题的位置从固定更改为相对
- Dojo:TabContainer-如何在标题中放置菜单按钮
- 如何根据AngularJS中的下拉菜单项更改页面标题
- 从HTML标题和段落创建下拉菜单
- 更改子菜单的href属性'jQuery.menu中的标题
- 删除标题时禁用Highcharts下载菜单
- 标题菜单的高度增加了，但在HTML源代码中什么也没发生
- 可以't将项目添加到标题菜单
- 如何访问剑道网格's列菜单，并为列标题中的特定列添加筛选选项
- 覆盖菜单落在标题后面
- 是否有隐藏在网页上的菜单/标题，并有文本自动出现x秒量后
- 单击下一个菜单标题时取消切换上一个菜单
