用于导航菜单的 Java 脚本:
//
$(function() {
// Stick the #nav to the top of the window
var nav = $('#nav');
var navHomeY = nav.offset().top;
var isFixed = false;
var $w = $(window);
$w.scroll(function() {
var scrollTop = $w.scrollTop();
var shouldBeFixed = scrollTop > navHomeY;
if (shouldBeFixed && !isFixed) {
nav.css({
position: 'fixed',
top: 0,
left: nav.offset().left,
width: nav.width()
});
isFixed = true;
}
else if (!shouldBeFixed && isFixed)
{
nav.css({
position: 'static'
});
isFixed = false;
}
});
});
//]]>
HTML代码:
<div> <div class="pic"> <img class="image" src="logo.jpg"/> </div> </div>
类的 CSS:
.image{
width: 1000px;
height:800px;
opacity: 0.3;
filter: alpha(opacity=30); /* For IE8 and earlier */
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}
.image:hover {
width: 1100px;
height: 900px;
opacity: 0.9;
filter: alpha(opacity=100); /* For IE8 and earlier */
}
.pic {
border: 10px solid #fff;
height: 800px;
width: 1000px;
margin: 20px;
overflow: hidden;
-webkit-box-shadow: 5px 5px 5px #111;
box-shadow: 5px 5px 5px #111;
}
图像是透明的,悬停时会放大并移除透明度。导航菜单是粘在顶部并在滚动时移动(使用 JavaScript 代码)。图像位于导航菜单的正下方,当鼠标悬停在图像上时,导航菜单链接变得不可点击。有没有办法将菜单固定在前面?我试过 position: fixed;但它不起作用。
最佳答案
关于javascript - 导航菜单不会停留在屏幕前面,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42748408/