Question

我有这个导航，可以在用户点击下拉箭头时展开。此导航保存在一个隐藏溢出的框容器中。我想要实现的是当用户鼠标位于盒子的前20％时它向上滚动，当它在底部20％时它向下滚动。我尝试过各种各样的插件并尝试自己编写，但到目前为止还没有运气！

这必须具有响应性，所以我的工作百分比。

HTML SET UP：

<div class="container">
    <div class="title">Where to next? <span>(this title will be fixed)</span></div>
    <ul class="pagesNav">
        <li><a href="#">Page1</a></li>
        <li class="has_children">
            <a href="#">Page2</a>
            <ul class="children">
                <li><a href="#">Child1</a></li>
                <li><a href="#">Child2</a></li>
                <li><a href="#">Child3</a></li>
            </ul>
        </li>
        <li><a href="#">Page3</a></li>
        <li><a href="#">Page4</a></li>
        <li><a href="#">Page5</a></li>
        <li><a href="#">Page6</a></li>
    </ul>
</div>

看看我的小提琴：

http://jsfiddle.net/7d8fA/

Answer 1

您可以通过以下方式获得所需的效果：

var height=$('.container').height();
var top20=(height/100)*20;
var top80=height-top20;
$('.container').mouseover(function(e) {
    e.stopPropagation();
    if ((e.clientY-e.currentTarget.offsetTop)<top20) {
        $(".container").animate({
           scrollTop: 0
        }, 10);
    } else if (e.clientY>top80) {
        $(".container").animate({
           scrollTop: height
        }, 10);
    }
});

分叉小提琴 - ＆gt;的 http://jsfiddle.net/U5Uk8/

Box内容滚动鼠标悬停

1 个答案: