我在尝试制作一个通过单击按钮显示/隐藏的粘性菜单时遇到了一些问题,这就是为什么我正在考虑完全摆脱整个显示/隐藏选项并可能从头开始重写它的原因 future 。
我可以确定 2 个主要问题:
如何使显示/隐藏按钮与粘性菜单一起移动,但要使其在单击隐藏按钮时不会随粘性菜单一起消失?
我尝试了很多关于如何使菜单动画化的选项,以便它从右向左切换(反之亦然)但不知何故每次出现问题(我的代码或我找到的选项) .我该怎么做?如果我设法对其进行动画处理,以便 90% 的 div 隐藏,那么隐藏/显示按钮仍然会有位置(这也将解决问题 #1)。
到目前为止,这是我的代码:
http://jsfiddle.net/ohkegetn/
(编辑:添加了正确的 jsfiddle 链接)
HTML:
<div class="menuWrapper">
<div id="menu">
<ul>
<a href="#" class="scroll"><li>One</li></a>
<a href="#" class="scroll"><li>Two</li></a>
<a href="#" class="scroll"><li>Three</li></a>
<a href="#" class="scroll"><li>Four</li></a>
</ul>
</div>
</div>
<div id="toggle">Show/Hide</div>
CSS:
body {
background: black;
font-family: Open Sans;
font-size: 180%;
line-height: 200%;
height: 100%;
color: white;
}
a{
color: white;
text-decoration: none;
}
.menuWrapper {
position: absolute;
top: 225px;
text-align: center;
width: 300px;
left: 0;
}
#toggle {
top: 450px;
position: absolute;
}
#menu {
width: 150px;
background: #0E586D;
color: white;
position: relative;
top: 0;
}
li {
color: #e5e5e5;
transition: 1s;
padding: 0 0 0 10px;
text-align: left;
display: block;
}
#menu ul a li:hover {
transition: 0.3s;
color: white;
background-color: #0f6a84;
}
p {margin: 200px}
JS/jQuery:
// Toggle - show/hide
$(document).ready(function(){
$("#toggle").click(function(){
$(".menuWrapper").fadeToggle("slide");
});
});
// Sticky Menu
var sticky_offset;
$(document).ready(function() {
var original_position_offset = $('#menu').position();
sticky_offset = original_position_offset.top;
$('#menu').css('position', 'relative');
});
$(window).scroll(function () {
var sticky_height = $('#menu').outerHeight();
var where_scroll = $(window).scrollTop();
var window_height = $(window).height();
if((where_scroll) > sticky_offset) {
$('#menu').css('position', 'fixed');
}
if((where_scroll) < (sticky_offset + sticky_height)) {
$('#menu').css('position', 'relative');
}
});
最后的笔记:
html/css 代码可能有点乱,很抱歉,但它只是一个测试版本。无论如何,它们并不那么相关。 jQuery 部分是。
如果可能的话,我也想坚持使用没有插件的 Javascript/jQuery。
非常感谢您的帮助!
最佳答案
我解决你的问题 但这个解决方案是否如你所想,我不知道 see this link
$(".scroll").mouseover(function() {
var pos = $(this).offset();
var width = $(this).outerWidth();
$("#toggle").css({
position: "absolute",
top: pos.top + "px",
left: (pos.left+width) + "px"
})
});
关于javascript - 在 jQuery 粘性菜单中显示/隐藏(位于中间),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27482740/