Question

小免责声明：我不是母语为英语的人。我的页面包含3个基本块，每个块都是一个窗口大小。标题，文章和页脚。我知道我不应该弄乱页面由用户控制的方式，但我有这个想法，在到达页面上的某个点之后，视图向下/向上滚动显示整个块/ div。到目前为止，“原型”看起来像这样：

            var yOffset = window.pageYOffset;
            var header = document.getElementById('header');
            var headerHeight = $("#header").height();

            if(yOffset >= headerHeight2){
                $("body,html").animate(
                    {
                        scrollTop : 500                       
                    }, 400); 
            }

我遇到的最大问题是它只有在我缩小并重新加载页面时才有效。

Answer 1

您正在描述它的方式，似乎您的代码在加载页面时正确运行。您需要做的是找到一种在达到某个点时运行滚动码的方法。

由于您似乎在使用jquery，我将尝试给您一个如何实现这一目标的示例：

// we can fetch the header and store it into a variable right away
// so that we don't fetch it on every scroll action.
var header = document.getElementById('header');
var headerHeight = $("#header").height();
var yOffset = window.pageYOffset;

// This is fetched here to minimize the amount of
// jquery searches we do inside the 'onScroll'-function
// since it is being called multiple times
var elementToAnimate = $("body,html");

// Here we tell jquery that we want to run this function
// every time the window is scrolled.
$(window).scroll(function() {
    // Here I just pasted your code since you said it worked.
    yOffset = window.pageYOffset;

    if(yOffset >= headerHeight2){
        elementToAnimate.animate(
            {
                scrollTop : 500                       
            }, 400); 
    }
});

我没有时间尝试这个，但是根据你的描述，它似乎应该有效。请评论，如果没有，我会解决它。

请问我是否解释得不够好:)）

Answer 2

当您使用jquery时，您可以使用$（window）.scroll（）事件来获取实际滚动，而不是将其与headerHight进行比较，如下所示：

  MinorTickSize="0" TickStyle="Crossing"

你明白了

Answer 3

了解Waypoint http://imakewebthings.com/waypoints/ 并使用offset选项来控制何时应该调用该函数。 http://imakewebthings.com/waypoints/api/offset-option/

这使您可以很好地控制用户滚动页面时如何以及何时触发操作。

使用javascript到达某个位置后滚动

3 个答案: