javascript - 在 jQuery 粘性菜单中显示/隐藏(位于中间)

Question

我在尝试制作一个通过单击按钮显示/隐藏的粘性菜单时遇到了一些问题，这就是为什么我正在考虑完全摆脱整个显示/隐藏选项并可能从头开始重写它的原因 future 。

我可以确定 2 个主要问题:

1. 如何使显示/隐藏按钮与粘性菜单一起移动，但要使其在单击隐藏按钮时不会随粘性菜单一起消失？

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。

非常感谢您的帮助!

Answer 1

我解决你的问题但这个解决方案是否如你所想，我不知道 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"
    })
});