Question

基本上我有一个打开菜单的链接，然后在窗口滚动经过某个点，它会固定在屏幕的顶部。当你关闭它，然后再次滚动时，它会再次打开并打开。我知道为什么在概念上它正在发生并尝试了一些事情，但无法让它发挥作用。下面的代码（只是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();
 });
}

Answer 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，只要该位置被修复，就会被设置。这将使它再次显示出来。

Answer 2

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

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

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

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

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

$(closedrop).click(function () {
    $(dropdown).hide();
    $(window).off('scroll', scrollHandler);
});

点击时粘滞菜单关闭但在窗口滚动后打开而不再点击

2 个答案: