Question

我有以下网站结构。当我滚动时，有没有办法在我的固定菜单下方捕捉div容器的上边缘？我尝试了几乎所有的snapscrolls，但没有一个按照我想要的方式工作。这种东西的CSS方法是好的还是我的jquery。

<div id="container">
    <div class="menuContainer">MENU</div>
    <div class="topExtra"></div>
    <div class="slide" style="background-color:#5d9732;">ONE</div>
    <div class="slide" style="background-color:#00aeef;">TWO</div>
    <div class="slide" style="background-color:#c3cf21;">THREE</div>
    <div class="slide" style="background-color:#aeb9bf;">FOUR</div>
    <div class="slide" style="background-color:#5d9732;">ONE</div>
    <div class="slide" style="background-color:#00aeef;">TWO</div>
    <div class="slide" style="background-color:#c3cf21;">THREE</div>
    <div class="slide" style="background-color:#aeb9bf;">FOUR</div>
</div>

#container { margin:auto; width:500px; overflow:hidden; }
.topExtra { margin:auto; width:500px; height:120px;  }
.menuContainer { margin:auto; position:fixed; width:500px; height:120px; background-color:#aeb9bf;  }
.slide { margin:auto; width:500px; height:200px;  }

幻灯片不是全屏或100％宽度。我把结构弄得一团糟。希望有人可以解决一些问题。 http://jsfiddle.net/yx4p2/3/

Answer 1

您将需要对window.onscroll事件采取行动并为其附加功能。

更新：你的意思是其他的。

滚动菜单2秒后滚动菜单。

代码：

$(function () 
{
    // To keep from scrolling while scrolling
    var scrolling = false;

    window.onscroll = function (e) 
    {
        var timer,
            top    = $(".menuContainer").offset().top,
            bottom = top + $(".menuContainer").outerHeight();

        // Reset when scrolling again before animation
        clearTimeout(timer);

        if (!scrolling && window.pageYOffset > top && window.pageYOffset < bottom) 
        {
            // Set timer to scroll after 2 seconds
            timer = setTimeout(function () 
            {
                scrolling = true;
                if (window.pageYOffset > top && window.pageYOffset < bottom) 
                {
                    // The scrolling
                    $("html").animate({ scrollTop: bottom + "px" }, 100, function () 
                        {
                            // Done, no longer scrolling
                            scrolling = false;
                        });
                }
                else
                    scrolling = false;

            }, 2000);
        }
    }
});

测试jsFiddle here。

将各个div从顶部偏移120px

1 个答案: