Question

我试图在无尽的滚动页面的底部有一个菜单。我在这里有它的要点FIDDLE当你滚动我希望菜单消失然后重新出现在悬停/鼠标悬停，mouseout功能上。。我似乎无法让它完美地工作。如果你玩它，你会注意到当你滚动，然后将鼠标移到它上面它会回来。但是如果你用鼠标滚动仍然在区域上滚动它会向下滑动，然后向上滑动，然后向下滑动，然后向上滑动等。它似乎会使代码出现故障并且不再有问题。在实际的wepage上，你必须重新加载它以使其再次工作。

有人可以提供一些帮助吗？

感谢

HTML

      <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>             
      <div class = "width"></div><div id = "bar"></div>

CSS

     .width {
width:100%;
height:60px;
background-color:red;
background-image: url('{image:Background}');
position:fixed;
z-index:1;
bottom:0px;
text-align:center;
font:12px helvetica;
letter-spacing:2px;
text-transform:lowercase;
color:#0f0f0f;
line-height:20px;
}
#bar {
width:100%;
height:60px;
background-color:transparent;
bottom:0px;
position: fixed;
}

jquery

$(window).scroll(function () {
    if ($(this).scrollTop() < 10) {
        $(".width").stop(true, true).slideDown();
    } else {
        $(".width").slideUp();
    }
    $().ready(function () {
        $("#bar", this).mouseover(function () {
            $(".width").slideDown("slow");
        });
        $("#bar", this).mouseout(function () {
            $(".width").slideUp("slow");
        });
    });
});

Answer 1

将您的HTML更改为：

<div id="bar">
    <div class="width">
        · <a href="http://itsdoom.com" target="new" style="target-name: new; target-new: tab;">website</a> ·  <a href="/rss">rss</a> ·
        <div id="tituli">
            <a href="http://everycornerlurksdoom.tumblr.com">DOOM</a>
        </div><!-- #tituli -->
    </div><!-- .width -->
</div><!-- #bar -->

编辑**如果您正在追求的话，请告诉我：

$(document).ready(function(){
    $('.width').slideDown();
    hovered = false;
    $(window).scroll(function() { 
        if ($(window).scrollTop() >= 10 && hovered === false){
            $( ".width" ).slideUp();   
        } else if (hovered === true) { 
            $('.width').show();
        } else {
            $('.width').slideDown();
        }
    });
    $("#bar").mouseenter(function (e){
            if ($('.width').is(':visible') && hovered === false) {
                e.preventDefault();
                hovered = true;
            } else {
                $(".width").slideDown("slow");
                hovered = true;
            }
     });

     $("#bar").mouseleave(function (e){
         if ($(window).scrollTop() >= 10) {
             $(".width").slideUp("slow");
                 hovered = false;
         } else {
             e.preventDefault();
             hovered = false;
         }
     }); 
});

这是一个更新的小提琴：http://jsfiddle.net/4CdFP/28/

希望有所帮助。

jquery：菜单在滚动时消失，重新出现悬停/鼠标悬停/输出

1 个答案: