0

基本上我有一个打开菜单的链接，然后在窗口滚动到某个点时，它固定在屏幕顶部。当您关闭它，然后再次滚动时，它会再次打开并固定。我知道为什么在概念上它会发生并尝试了一些事情，但无法让它发挥作用。下面的代码（只是JS）。只需要它在您滚动时关闭并且不会重新出现。在此先感谢，如果这是一个愚蠢的问题，我们深表歉意。

HTML

<div class="feedback">Share For Feedback</div>
<div class="dropdown"> 
    <p>Share it !!!</p> 
    <span> 
        <a href="#" class="closedrop">X</a>
    </span>
    <div class="share-icon-holder"> 
        <span class="spr share-icon fb"> 1 </span>
        <span class="spr share-icon tw"> 2 </span>
        <span class="spr share-icon mail "> 3 </span>
        <span class="spr share-icon copy"> 4 </span>
    </div>
 </div>

jQuery

function showSticky() {
var feedback = $('.feedback'),
dropdown = $('.dropdown'),
myloveitfirstrow = $('.my-love-it-product:first'),
closedrop = $('.closedrop'),
hasBeenClicked = false;

$(feedback).click(function () {
    $(this).data('clicked', true);
    $(dropdown).show();
    $(window).scroll(function () {
        var midheight = $(myloveitfirstrow).outerHeight(true),
        scrollVal = $(this).scrollTop();

        if (scrollVal > midheight) {
            $(dropdown).css({ 'position': 'fixed', 'top': '0', 'left': '0', 'display': 'block', 'z-index': '400', 'text-align': 'center', 'width': '100%', 'height': '100px' });
        } else {
            $(dropdown).css({ 'position': 'absolute', 'top': '50px', 'left': '-100px' });
        }
     });
 });

 $(closedrop).click(function () {
     hasBeenClicked = true;
     $(dropdown).hide();
 });
}
4

2 回答 2

1 
if (scrollVal > midheight) {
    $(dropdown).css({ 'position': 'fixed', 'top': '0', 'left': '0'/*, 'display': 'block'*/, 'z-index': '400', 'text-align': 'center', 'width': '100%', 'height': '100px' });
} else {
    $(dropdown).css({ 'position': 'absolute', 'top': '50px', 'left': '-100px' });
}

如果您进行上述更改，它仍然会这样做吗？我注释掉了display: block，只要位置固定，它就会被设置。这将使它再次显示。

于 2013-07-31T19:41:04.627 回答
0

当菜单再次关闭时，您需要关闭滚动事件。首先，您可能希望创建一个在触发滚动事件后调用的函数：

function scrollHandler() {
    // Add your code here
}

在用户打开菜单后启用事件：

$(feedback).click(function () {
    $(dropdown).show();
    $(window).on('scroll', scrollHandler);
})

最后，在菜单再次关闭时关闭滚动事件处理程序：

$(closedrop).click(function () {
    $(dropdown).hide();
    $(window).off('scroll', scrollHandler);
});
于 2013-07-31T19:46:19.880 回答