3
私が達成したいのは、ブラウザウィンドウが少なくとも980pxの幅である場合にのみメニューバーを上に固定することです。ウィンドウの幅を980px未満に変更すると、スティッキーメニューが表示されません。その後、980ピクセル幅にサイズを変更すると、メニューが再び表示されます。ここでjavascriptとメディアクエリを使用してリサイズ時にスティッキーメニューdivを表示/非表示する
は私のコードです：
var backup = $("#moving_topbar");
var buffer;
var mql = window.matchMedia("(min-width: 980px)");
mql.addListener(showhidemenu);
showhidemenu(mql);
function showhidemenu(mql) {
if (mql.matches) {
$(window).scroll(function() {
backup.append(buffer);
if ($(window).scrollTop() > 96) {
$("#moving_topbar").show();
} else {
$("#moving_topbar").hide();
}
});
} else {
backup = $("#moving_topbar");
buffer = $("#moving_topbar").detach();
}
}/*those are inside separate css files*/
#moving_topbar {
/*wide.css*/
position: fixed;
margin-left: auto;
margin-right: auto;
width: 100%;
height: 80px;
background-color: #15d6a7;
font-size: 20px;
font-family: Verdana;
color: #ffffff;
display: none;
}
#moving_topbar {
/*narrow.css*/
display: none;
}<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" media='screen and (min-width: 980px)' href="wide.css" type="text/css" />
<link rel="stylesheet" media='screen and (max-width: 979px)' href="narrow.css" type="text/css" />
</head>
<body>
<div id="moving_topbar">
<div id="logodiv"> <img src="img/logo100.png" alt="Logo" class="rounded_corners_moving"> </div>
<div id="socialtop_moving">
<div class="soc_icon_moving">
<!-- a, img (not important) -->
</div>
<div class="soc_icon_moving">
<!-- a, img (not important) -->
</div>
<div class="soc_icon_moving">
<!-- a, img (not important) -->
</div>
<div class="soc_icon_moving">
<!-- a, img (not important) -->
</div>
<div style="clear:both;"> </div>
</div>
<div id="menu_moving">
<div class="option_moving"> <b> ZAGRAJ </b> </div>
<div class="option_moving"> <b> PROJEKTY </b> </div>
<div class="option_moving"> <b> ARTYKUŁY </b> </div>
<div class="option_moving"> <b> ENG </b> </div>
<div style="clear:both;"> </div>
</div>
<div style="clear:both;"> </div>
</div>
</body>問題は、私はフルスクリーン上でウィンドウをF5とき、それはOKに動作することで、その後、私は（OK）その幅と無バーショーを減らすが、後これにより、幅（フルスクリーン）を再び大きくすると、スティッキーなトップバーメニューは表示されません。
ウィンドウ幅が980px（ここではトップバーなし - OK）より小さく、フルスクリーンの場合、メニューはスクロールして表示されます。その後、私は上記の手順を実行し、同じ問題が発生します。
多分これは私が何とか逃したばかげたミスですが、これはjavascript/jQueryでの私の貧しい経験のために起こったと思います。
の作業コードレクリエーション：
<!DOCTYPE HTML>
<head>
<style>
@media screen and (min-width: 980px)
{
#topbar
{
margin-left: auto;
margin-right: auto;
width: 100%;
height: 120px;
background-color: #15d6a7;
font-size: 20px;
font-family: Verdana;
color: #000000;
}
#moving_topbar
{
position: fixed;
margin-left: auto;
margin-right: auto;
width: 100%;
height: 80px;
background-color: #15d6a7;
font-size: 20px;
font-family: Verdana;
color: #000000;
display: none;
}
}
@media screen and (max-width: 979px)
{
#topbar
{
margin-left: auto;
margin-right: auto;
width: 100%;
padding-top: 14px;
padding-bottom: 1px;
background-color: #15d6a7;
font-size: 20px;
font-family: Verdana;
color: #000000;
}
#moving_topbar
{
display: none;
}
}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script>
var backup = $("#moving_topbar");
var buffer;
var mql = window.matchMedia("(min-width: 980px)");
mql.addListener(showhidemenu);
showhidemenu(mql);
function showhidemenu(mql)
{
if (mql.matches)
{
$(window).scroll(function()
{
backup.append(buffer);
if($(window).scrollTop() > 96) { $("#moving_topbar").show(); }
else { $("#moving_topbar").hide(); }
});
}
else
{
backup = $("#moving_topbar");
buffer = $("#moving_topbar").detach();
}
}
</script>
</head>
<body>
<div id="moving_topbar">
<div id="logodiv"> img logo </div>
<div id="socialtop_moving">
<div class="soc_icon_moving"> moving img 1 </div>
<div class="soc_icon_moving"> moving img 2 </div>
<div class="soc_icon_moving"> moving img 3 </div>
<div class="soc_icon_moving"> moving img 4 </div>
<div style="clear:both;"> </div>
</div>
<div id="menu_moving">
<div class="option_moving"> <b> moving menu 1 </b> </div>
<div class="option_moving"> <b> moving menu 2 </b> </div>
<div class="option_moving"> <b> moving menu 3 </b> </div>
<div class="option_moving"> <b> moving menu 4</b> </div>
<div style="clear:both;"> </div>
</div>
<div style="clear:both;"> </div>
</div>
<div id="topbar">
<div id="logodiv"> some img </div>
<div id="socialtop">
<div class="soc_icon"> a, img </div>
<div class="soc_icon"> a, img </div>
<div class="soc_icon"> a, img </div>
<div class="soc_icon"> a, img </div>
<div style="clear:both;"> </div>
</div>
<div id="menu">
<div class="option"> <b> menu1 </b> </div>
<div class="option"> <b> menu2 </b> </div>
<div class="option"> <b> menu3 </b> </div>
<div class="option"> <b> menu4 </b> </div>
<div style="clear:both;"> </div>
</div>
<div style="clear:both;"> </div>
</div>
<div style="width:500px;color:grey;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris mi sapien,
sollicitudin id molestie eu, dignissim vel tellus. Sed ut lorem dignissim, pharetra arcu ut, porttitor mi.
Nullam ac lacinia est. Ut iaculis felis dui, et tincidunt est mollis sed. In consectetur convallis mi, sed gravida arcu laoreet varius.
In ac tincidunt velit. Vivamus et sollicitudin lorem, et fringilla nulla.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris mi sapien,
sollicitudin id molestie eu, dignissim vel tellus. Sed ut lorem dignissim, pharetra arcu ut, porttitor mi.
Nullam ac lacinia est. Ut iaculis felis dui, et tincidunt est mollis sed. In consectetur convallis mi, sed gravida arcu laoreet varius.
In ac tincidunt velit. Vivamus et sollicitudin lorem, et fringilla nulla.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris mi sapien,
sollicitudin id molestie eu, dignissim vel tellus. Sed ut lorem dignissim, pharetra arcu ut, porttitor mi.
Nullam ac lacinia est. Ut iaculis felis dui, et tincidunt est mollis sed. In consectetur convallis mi, sed gravida arcu laoreet varius.
In ac tincidunt velit. Vivamus et sollicitudin lorem, et fringilla nulla.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris mi sapien,
sollicitudin id molestie eu, dignissim vel tellus. Sed ut lorem dignissim, pharetra arcu ut, porttitor mi.
Nullam ac lacinia est. Ut iaculis felis dui, et tincidunt est mollis sed. In consectetur convallis mi, sed gravida arcu laoreet varius.
In ac tincidunt velit. Vivamus et sollicitudin lorem, et fringilla nulla.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris mi sapien,
sollicitudin id molestie eu, dignissim vel tellus. Sed ut lorem dignissim, pharetra arcu ut, porttitor mi.
Nullam ac lacinia est. Ut iaculis felis dui, et tincidunt est mollis sed. In consectetur convallis mi, sed gravida arcu laoreet varius.
In ac tincidunt velit. Vivamus et sollicitudin lorem, et fringilla nulla.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris mi sapien,
sollicitudin id molestie eu, dignissim vel tellus. Sed ut lorem dignissim, pharetra arcu ut, porttitor mi.
Nullam ac lacinia est. Ut iaculis felis dui, et tincidunt est mollis sed. In consectetur convallis mi, sed gravida arcu laoreet varius.
In ac tincidunt velit. Vivamus et sollicitudin lorem, et fringilla nulla.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris mi sapien,
sollicitudin id molestie eu, dignissim vel tellus. Sed ut lorem dignissim, pharetra arcu ut, porttitor mi.
Nullam ac lacinia est. Ut iaculis felis dui, et tincidunt est mollis sed. In consectetur convallis mi, sed gravida arcu laoreet varius.
In ac tincidunt velit. Vivamus et sollicitudin lorem, et fringilla nulla.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris mi sapien,
sollicitudin id molestie eu, dignissim vel tellus. Sed ut lorem dignissim, pharetra arcu ut, porttitor mi.
Nullam ac lacinia est. Ut iaculis felis dui, et tincidunt est mollis sed. In consectetur convallis mi, sed gravida arcu laoreet varius.
In ac tincidunt velit. Vivamus et sollicitudin lorem, et fringilla nulla.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris mi sapien,
sollicitudin id molestie eu, dignissim vel tellus. Sed ut lorem dignissim, pharetra arcu ut, porttitor mi.
Nullam ac lacinia est. Ut iaculis felis dui, et tincidunt est mollis sed. In consectetur convallis mi, sed gravida arcu laoreet varius.
In ac tincidunt velit. Vivamus et sollicitudin lorem, et fringilla nulla.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris mi sapien,
sollicitudin id molestie eu, dignissim vel tellus. Sed ut lorem dignissim, pharetra arcu ut, porttitor mi.
Nullam ac lacinia est. Ut iaculis felis dui, et tincidunt est mollis sed. In consectetur convallis mi, sed gravida arcu laoreet varius.
In ac tincidunt velit. Vivamus et sollicitudin lorem, et fringilla nulla.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris mi sapien,
sollicitudin id molestie eu, dignissim vel tellus. Sed ut lorem dignissim, pharetra arcu ut, porttitor mi.
Nullam ac lacinia est. Ut iaculis felis dui, et tincidunt est mollis sed. In consectetur convallis mi, sed gravida arcu laoreet varius.
In ac tincidunt velit. Vivamus et sollicitudin lorem, et fringilla nulla.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris mi sapien,
sollicitudin id molestie eu, dignissim vel tellus. Sed ut lorem dignissim, pharetra arcu ut, porttitor mi.
Nullam ac lacinia est. Ut iaculis felis dui, et tincidunt est mollis sed. In consectetur convallis mi, sed gravida arcu laoreet varius.
In ac tincidunt velit. Vivamus et sollicitudin lorem, et fringilla nulla
</div>
</body>
この長いLoremのイプサムのため申し訳ありませんが、それはページをスクロール可能にする必要があります。また私を許しても、コードを適切にフォーマットする方法がわかりません。
すでに1つあります。どういう意味ですか？私は狭いウィンドウとhtml（私の移動divが含むもの）にCSSを追加しましたが、htmlはそれほど重要ではありません。 – GameDevMike
メディアクエリを書き込めませんか？あなたは簡単にCSSで達成することができます –
Show/hide移動divは私が知る限り、CSSによってunachievableです。このdivは常に表示されません。 ウィンドウの幅が980ピクセル以上の場合にのみ表示/非表示と移動を行います。狭いウィンドウでは表示しないでください。 あまりにも悪いですが、変更は1回しか発生しません。メニューがデフォルト状態（表示されるかどうか）に戻りません。 – GameDevMike