Question

我正在使用这个html＆amp; jquery我在另一个问题上发现它运作良好，但有一个例外。

它显示并隐藏div并且这很有效，除非div靠近屏幕底部然后显示它，但它的一部分在屏幕外。

是否有更新此代码，所以如果DIV部分在屏幕外，页面会自动滚动，以便进入视图？

HTML：

<ul id="list">
    <li>
        <a href="#" class="togglelink">America</a>
        <div class="toggle" style="display: block;">
            <p>America - USA - the States</p>
        </div>
    </li>
    <li>
        <a href="#" class="togglelink">Brazil</a>
        <div class="toggle" style="display: block;">
            <p>Brazil - Federative Republic of Brazil</p>
        </div>
    </li>
</ul>

JS：

$(document).ready(function () {
    $('.toggle').hide();
    $('a.togglelink').on('click', function (e) {
        e.preventDefault();
        var elem = $(this).next('.toggle')
        $('.toggle').not(elem).hide('slow');
        elem.toggle('slow');
    });
});

显然，任何其他显示且不在屏幕外的div都不应受到影响。

非常感谢：-D

Answer 1

您可以通过y值和高度来确定div容器的位置。因此，您可以确定它何时不在屏幕上。然后，您可能想要添加视差滚动http://wedesignpixel.com/best-jquery-parallax-scrolling-tutorials/

Answer 2

使用css你可以根据你的要求调整div的位置，这样就不会影响你的其他div

DIV显示屏幕稍微偏离

2 个答案: