固定標題-菜單不會丟失
[英]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;
}
});
1 個解決方案
解決方案1
1 已采納 2016-09-03 19:04:33
您需要進行以下更改：
- 從菜單標題的標簽
<a>中移除href="#" - 您不需要有2個不同的菜單代碼，一個在頂部，一個在滾動時出現，您應該只有1個菜單，並將其
positionfixed在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>
在打開（活動）移動下拉菜單中將標題的位置從固定更改為相對？
[英]Change a header's position from fixed to relative on opening (active) mobile drop down menu?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.