0
我有一個動態導航，跟隨用戶在頁面下。在移動設備上，我不希望導航功能放大，因爲您無法訪問右側的導航。沒有縮放動態固定元素
我試過的方法打破了整個導航。任何其他想法？
兩個容器中提問：#top-bar & #top-bar-fixed
控制器JS註釋掉的代碼是什麼，我試圖
/* FLOAT NAV CONTROLLER */
$(function(){
var bar = $('#top-bar'),
showBar = true,
stalkbutton = $('#stalkbutton'),
state = false;
if (notMobile == false) {
showBar = false;
}
floatNav();
$(window).scroll(function() {
floatNav();
});
function floatNav() {
$('.close-float').click(function() {
if (state == true) {
state = false;
showBar = false;
bar.slideUp(200, function() {
$(this).attr('id', 'top-bar').css('display', 'block');
});
}
});
if (showBar && state == false && $(window).scrollTop() > 300) {
bar.attr('id', 'top-bar-fixed').slideDown('slow', function() {
state = true;
/*$(this).css({transform: 'scale(' + window.innerWidth/document.documentElement.clientWidth + ')',
left: window.pageXOffset + 'px',
bottom: document.documentElement.clientHeight - (window.pageYOffset + window.innerHeight) + 'px'});*/
});
} else if (state == true && $(window).scrollTop() < 300) {
state = false;
bar.slideUp(200, function() {
$(this).attr('id', 'top-bar').css('display', 'block');
});
}
}
});
的CSS
.logo {
float: left;
color: #30546b;
line-height: 49px;
}
.logo img {
position: relative;
float: left;
margin-right: 10px;
}
.logo .bloom {
position: absolute;
top: 0;
left: 0;
}
.main-width-nav {
width: 75%;
min-width: 1005px;
max-width: 1428px;
height: 45px;
margin: 0 auto;
position: relative;
}
#homebutton {
position: absolute;
display: inline-block;
opacity:0.75;
top: 50%;
left: 295px;
transform: translate(0,-50%);
}
#stalkbutton {
position: absolute;
display: none;
opacity:0.75;
top: 50%;
left: 310px;
transform: translate(0,-50%);
cursor: pointer;
}
#top-bar .close-float {
display:none;
}
#top-bar-fixed .main-width-nav .close-float {
position: absolute;
top: 0;
margin-top: 45px;
left: 50%;
transform: translate(-50%, 0);
cursor: pointer;
}
#top-bar, #bottom-bar {
background: url(http://gfxgaming.cu.cc/images/gamurs/pattern-bg-menu.png) repeat scroll left top rgba(0, 0, 0, 0.6);
padding: 6px 0 5px;
}
#top-bar-spacer {
width: 100%;
height: 57px;
border-bottom: 1px solid #131313;
background: #131313;
/* Old browsers */
background: -moz-linear-gradient(top, #131313 0%, #1c1c1c 9%, #111111 28%, #000000 49%, #2b2b2b 81%, #2c2c2c 93%, #4c4c4c 100%);
/* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #131313), color-stop(9%, #1c1c1c), color-stop(28%, #111111), color-stop(49%, #000000), color-stop(81%, #2b2b2b), color-stop(93%, #2c2c2c), color-stop(100%, #4c4c4c));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #131313 0%, #1c1c1c 9%, #111111 28%, #000000 49%, #2b2b2b 81%, #2c2c2c 93%, #4c4c4c 100%);
/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #131313 0%, #1c1c1c 9%, #111111 28%, #000000 49%, #2b2b2b 81%, #2c2c2c 93%, #4c4c4c 100%);
/* Opera 11.10+ */
background: -ms-linear-gradient(top, #131313 0%, #1c1c1c 9%, #111111 28%, #000000 49%, #2b2b2b 81%, #2c2c2c 93%, #4c4c4c 100%);
/* IE10+ */
background: linear-gradient(to bottom, #131313 0%, #1c1c1c 9%, #111111 28%, #000000 49%, #2b2b2b 81%, #2c2c2c 93%, #4c4c4c 100%);
/* W3C */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#131313', endColorstr='#4c4c4c', GradientType=0);
/* IE6-9 */
}
#top-bar {
background: #242b35; /* Old browsers */background: -moz-linear-gradient(top, #242b35 0%, #242b35 50%, #181f29 51%, #181f29 98%, #75196a 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#242b35), color-stop(50%,#242b35), color-stop(51%,#181f29), color-stop(98%,#181f29), color-stop(100%,#75196a)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #242b35 0%,#242b35 50%,#181f29 51%,#181f29 98%,#75196a 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #242b35 0%,#242b35 50%,#181f29 51%,#181f29 98%,#75196a 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #242b35 0%,#242b35 50%,#181f29 51%,#181f29 98%,#75196a 100%); /* IE10+ */
background: linear-gradient(to bottom, #242b35 0%,#242b35 50%,#181f29 51%,#181f29 98%,#75196a 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#242b35', endColorstr='#75196a',GradientType=0); /* IE6-9 */
border-bottom: 1px solid #4B1B4C;
position: relative;
z-index: 999;
width: 100%;
}
#top-bar-fixed {
display: none;
background: #242b35; /* Old browsers */background: -moz-linear-gradient(top, #242b35 0%, #242b35 50%, #181f29 51%, #181f29 98%, #75196a 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#242b35), color-stop(50%,#242b35), color-stop(51%,#181f29), color-stop(98%,#181f29), color-stop(100%,#75196a)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #242b35 0%,#242b35 50%,#181f29 51%,#181f29 98%,#75196a 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #242b35 0%,#242b35 50%,#181f29 51%,#181f29 98%,#75196a 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #242b35 0%,#242b35 50%,#181f29 51%,#181f29 98%,#75196a 100%); /* IE10+ */
background: linear-gradient(to bottom, #242b35 0%,#242b35 50%,#181f29 51%,#181f29 98%,#75196a 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#242b35', endColorstr='#75196a',GradientType=0); /* IE6-9 */
border-bottom: 2px solid #001727;
-webkit-box-shadow: 0 8px 9px 0 rgba(0,0,0,0.3);
-moz-box-shadow: 0 8px 9px 0 rgba(0,0,0,0.3);
box-shadow: 0 8px 9px 0 rgba(0,0,0,0.3);
border-bottom: 1px solid #4B1B4C;
padding: 7px 0 4px 0;
position: fixed;
top: 0;
left: 0;
z-index: 999;
width: 100%;
}
#top-bar-fix {
height: 70px;
background: rgba(85,191,255,0.5);
}
所以你不想用戶能夠放大？您可以使用視口標籤關閉該功能。 – Christina 2014-11-15 05:14:41
我希望他們能夠縮放，但我希望固定版本的欄始終位於視圖端口的範圍內。基本上，當它們放大時，導航會被推離屏幕使其無法使用。我希望它保持在「有效」的縮放級別，以便全部顯示。有效的是任何維度保持所有元素在線和在線。 – WASasquatch 2014-11-15 05:21:02